Shadcn Show for React Radix UI

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>;