shadcn.io is not affiliated with official shadcn/ui

Shadcn Show for React and Tailwind

Conditionally render content based on a boolean value.

Not there yet. Keep clicking...

Installation

bunx --bun shadcn@latest add https://kit.dev/r/show.json

pnpm dlx shadcn@latest add https://kit.dev/r/show.json

npx shadcn@latest add https://kit.dev/r/show.json

yarn shadcn@latest add https://kit.dev/r/show.json

Install the following dependencies:

bun add @ark-ui/react

pnpm add @ark-ui/react

npm install @ark-ui/react

yarn add @ark-ui/react

Copy and paste the following code into your project.

components/ui/show.tsx

"use client";

import type React from "react";

interface ShowProps {
  /**
   * Content to render when `when` is truthy.
   */
  children: React.ReactNode;
  /**
   * Content to render when `when` is falsy.
   */
  fallback?: React.ReactNode;
  /**
   * When truthy, renders children. When falsy, renders fallback.
   */
  when: boolean;
}

export const Show = (props: ShowProps) => {
  const { when, fallback, children } = props;

  if (when) {
    return <>{children}</>;
  }

  return <>{fallback}</>;
};

Update the import paths to match your project setup.

Usage

import React from "react";
import {
  NumberInput,
  NumberInputDecrement,
  NumberInputGroup,
  NumberInputIncrement,
  NumberInputInput,
} from "@/components/ui/number-input";
import { Show } from "@/components/ui/show";

const ShowDemo = () => {
  const [value, setValue] = React.useState(0);

  const isGreaterThan2 = value > 2;

  return (
    <div className="flex max-w-48 flex-col gap-4 text-center text-sm">
      <NumberInput
        min={0}
        onValueChange={({ value }) => setValue(Number(value))}
      >
        <NumberInputGroup>
          <NumberInputDecrement />
          <NumberInputInput />
          <NumberInputIncrement />
        </NumberInputGroup>
      </NumberInput>

      <Show fallback={<Fallback />} when={isGreaterThan2}>
        <Content />
      </Show>
    </div>
  );
};

const Fallback = () => (
  <p className="text-muted-foreground">Not there yet. Keep clicking...</p>
);

const Content = () => <p className="text-success">Your got it!</p>;

Accessibility

Key	Description
`ArrowUp`	Move up.
`ArrowDown`	Move down.
`Home`	Go to the start.
`End`	Go to the end.
`Enter`	Activate the focused item.
`Space`	Activate the focused control.

API Reference

Show

PropType

Presence

Swap