Every component below is imported from @viliha/vui-react, the package the React edition ships. This page used to render a local shadcn fork that had quietly drifted into a different design; it does not anymore. Colors, radius, fonts, borders and dark mode all come from theme.css. Add your own className to override anything. The other editions read the same tokens but do not all ship every family here, so /demo is the page that says what each one actually has.

Dialog

Controlled by open/onClose, with header, body and footer sections.

import { Dialog, DialogHeader, DialogTitle, DialogBody,
DialogFooter } from "@viliha/vui-react/dialog";

const [open, setOpen] = React.useState(false);

<Button onClick={() => setOpen(true)}>Open dialog</Button>
<Dialog open={open} onClose={() => setOpen(false)} label="Invite teammate">
<DialogHeader>
  <DialogTitle>Invite teammate</DialogTitle>
</DialogHeader>
<DialogBody>
  <Input placeholder="you@example.com" />
</DialogBody>
<DialogFooter>
  <Button variant="outline" onClick={() => setOpen(false)}>Cancel</Button>
  <Button onClick={() => setOpen(false)}>Send invite</Button>
</DialogFooter>
</Dialog>

Alert dialog

Confirm destructive actions.

Sheet

Side panel / drawer.

Popover / Hover card / Tooltip

Button

<Button>Default</Button>
<Button variant="secondary" /><Button variant="destructive" />
<Button variant="outline" /><Button variant="ghost" /><Button variant="link" />

Toggle / Toggle group

Toast (Sonner)

Badge

DefaultSecondaryDestructiveOutline

Alert

Card

Team plan

$29 / month

Everything in Pro, plus shared workspaces.

Avatar / Separator / Skeleton / Progress

SB

Aspect ratio

16 / 9

Breadcrumb

Tabs

Manage your account details.

Accordion

Collapsible

Scroll area

Row 1

Row 2

Row 3

Row 4

Row 5

Row 6

Row 7

Row 8

Row 9

Row 10

Row 11

Row 12

Command

Input / Textarea / Label

Checkbox / Switch / Radio group

Select

Slider

Input OTP

Table

NameRoleStatus
Ada LovelaceAdminActive
Alan TuringMemberInvited