shadcn.io is an independent project built on shadcn/ui
Installation
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.createSignal(0);
const isGreaterThan2 = value > 2;
return (
<div class="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 class="text-muted-foreground">Not there yet. Keep clicking...</p>
);
const Content = () => <p class="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.
API Reference
Show
childrenJSX.Element
Content to render when when is truthy.
whenboolean
When truthy, renders children. When falsy, renders fallback.
fallback?JSX.Element
Content to render when when is falsy.