Skip to content

shadcn.io is an independent project built on shadcn/ui

Components

Free

Show for React

Render children when a condition holds and a fallback when it doesn't, with no ternary in the markup. For React, when a branch reads better as a tag.

Installation

Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
GoogleGitHub
Use email insteadNo credit card

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

Arrow Up
Move up.
Arrow Down
Move down.
Home
Go to the start.
End
Go to the end.
Enter
Activate the focused item.
Space
Activate the focused control.

FAQ

What does Show do?

It renders its children when when is true and the fallback when it is false, with no ternary in the markup. fallback is optional; without it nothing renders in the false case.

What can I pass as when?

A boolean. Compute it first, as when={value > 2} in the demo, or use Boolean(user) for a value that may be missing. A non-boolean is rejected by the types.

Is the content of the unused branch still evaluated?

Yes. It is only a component, so the JSX you pass for both branches is created on every render, though only one is rendered. If building a branch is costly or unsafe, such as reading a field on a null value, use a normal && or ternary.

Does Show narrow TypeScript types?

No. A when check inside Show does not narrow the variable for the children, so when={user} and then user.name still errors. Use a conditional expression when you need narrowing.

How do I install Show in React?

Run the command in the Installation section on this page. It adds one small file, show, with no dependencies.

API Reference

Show

PropType
childrenReact.ReactNode

Content to render when when is truthy.

whenboolean

When truthy, renders children. When falsy, renders fallback.

fallback?React.ReactNode

Content to render when when is falsy.