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

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 { Show } from "@/registry/react/components/show";

<Show when={isLoading} fallback={<Spinner />}>
 {/** content */}
</Show>

API Reference

Show

Prop	Type	Default
`when`	`boolean`	required
`fallback`	`React.ReactNode`	-
`children`	`React.ReactNode`	required

Presence

Swap