# Youj components

> Youj: Accessible components, animated icons, illustrations and themes that move together. It is a React UI kit with accessible components on shadcn and Base UI (`@youj/react`), motion tokens, primitives, animated icons that morph between states and brand marks (`@youj/motion`, `@youj/icons`), opt-in interface sounds the components cue as they move (`@youj/sound`), themes with contrast checked against WCAG AA, isometric illustrations drawn from the theme (`@youj/illustrations`), and the same source to copy in with `npx @youj/cli add`. It needs React 19 and Tailwind CSS v4. Agents: install with `npx @youj/cli add <item>` (or the packages), never `npx shadcn add`.

Install with `npx @youj/cli add <name>` or import from the package. Full pages: https://www.youj.dev/docs/components/<name>.md, or https://www.youj.dev/llms-full.txt for everything.

## Accordion

`import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@youj/react'` Base UI accordion.

Props of `AccordionTrigger`: `headingLevel?: 2 | 3 | 4 | 5 | 6`

## Account Menu

`import { AccountMenu, AccountMenuUser, AccountMenuWorkspace } from '@youj/react'` The signed-in user's menu: an avatar that opens a DropdownMenu with a profile header, the workspaces to switch between, your own rows (profile, settings, keyboard shortcuts), a Theme submenu and Sign out.

Props of `AccountMenu`: `user: AccountMenuUser`, `workspaces?: AccountMenuWorkspace[]`, `workspace?: string`, `theme?: string`, `colorMode?: 'system' | 'light' | 'dark'`, `align?: 'end' | 'start' | 'center'`

## Action Island

`import { ActionIsland, ActionIslandGroup, ActionIslandMark, ActionIslandSeparator, ActionIslandTile } from '@youj/react'` A floating tray of actions over a canvas.

Props of `ActionIsland`: `size?: 'default' | 'lg'`

## Action List

`import { ActionList, ActionListItem } from '@youj/react'` Things to act on, one per row: an icon tile in the row’s `tone`, a title and one line of `detail`, an optional `meta` chip (the date, amount or state that makes it urgent, in `metaTone`) and the row’s own `action`.

Props of `ActionList`: `title?: ReactNode`, `description?: ReactNode`, `count?: number`, `action?: ReactNode`, `headingLevel?: 2 | 3 | 4 | 5 | 6`

## Activity Rings

`import { ActivityRing, ActivityRings } from '@youj/react'` Goals side by side as concentric rings: a day’s move, exercise and stand, a team’s quotas, a quarter’s key results.

Props of `ActivityRings`: `rings: readonly ActivityRing[]`, `size?: Extract<Size, 'sm' | 'default' | 'lg' | 'xl'>`, `legend?: 'side' | 'below' | false`, `format?: Intl.NumberFormatOptions`, `inView?: InView`, `sound?: boolean`

## Alert

`import { Alert, AlertAction, AlertDescription, AlertTitle } from '@youj/react'` A status message in four severities.

Props of `Alert`: `variant?: AlertVariant | null`, `icon?: ReactNode | false`, `dismissible?: boolean`, `open?: boolean`, `defaultOpen?: boolean`, `dismissLabel?: string`

## Alert Dialog

`import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogMedia, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, ConfirmDialog } from '@youj/react'` Base UI alert dialog: it asks before something happens.

Props of `AlertDialogAction`: `variant?: 'default' | 'danger' | 'ghost' | 'outline' | 'link' | 'secondary'`, `sound?: boolean`, `size?: 'default' | 'sm' | 'lg' | 'xs' | 'icon' | 'icon-xs' | 'icon-sm' | 'icon-lg'`

## Allocation Meter

`import { AllocationMeter, Envelope } from '@youj/react'` Budget envelopes as a rack of cells, one column each, draining from the top as money goes.

Props of `AllocationMeter`: `envelopes: Envelope[]`, `step?: number`, `segments?: number`, `format?: Intl.NumberFormatOptions`, `locale?: string`, `label?: string`

## Anchor Nav

`import { AnchorNav, AnchorNavItem } from '@youj/react'` A table of contents that follows the reader.

Props of `AnchorNav`: `items: AnchorNavItem[]`, `title?: ReactNode`, `scrollContainer?: RefObject<HTMLElement | null>`, `offset?: number`

## Annotated Image

`import { AnnotatedImage, ImageAnnotation } from '@youj/react'` A picture with numbered callouts joined by leader lines to labels in the gutters beside it.

Props of `AnnotatedImage`: `annotations: ImageAnnotation[]`, `src?: string`, `alt?: string`, `media?: ReactNode`, `caption?: ReactNode`, `value?: string | null`

## App Header

`import { AppHeader, AppHeaderActions, AppHeaderBrand, AppHeaderMenu, AppHeaderMenuLink, AppHeaderNav, AppHeaderSearch } from '@youj/react'` The app's top bar (a navbar): brand, primary navigation (plain links or a MegaMenu), a search trigger for the command palette, actions and the account menu.

Props of `AppHeader`: `sticky?: boolean`, `condense?: boolean`, `scrollContainer?: RefObject<HTMLElement | null>`

## App Page

`import { AppPage } from '@youj/react'` A page inside an app’s frame: the title, a line under it and the actions at the end, over the page’s sections on one gutter, so every page of the app starts at the same place.

Props of `AppPage`: `title?: ReactNode`, `description?: ReactNode`, `actions?: ReactNode`, `headingLevel?: 1 | 2 | 3`, `width?: 'page' | 'fill' | 'readable'`, `classNames?: Partial<Record<'header' | 'body', string>>`

## Aspect Ratio

`import { AspectRatio } from '@youj/react'` A box that keeps its shape as its width changes: the CSS aspect-ratio property, with the ratio as a number (16 / 9).

Props of `AspectRatio`: `ratio: number`

## Async Button

`import { AsyncButton } from '@youj/react'` A Button that runs async work on press and shows its whole lifecycle in place.

Props of `AsyncButton`: `variant?: 'default' | 'danger' | 'ghost' | 'outline' | 'link' | 'secondary'`, `size?: 'default' | 'sm' | 'lg' | 'xs' | 'icon' | 'icon-xs' | 'icon-sm' | 'icon-lg'`, `sound?: boolean`, `pendingLabel?: string`, `successLabel?: string | ((result: TResult) => string)`, `errorLabel?: string | ((error: unknown) => string)`

## Audio Recorder

`import { AudioRecorder, AudioRecordingInfo } from '@youj/react'` Record a voice note or an audio clip, listen back, then keep it or not.

Props of `AudioRecorder`: `maxDuration?: number`, `mimeType?: string`, `disabled?: boolean`, `size?: Extract<Size, 'sm' | 'default'>`, `value?: Blob | string | null`, `saved?: boolean`

## Avatar

`import { Avatar, AvatarBadge, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarImage } from '@youj/react'` Base UI avatar: the fallback shows until the image has actually loaded, and stays if it fails, so there is never a broken-image frame.

Props of `Avatar`: `size?: 'sm' | 'default' | 'lg'`

## Avatar Stack

`import { AvatarStack, AvatarStackUser } from '@youj/react'` Who is here: overlapping avatars (the Avatar primitives), the first `max` shown and the rest behind a "+N" that opens the full list in a Popover, with each person's role and status.

Props of `AvatarStack`: `users: readonly AvatarStackUser[]`, `max?: number`, `size?: 'sm' | 'default' | 'lg'`, `label?: string`

## Avatar Upload

`import { AvatarUpload } from '@youj/react'` A profile photo you can replace.

Props of `AvatarUpload`: `src?: string | null`, `fallback?: ReactNode`, `name?: string`, `onSave: (file: File) => unknown`, `accept?: string`, `maxSize?: number`

## Badge

`import { Badge, BadgeDot, BadgeRemove } from '@youj/react'` A 20px pill in 12px medium type.

Props of `Badge`: `variant?: 'default' | 'neutral' | 'success' | 'warning' | 'danger' | 'solid' | 'outline' | 'secondary'`, `size?: 'default' | 'sm' | 'lg'`, `color?: string`

## Banner

`import { Banner, BannerAction, BannerTitle } from '@youj/react'` An announcement bar across the top of a page or app: a launch, a maintenance window, a trial running out.

Props of `Banner`: `icon?: ReactNode`, `dismissible?: boolean`, `open?: boolean`, `defaultOpen?: boolean`, `dismissLabel?: string`, `variant?: 'default' | 'accent' | 'warning' | 'inverse'`

## Bottom Tab Bar

`import { BottomTabBar, BottomTabBarItem } from '@youj/react'` A phone app's primary navigation, pinned to the bottom edge and padded by the safe-area inset.

Props of `BottomTabBarItem`: `icon: ReactNode`, `label: ReactNode`, `active?: boolean`, `badge?: number | boolean`, `badgeLabel?: string`

## Breadcrumb

`import { Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator } from '@youj/react'` shadcn's breadcrumb in youj's type: a named `nav` around an ordered list, 13px muted crumbs, the current page in full ink (plain text with aria-current="page", not a link to itself), slanted hairline separators hidden from assistive tech.

Props of `BreadcrumbList`: `maxItems?: number`, `itemsBeforeCollapse?: number`, `itemsAfterCollapse?: number`

## Breakdown List

`import { BreakdownItem, BreakdownList } from '@youj/react'` How a total splits, as rows of a color marker, a name (with an optional line of `detail`), a value and its share of the total.

Props of `BreakdownList`: `items: readonly BreakdownItem[]`, `total?: number`, `format?: Intl.NumberFormatOptions`, `locale?: string`, `variant?: 'rows' | 'tiles'`, `marker?: 'swatch' | 'bar'`

## Button

`import { Button } from '@youj/react'` Base UI button in six variants and eight sizes on the control-height scale (24/28/32/40px, +8px on touch).

Props of `Button`: `variant?: 'default' | 'danger' | 'ghost' | 'outline' | 'link' | 'secondary'`, `loading?: boolean`, `loadingLabel?: string`, `sound?: boolean`, `size?: 'default' | 'sm' | 'lg' | 'xs' | 'icon' | 'icon-xs' | 'icon-sm' | 'icon-lg'`

## Button Group

`import { ButtonGroup, ButtonGroupSeparator, ButtonGroupText } from '@youj/react'` shadcn’s button group: buttons, inputs and menus joined into one strip (role="group").

Props of `ButtonGroup`: `orientation?: 'horizontal' | 'vertical'`

## Calendar

`import { Calendar, CalendarDayButton } from '@youj/react/date'` A month grid on react-day-picker whose days and arrows are the library’s Button, so hover, press and focus match every other control.

## Calendar Heatmap

`import { CalendarHeatmap, StreakCheck, StreakDay, StreakStats, StreakSummary } from '@youj/react'` A habit’s days as heat dots: a column per week, a row per weekday, the newest week at the inline end (mirrored in RTL).

Props of `CalendarHeatmap`: `days: StreakDay[]`, `today?: string`, `weeks?: number`, `max?: number`, `tone?: 'accent' | 'success' | 'warning' | 'chart-1' | 'chart-2' | 'chart-3' | 'chart-4' | 'chart-5'`, `size?: 'default' | 'sm'`

## Capsule

`import { Capsule, CapsuleLabel } from '@youj/react'` The shell every capsule shares: one row of controls or figures on a floating surface, the control height plus an inset that keeps the discs inside concentric with its ends.

Props of `Capsule`: `size?: 'sm' | 'default'`

## Capsule Player

`import { CapsulePlayer } from '@youj/react'` Now playing, in one capsule: cover art in a disc, the title and artist, a thin rail you can seek (a Base UI slider: arrows step five seconds, Home/End jump; spoken as “1:12 of 3:40”), the time played in mono, and previous, play and next.

Props of `CapsulePlayer`: `title: string`, `subtitle?: string`, `artwork?: ReactNode`, `playing: boolean`, `onPlayingChange: (playing: boolean) => void`, `position: number`

## Capsule Search

`import { CapsuleSearch } from '@youj/react'` A search that waits as a small capsule with its shortcut on it and opens when it’s wanted.

Props of `CapsuleSearch`: `value?: string`, `defaultValue?: string`, `shortcut?: string`, `width?: { rest: string; open: string }`, `size?: 'sm' | 'default'`

## Capsule Stepper

`import { CapsuleStepper } from '@youj/react'` − value + in a capsule, for a number you nudge more than type.

Props of `CapsuleStepper`: `value?: number | null`, `defaultValue?: number | null`, `min?: number`, `max?: number`, `step?: number`, `largeStep?: number`

## Capsule Toggle

`import { CapsuleToggle, CapsuleToggleOption } from '@youj/react'` Two or three options in a capsule: a SegmentedControl whose track is the capsule itself, so the lit key glides inside the floating pill (motion’s SlidingIndicator on the smooth spring, retargeting mid-glide; it jumps under reduced motion).

Props of `CapsuleToggle`: `options: readonly CapsuleToggleOption[]`, `label?: string`, `iconOnly?: boolean`, `size?: 'sm' | 'default'`, `variant?: 'underline' | 'pill'`, `defaultValue?: string`

## Card

`import { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@youj/react'` shadcn's card on youj surfaces: a hairline-bordered panel with a header (title, description, and an action slot beside them), content and a recessed footer.

Props of `Card`: `size?: 'default' | 'sm'`, `variant?: 'default' | 'inset' | 'panel'`, `lift?: boolean`, `spotlight?: boolean`

## Carousel

`import { Carousel, CarouselAutoplayToggle, CarouselCaption, CarouselContent, CarouselDots, CarouselItem, CarouselNext, CarouselPrevious, CarouselThumb, CarouselThumbs } from '@youj/react/carousel'` shadcn's carousel on Embla: swipe, drag and flick, looping, and responsive slides per view (a basis on each item).

Props of `Carousel`: `opts?: CarouselOptions`, `plugins?: CarouselPlugin`, `orientation?: 'horizontal' | 'vertical'`, `setApi?: (api: CarouselApi) => void`, `autoplay?: boolean | number`

## Cell Bar

`import { CellBar, CellBarCell } from '@youj/react'` A total built from its periods: a cell per month, each as wide as its amount, solid when settled and hatched when projected.

Props of `CellBar`: `cells: readonly CellBarCell[]`, `max?: number`, `target?: number`, `targetLabel?: string`, `tone?: 'accent' | 'neutral' | 'success' | 'warning' | 'danger' | 'chart-1' | 'chart-2' | 'chart-3' | 'chart-4' | 'chart-5'`, `captions?: boolean`

## Chart

`import { ChartContainer, ChartDataTable, ChartLegend, ChartLegendContent, ChartMotion, ChartTooltip, ChartTooltipContent } from '@youj/react/chart'` shadcn's chart on Recharts, colored by the theme and timed by youj.

Props of `ChartContainer`: `config: ChartConfig`, `children: string | number | bigint | boolean | ReactElement<unknown, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | Promise<AwaitedReactNode>`, `title?: string`, `summary?: ReactNode`, `initialDimension?: { width: number; height: number }`

## Chat

`import { ChatCitation, ChatSource, ChatSources } from '@youj/react'` Composable parts for AI chat and assistant interfaces: a message list that stays with a streaming answer, messages with actions, streamed markdown, a composer, thinking and reasoning, tool calls, citations, suggestions and an empty state.

Props of `ChatCitation`: `index: number`, `source: ChatSource`, `defaultOpen?: boolean`

## Checkbox

`import { Checkbox, CheckboxMark } from '@youj/react'` Base UI checkbox.

Props of `Checkbox`: `sound?: boolean`

## Choice Card

`import { ChoiceCard, ChoiceCardGroup } from '@youj/react'` A selectable card: icon, title, description and its control, with the whole card as the target.

Props of `ChoiceCard`: `value?: string`, `control?: 'radio' | 'checkbox' | 'switch'`, `checked?: boolean`, `defaultChecked?: boolean`, `title: ReactNode`, `description?: ReactNode`

## Code Block

`import { CodeBlock, CodeTokens } from '@youj/react'` A block of code on a recessed panel: a header with the file name or language and a copy button, then the code, highlighted as tokens (never HTML) and scrolling sideways instead of wrapping.

Props of `CodeBlock`: `code: string`, `language?: string`, `filename?: string`, `lineNumbers?: boolean`, `copyLabel?: string`, `actions?: ReactNode`

## Collapsible

`import { Collapsible, CollapsibleChevron, CollapsibleContent, CollapsibleTrigger } from '@youj/react'` Base UI collapsible: a trigger with aria-expanded / aria-controls and a panel that wears motion's yj-collapse preset (height to the measured size, then auto, with the content fading; a reversal mid-way continues from where it is).

Props of `CollapsibleChevron`: `size?: number`

## Color Opacity Field

`import { ColorOpacityField, ColorOpacityValue } from '@youj/react'` A color and its opacity as one grouped control: a swatch that opens the Color Picker, a hex field that reads 3, 4, 6 or 8 digits (pasted or typed), and an opacity percentage you can drag.

Props of `ColorOpacityField`: `value?: ColorOpacityValue`, `defaultValue?: ColorOpacityValue`, `size?: 'sm' | 'default'`, `disabled?: boolean`, `id?: string`

## Color Picker

`import { ColorPicker, Swatch } from '@youj/react'` A color picked in a Popover: a saturation/brightness area, a hue Slider on a spectrum, hex and OKLCH fields, swatches (the theme presets’ accents by default) and the browser’s eyedropper where it exists.

Props of `ColorPicker`: `value?: string`, `defaultValue?: string`, `format?: 'hex' | 'oklch'`, `swatches?: Swatch[]`, `disabled?: boolean`, `id?: string`

## Combobox

`import { Combobox, ComboboxOption } from '@youj/react/command'` A single-select picker with search, composed from Popover and Command: the popup grows out of the trigger on yj-pop, the active row glides, the list eases its height, and the chosen row draws its check.

Props of `Combobox`: `options: ComboboxOption[]`, `value?: string | null`, `defaultValue?: string | null`, `placeholder?: string`, `searchPlaceholder?: string`, `emptyMessage?: ReactNode`

## Command

`import { Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandLoading, CommandSeparator, CommandShortcut, ListOption, OptionNote } from '@youj/react/command'` cmdk, re-skinned: a flush search row over a list.

Props of `CommandDialog`: `title?: string`, `description?: string`, `showCloseButton?: boolean`, `presentation?: 'auto' | 'sheet' | 'popover'`, `autoFocusField?: boolean`, `children: ReactNode`

## Command Palette

`import { CommandPalette, CommandPalettePage, CommandPaletteState } from '@youj/react/command'` A ⌘K palette on CommandDialog: groups, nested pages with a breadcrumb back stack (Backspace on an empty search or Escape steps back; the last Escape closes), recent items, results loaded as you type, and a footer that spells out the keys.

Props of `CommandPalette`: `open?: boolean`, `defaultOpen?: boolean`, `shortcut?: string | false`, `placeholder?: string`, `title?: string`, `description?: string`

## Context Menu

`import { ContextMenu, ContextMenuContent, ContextMenuTrigger } from '@youj/react'` Base UI context menu: right click, long press, or the Menu key / Shift+F10 on a focused row.

Props of `ContextMenuContent`: `container?: HTMLElement | ShadowRoot | RefObject<HTMLElement | ShadowRoot | null>`, `presentation?: 'auto' | 'sheet' | 'popover'`

## Contribution List

`import { ContributionEnd, ContributionList, ContributionStep } from '@youj/react'` A waterfall told as a list: the `baseline` row, each thing that moved the figure as a signed step (`items`: an icon, a label, a line of `detail`, +n or −n), and the `total` row, highlighted.

Props of `ContributionList`: `baseline: ContributionEnd & { value: number }`, `items: readonly ContributionStep[]`, `total: ContributionEnd`, `format?: Intl.NumberFormatOptions`, `locale?: string`, `invert?: boolean`

## Countdown

`import { Countdown, CountdownTime } from '@youj/react'` Days, hours, minutes and seconds to a moment, in tabular figures under their unit names.

Props of `Countdown`: `to: Date | number | string`, `formatLabel?: (time: CountdownTime) => string`, `locale?: string`, `labels?: Partial<Record<'days' | 'hours' | 'minutes' | 'seconds', ReactNode>>`, `paused?: boolean`

## Coverage Matrix

`import { CoverageMatrix, CoverageMatrixColumn, CoverageMatrixRow } from '@youj/react'` How well each row is covered by each column: every cell fills from the bottom by depth in its column’s color, and a cell with nothing is hatched.

Props of `CoverageMatrix`: `rows: readonly CoverageMatrixRow[]`, `columns: readonly CoverageMatrixColumn[]`, `max?: number`, `value?: string | null`, `defaultValue?: string | null`, `formatValue?: (value: number) => string`

## Currency Swap

`import { CurrencySwap, CurrencySwapAsset, CurrencySwapSubmit } from '@youj/react'` A converter card: what you pay (an amount field and its currency) over what you receive (the converted amount, rolling digit by digit), each with its value below, a round button that flips the two sides, the rate and the primary action.

Props of `CurrencySwap`: `assets: CurrencySwapAsset[]`, `from?: string`, `defaultFrom?: string`, `to?: string`, `defaultTo?: string`, `amount?: number | null`

## Data Table

`import { DataTableColumnHeader } from '@youj/react/data-table'` The parts a data table on TanStack Table v9 is built from: a column header that sorts, pins, moves, hides and resizes its column, a toolbar with a search, filters with counts and their chips, the columns menu, pagination, a checkbox column and the bar a selection raises.

Props of `DataTableColumnHeader`: `header: Header<DataTableFeatures, TData, unknown>`, `align?: 'start' | 'center' | 'end'`, `menu?: boolean`, `menuOpen?: boolean`, `showSortIndex?: boolean`, `resizable?: boolean`

## Date Picker

`import { DatePicker } from '@youj/react/date'` A date you can type or pick: an InputGroup field in the locale’s short format (a complete date selects as you type; it also reads “Sep 27, 2026”, ISO and today/tomorrow) and a calendar button that opens the Calendar in a Popover (yj-pop, then the month slide).

Props of `DatePicker`: `value?: Date | null`, `defaultValue?: Date | null`, `locale?: Locale`, `minDate?: Date`, `maxDate?: Date`, `disabledDates?: Matcher | Matcher[]`

## Date Range Picker

`import { DateRangePicker, DateRangePreset } from '@youj/react/date'` A span of days: two typed fields (start – end) under one label, and a Popover with presets beside a two-month range Calendar (one month and a row of presets on phones).

Props of `DateRangePicker`: `value?: DateRange | null`, `defaultValue?: DateRange | null`, `presets?: false | DateRangePreset[]`, `locale?: Locale`, `minDate?: Date`, `maxDate?: Date`

## Day Rail

`import { DayRail, ItineraryDay, ItineraryLeg, ItineraryStay, ItineraryStop } from '@youj/react'` A trip on one rail, a column per day.

Props of `DayRail`: `stops: ItineraryStop[]`, `legs: ItineraryLeg[]`, `stays?: ItineraryStay[]`, `start: Date | number`, `days?: number`, `now?: Date | number | null`

## Day Ring

`import { DayRing, ScheduleJob, ScheduleOverlap } from '@youj/react'` A day of scheduled runs on a 24-hour dial (`role="img"`, described in words): midnight at the top, clockwise, a quarter-hour ruler with the elapsed part of the day shaded, and one thin track per job with its runs as arcs as long as they take (ticks when they have no duration).

Props of `DayRing`: `jobs: readonly ScheduleJob[]`, `now?: Date | number`, `timeZone?: string`, `highlight?: string`, `locale?: string`, `label?: string`

## Density Lanes

`import { DensityLane, DensityLanes, DensityLanesTick } from '@youj/react'` When things happen, one lane per kind: each column swells above and below the lane’s spine by its value, on one scale for every lane, over a faint grid of dots.

Props of `DensityLanes`: `lanes: readonly DensityLane[]`, `columns: readonly string[]`, `depth?: number`, `maxDot?: number`, `max?: number`, `highlight?: readonly (readonly [number, number])[]`

## Dial

`import { Dial, DialBand, DialMark } from '@youj/react'` A bounded value on a ruled arc: a three-quarter ring ticked at every step, the value as an ink knob on the band and large in mono in the middle.

Props of `Dial`: `value?: number`, `defaultValue?: number`, `min?: number`, `max?: number`, `step?: number`, `largeStep?: number`

## Dialog

`import { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger } from '@youj/react'` Base UI dialog.

Props of `Dialog`: `sound?: boolean`

## Diff Bar

`import { DiffBar } from '@youj/react'` Two values of one measure, A against B, as a diverging bar: each side grows out from a shared center toward its own end, in cells, with the values in mono at the outer ends.

Props of `DiffBar`: `a: number`, `b: number`, `max?: number`, `better?: 'higher' | 'lower'`, `label?: ReactNode`, `names?: [string, string]`

## Diff Viewer

`import { DiffViewer } from '@youj/react'` The difference between two versions of a file, as code review reads it.

Props of `DiffViewer`: `before?: string`, `after?: string`, `patch?: string`, `language?: string`, `filename?: string`, `view?: 'unified' | 'split'`

## Distribution Strip

`import { DistributionStrip } from '@youj/react'` How sampled requests spread across latency: every sample is a dot on a log-scaled strip, stacked into rows where they crowd, with the percentiles (p50, p90 and p99 by default) as flagged hairlines and the objective as a dashed line; past it the strip is hatched and its dots take the warning tone.

Props of `DistributionStrip`: `samples: readonly number[]`, `slo?: number`, `percentiles?: readonly number[]`, `domain?: readonly [number, number]`, `rows?: number`, `format?: (ms: number) => string`

## Dot Map

`import { DotMap, DotMapRegion } from '@youj/react'` The world as a grid of dots, lit where the numbers are: each region lights the land dots around it like LEDs, the reach and strength growing with its share of the largest value, under a soft halo in its tone (the accent unless it sets one).

Props of `DotMap`: `regions?: readonly DotMapRegion[]`, `active?: string | null`, `defaultActive?: string | null`, `formatValue?: (value: number) => string`, `label?: string`

## Drawer

`import { Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerTitle, DrawerTrigger } from '@youj/react'` Base UI drawer: a modal panel on an edge that follows the finger and dismisses when swiped towards that edge (drag the handle with a mouse).

Props of `Drawer`: `swipeDirection?: DrawerDirection | 'start' | 'end'`

## Dropdown Menu

`import { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, MenuPopup } from '@youj/react'` Base UI menu.

Props of `DropdownMenuCheckboxItem`: `inset?: boolean`

## Empty

`import { Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle } from '@youj/react'` An empty state: what isn't here yet, why, and what to do next.

Props of `EmptyMedia`: `variant?: 'default' | 'icon'`

## Export Dialog

`import { ExportDialog, ExportDialogValue, ExportOption, ExportRequest, ExportResult, ExportSummary } from '@youj/react/date'` Choose what leaves and in which shape, then export it.

Props of `ExportDialog`: `open?: boolean`, `defaultOpen?: boolean`, `trigger?: ReactElement`, `title?: ReactNode`, `description?: ReactNode`, `presets?: ('today' | 'yesterday' | 'last7Days' | 'last30Days' | 'thisMonth' | 'lastMonth' | 'yearToDate')[]`

## Field

`import { Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle } from '@youj/react'` Field is Base UI's Field.Root with shadcn's layout parts.

Props of `Field`: `required?: boolean`, `orientation?: 'horizontal' | 'vertical' | 'responsive'`

## File Upload

`import { FileRejection, FileUpload, UploadContext, UploadFile, UseFileUploadOptions } from '@youj/react'` Files in, with the whole lifecycle shown.

Props of `FileUpload`: `variant?: 'list' | 'gallery'`, `multiple?: boolean`, `disabled?: boolean`, `title?: ReactNode`, `hint?: ReactNode`, `accept?: string`

## Filter Builder

`import { FilterBuilder } from '@youj/react'` Builds a query of AND/OR groups of typed rules, such as “Stage is not Lost and (Owner is Ada or Amount > 100000)”.

Props of `FilterBuilder`: `fields: FilterField[]`, `value?: FilterGroup`, `defaultValue?: FilterGroup`, `maxDepth?: number`, `summary?: boolean`, `disabled?: boolean`

## Filter Chips

`import { FilterChips } from '@youj/react'` A filter query as chips (`label:bug`, `priority:in(p1,p2)`) with a field for the next one, in a filled well.

Props of `FilterChips`: `value?: string[]`, `defaultValue?: string[]`, `validate?: (token: string, tokens: string[]) => string | null | undefined | void`, `placeholder?: string`, `disabled?: boolean`, `name?: string`

## Flow Graph

`import { FlowEdge, FlowGraph, FlowLayout, FlowLayoutNode, FlowNode } from '@youj/react'` A graph of steps that lays itself out along the flow, showing each step’s state.

Props of `FlowGraph`: `nodes: readonly FlowNode[]`, `edges: readonly FlowEdge[]`, `value?: string | null`, `defaultValue?: string | null`, `controls?: string`, `orientation?: FlowOrientation | 'auto'`

## Flow Lanes

`import { FlowLane, FlowLanes } from '@youj/react'` Where a stream goes: one source fans out to a lane per destination, each ending beside its name and rate.

Props of `FlowLanes`: `source: string`, `lanes: readonly FlowLane[]`, `active?: string | null`, `defaultActive?: string | null`, `paused?: boolean`, `formatValue?: (value: number) => string`

## Forecast Band

`import { ForecastBand, ForecastPoint, ForecastScenario } from '@youj/react'` Where a running total will land against a budget.

Props of `ForecastBand`: `actual: readonly number[]`, `forecast: readonly ForecastPoint[]`, `budget: number`, `start?: Date | string`, `max?: number`, `format?: Intl.NumberFormatOptions`

## Form

`import { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, FormSelect, FormSelectOption, FormSubmit } from '@youj/react/form'` react-hook-form (with any resolver, zod here) wired into Field and AsyncButton, with shadcn’s part names (FormField, FormItem, FormLabel, FormControl, FormDescription, FormMessage).

Props of `Form`: `form: UseFormReturn<T, Context, Output>`, `onSubmit: (values: Output) => unknown`

## Gauge

`import { Gauge, GaugeThreshold } from '@youj/react'` One bounded score at a glance: a thin half-ring on a scale of ticks, read left to right, the value in its bowl and a word for its band underneath, between the range’s ends (`role="meter"`).

Props of `Gauge`: `value: number`, `min?: number`, `max?: number`, `size?: Extract<Size, 'sm' | 'default' | 'lg'>`, `tone?: 'accent' | 'success' | 'warning' | 'danger' | 'neutral'`, `thresholds?: GaugeThreshold[]`

## Gradient Slider

`import { GradientSlider, GradientSliderZone } from '@youj/react'` A value on a spectrum.

Props of `GradientSlider`: `style?: CSSProperties`, `value?: number`, `defaultValue?: number`, `label?: ReactNode`, `zones?: GradientSliderZone[]`, `tone?: 'spectrum' | 'accent' | 'status'`

## Hatched Bar

`import { Hatch, HatchedBar } from '@youj/react'` Solid for what is settled, hatched for what isn’t: a baseline, a pending or projected amount, a run that missed its gate.

Props of `HatchedBar`: `value: number`, `max?: number`, `fill?: 'hatched' | 'solid'`, `orientation?: 'vertical' | 'horizontal'`, `tone?: 'accent' | 'neutral' | 'success' | 'warning' | 'danger' | 'chart-1' | 'chart-2' | 'chart-3' | 'chart-4' | 'chart-5'`, `label?: string`

## Hierarchy Chart

`import { HierarchyChart, HierarchyChartHandle } from '@youj/react'` A hierarchy drawn as a tidy tree (Reingold–Tilford): an org chart, a team of teams, any parent-and-children structure.

Props of `HierarchyChart`: `nodes: T | readonly T[]`, `renderNode?: (node: T, state: HierarchyNodeState) => ReactNode`, `orientation?: 'vertical' | 'horizontal'`, `expanded?: string[]`, `defaultExpanded?: string[]`, `selected?: string | null`

## Histogram Range

`import { HistogramRange } from '@youj/react'` A two-thumb range over the distribution it filters.

Props of `HistogramRange`: `data?: readonly number[]`, `bins?: readonly number[]`, `binCount?: number`, `min?: number`, `max?: number`, `step?: number`

## History Strip

`import { HistoryStrip, UptimeDay } from '@youj/react'` Availability a day at a time: one slim cell per day, oldest at the inline start and today at the end (mirrored in RTL).

Props of `HistoryStrip`: `days: readonly UptimeDay[]`, `target?: number`, `critical?: number`, `size?: 'default' | 'sm'`, `interactive?: boolean`, `label?: string`

## Hours Dial

`import { HoursDial, HoursDialValue } from '@youj/react'` A stretch of the day on a 24-hour face: midnight at the top, a ruler of quarter-hour ticks all the way round, and two handles on it, a hollow start and a solid end.

Props of `HoursDial`: `value?: HoursDialValue`, `defaultValue?: HoursDialValue`, `step?: number`, `largeStep?: number`, `tone?: 'accent' | 'neutral' | 'chart-1' | 'chart-2' | 'chart-3' | 'chart-4' | 'chart-5'`, `locale?: string`

## Hover Card

`import { HoverCard, HoverCardContent, HoverCardTrigger } from '@youj/react'` Base UI preview card: a preview of where a link goes, after resting on it (500ms) or focusing it.

## Image Accordion

`import { ImageAccordion, ImageAccordionItem } from '@youj/react'` A row or column of pictures where one is open wide and the rest wait as slim strips.

Props of `ImageAccordion`: `items: ImageAccordionItem[]`, `value?: string`, `defaultValue?: string`, `activation?: 'hover' | 'click'`, `orientation?: 'horizontal' | 'vertical'`, `sound?: boolean`

## Image Compare

`import { ImageCompare, ImageCompareImage } from '@youj/react'` Two pictures stacked with a divider between them: `before` shows on the start side (or the top) up to the divider, `after` past it.

Props of `ImageCompare`: `before: ImageCompareSide`, `after: ImageCompareSide`, `value?: number`, `defaultValue?: number`, `orientation?: 'horizontal' | 'vertical'`, `beforeLabel?: ReactNode`

## Import Mapper

`import { ImportMapper } from '@youj/react'` Bring a CSV into an app in two screens: drop a file, then see each column with the field it goes to, fix only the rows with problems and say what happens to duplicates, and import with a button that states what will happen.

Props of `ImportMapper`: `theme?: ThemeInput`, `embedded?: boolean`, `variant?: 'page' | 'dialog'`, `fill?: boolean`, `headingLevel?: 1 | 2 | 3`, `copy?: Partial<ImportMapperCopy>`

## Inline Confirm

`import { InlineConfirm } from '@youj/react'` A button that confirms in its own place instead of opening a dialog.

Props of `InlineConfirm`: `children: ReactNode`, `onConfirm: () => unknown`, `prompt?: string`, `confirmLabel?: string`, `cancelLabel?: string`, `pendingLabel?: string`

## Input

`import { Input } from '@youj/react'` Base UI input (a field control, so inside a Field it is labeled, described and validated automatically). 32px on the control scale, 13px text (16px on touch so iOS never zooms).

## Input Group

`import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea } from '@youj/react'` One bordered frame around a bare text control and its addons (text, icons, keycaps, buttons) on the inline or block edges.

Props of `InputGroupAddon`: `align?: 'inline-end' | 'inline-start' | 'block-start' | 'block-end'`

## Input OTP

`import { InputOTP, InputOTPResend } from '@youj/react'` A one-time code field for 2FA and email verification.

Props of `InputOTP`: `length?: number`, `value?: string`, `defaultValue?: string`, `autoSubmit?: boolean`, `mode?: 'numeric' | 'alphanumeric'`, `groups?: number[]`

## Inspector Panel

`import { InspectorPanel, InspectorPanelType, InspectorRow } from '@youj/react'` One property group of a design tool’s side panel.

Props of `InspectorPanel`: `title: string`, `enabled?: boolean`, `types?: InspectorPanelType[]`, `type?: string`, `visible?: boolean`, `actions?: ReactNode`

## Item Pager

`import { ItemPager } from '@youj/react'` Steps through the records of a list from a detail panel: ↓ opens the next row, ↑ the previous one, and "5 of 48" says where you are.

Props of `ItemPager`: `index: number`, `total: number`, `onIndexChange: (index: number) => void`, `shortcuts?: 'focus' | 'global' | 'none'`, `locale?: string`

## Kanban

`import { Kanban, KanbanColumn, KanbanLane } from '@youj/react'` A kanban board composed from Card, Badge, Button, Input and ContextMenu.

Props of `Kanban`: `columns: KanbanColumn[]`, `cards: C[]`, `lanes?: KanbanLane[]`, `hideEmptyLanes?: boolean`, `renderCard: (card: C, state: { lifted: boolean; selected: boolean }) => ReactNode`, `selectedIds?: ReadonlyArray<string>`

## Kbd

`import { Kbd, KbdGroup } from '@youj/react'` A keycap: a recessed tint with a hairline and a 1px bottom edge for depth, in 11px medium type on a 20px square minimum.

## Label

`import { Label } from '@youj/react'` A plain `<label>` for use outside a Field (inside one, use FieldLabel, which wires itself).

Props of `Label`: `required?: boolean`

## Lane Meter

`import { Lane, LaneItem, LaneMeter } from '@youj/react'` Load across the lanes of a queue or a pipeline as stacked rows of countable cells that share one grid, so lanes compare at a glance: a label, the cells, the value (with a lane’s own capacity muted, “24 / 32”) and an optional action.

Props of `LaneMeter`: `lanes: readonly Lane[]`, `max?: number`, `segments?: number`, `itemActionLabel?: string`, `format?: Intl.NumberFormatOptions`, `locale?: string`

## Level Matrix

`import { LevelMatrix, PermissionChange, PermissionResource, PermissionRole } from '@youj/react'` Roles by resources, each cell an access level (none, read, write, admin) drawn as three segments lit to it.

Props of `LevelMatrix`: `roles: readonly PermissionRole[]`, `resources: readonly PermissionResource[]`, `value?: PermissionValue`, `defaultValue?: PermissionValue`, `baseline?: PermissionValue`, `label?: string`

## Limit Meter

`import { AllowanceMarker, LimitMeter } from '@youj/react'` A budget read like an instrument (`role="meter"`): what is left, large, with its decimals quiet; the spent and the limit as a quiet readout under it; and a ruler of minor and major ticks from zero to the limit, with an index caret under it at the spend and named lines for policies such as a freeze.

Props of `LimitMeter`: `spent: number`, `limit: number`, `markers?: AllowanceMarker[]`, `format?: Intl.NumberFormatOptions`, `formatValue?: (value: number) => string`, `locale?: string`

## Live Cursors

`import { LiveCursorPosition, LiveCursorRect, LiveCursors, LiveCursorsInputOptions, LiveCursorUser, PresenceAvatars } from '@youj/react'` Multiplayer presence for a collaborative surface.

Props of `LiveCursors`: `users: readonly LiveCursorUser[]`, `following?: string | null`, `idleAfter?: number`, `announce?: boolean`, `locale?: string`

## Lollipop Chart

`import { LollipopChart, LollipopDatum } from '@youj/react'` Many items on one value scale, each a dot on a stem from a baseline, in its tone.

Props of `LollipopChart`: `data: readonly LollipopDatum[]`, `sort?: 'ascending' | 'descending'`, `value?: string | null`, `defaultValue?: string | null`, `domain?: readonly [number, number]`, `baseline?: number`

## Mega Menu

`import { MegaMenuContent, MegaMenuFeatured, MegaMenuGroup, MegaMenuLink } from '@youj/react'` Multi-column panels for a NavigationMenu: groups of links with an icon tile, a title and a line of description, and an optional featured card at the inline end.

Props of `MegaMenuContent`: `featured?: ReactNode`

## Menubar

`import { Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger } from '@youj/react'` A desktop-app menu bar on Base UI Menubar.

Props of `MenubarCheckboxItem`: `inset?: boolean`

## Milestone Ruler

`import { Milestone, MilestoneRuler } from '@youj/react'` A year (or any span of days) as a ruler of fine ticks, each milestone a pin standing on it: taller when major, solid when done, hollow when upcoming, in the warning tone when at risk.

Props of `MilestoneRuler`: `milestones: readonly Milestone[]`, `start?: MilestoneDate`, `end?: MilestoneDate`, `today?: MilestoneDate`, `value?: string | null`, `defaultValue?: string | null`

## Multi Language Input

`import { MultiLanguageInput } from '@youj/react'` One field for text in many languages, from two locales to forty: the value is `Record<locale, string>` and the control edits one locale at a time, named “Title, German” and marked with its `lang` and `dir`.

Props of `MultiLanguageInput`: `locales?: LocaleInput[]`, `sourceLocale?: string`, `requiredLocales?: string[]`, `locale?: string`, `view?: 'single' | 'side-by-side'`, `pinned?: string[]`

## Multi Select

`import { MultiSelect, MultiSelectOption } from '@youj/react/command'` Several values from a searchable, grouped list, composed from InputGroup, Badge chips, Popover and Command checkbox rows.

Props of `MultiSelect`: `options: MultiSelectOption[]`, `value?: string[]`, `defaultValue?: string[]`, `placeholder?: string`, `searchPlaceholder?: string`, `emptyMessage?: ReactNode`

## Native Select

`import { NativeSelect, NativeSelectOptGroup, NativeSelectOption } from '@youj/react'` The browser’s own <select>, dressed as a Youj field: Input’s border, hover and focus ring, the control heights and Select’s chevron.

Props of `NativeSelect`: `size?: 'sm' | 'default' | 'lg'`

## Navigation Menu

`import { NavigationMenu, NavigationMenuContent, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuPositioner, NavigationMenuTrigger } from '@youj/react'` Base UI's navigation menu.

## Notification Center

`import { NotificationCenter, NotificationItem } from '@youj/react'` A bell with an unread count that opens your notifications: a Popover on desktop, a bottom Sheet below the md breakpoint.

Props of `NotificationCenter`: `notifications: readonly NotificationItem[]`, `open?: boolean`, `locale?: string`, `now?: Date | number`

## Number Input

`import { NumberInput } from '@youj/react'` Base UI’s NumberField as an InputGroup with − / + InputGroupButtons: Intl parsing and formatting in the locale (currency, percent, units), min/max, `step` and `largeStep` (Shift+arrows), press-and-hold on the buttons, and no wheel changes unless `allowWheelScrub`.

Props of `NumberInput`: `value?: number | null`, `defaultValue?: number | null`, `min?: number`, `max?: number`, `step?: number`, `largeStep?: number`

## Pagination

`import { Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious } from '@youj/react'` shadcn's pagination: a named `nav` of links, the current one marked aria-current="page".

Props of `PaginationLink`: `isActive?: boolean`, `disabled?: boolean`, `size?: 'default' | 'icon'`

## Password Input

`import { PasswordInput, PasswordRequirement, PasswordRequirements, PasswordStrength, PasswordStrengthResult } from '@youj/react'` A password field with a reveal toggle, a strength meter and a requirements checklist, composed inside one Field.

Props of `PasswordInput`: `visible?: boolean`, `defaultVisible?: boolean`, `autoComplete?: string`, `groupClassName?: string`

## Phone Input

`import { PhoneCountry, PhoneInput, PhoneInputChange } from '@youj/react'` A phone number in one InputGroup: a country Select (flag, calling code, typeahead by name) and the national number, formatted as you type from a per-country pattern.

Props of `PhoneInput`: `value?: string`, `defaultValue?: string`, `defaultCountry?: string`, `countries?: PhoneCountry[]`, `name?: string`, `disabled?: boolean`

## Popover

`import { Popover, PopoverClose, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger } from '@youj/react'` Base UI popover.

Props of `PopoverContent`: `container?: HTMLElement | ShadowRoot | RefObject<HTMLElement | ShadowRoot | null>`, `presentation?: 'auto' | 'sheet' | 'popover'`

## Presentation

`import { SheetHandle, SheetLayer } from '@youj/react'`

## Progress

`import { Progress, ProgressIndicator, ProgressLabel, ProgressTrack, ProgressValue } from '@youj/react'` Base UI progress (role="progressbar" with a formatted aria-valuetext).

Props of `Progress`: `tone?: 'accent' | 'neutral' | 'success' | 'warning' | 'danger'`, `variant?: 'default' | 'ticks'`, `size?: Extract<Size, 'sm' | 'default' | 'lg'>`, `ticks?: number`

## Progress List

`import { ProgressList, TransferFormat, TransferItem, TransferSummary } from '@youj/react'` File transfers in flight, one row each: a run of cells that lights as the bytes move, what has moved of the size, the live rate and time left in mono, and pause, resume and cancel per row (Retry on a failed one).

Props of `ProgressList`: `items: TransferItem[]`, `max?: number`, `segments?: number`, `locale?: string`, `label?: string`, `format?: TransferFormat`

## Progress Path

`import { ProgressPath, ProgressPathLesson, ProgressPathSection } from '@youj/react'` A course as a winding trail of lesson nodes, grouped into sections that each take a chart color and close on a trophy milestone.

Props of `ProgressPath`: `sections: ProgressPathSection[]`, `current?: string | null`, `levels?: number`, `label?: string`, `locale?: string`, `sound?: boolean`

## Property List

`import { PropertyAge, PropertyDate, PropertyList, PropertyListItem, PropertyMoney, PropertyPerson, PropertyProgress, PropertyStatus, PropertyTag, PropertyText } from '@youj/react'` A record's properties as rows of icon, label and value: a description list (`dl`, `dt`, `dd`), with a fixed label column and values that truncate.

Props of `PropertyList`: `stack?: boolean`

## Proposal Card

`import { ProposalCard, ProposalFact, ProposalOption } from '@youj/react'` A change someone (or an agent) proposes and a person decides on: where it came from, what it is, the options side by side with the proposed one as a dashed accent outline, the impact as figures, and your actions.

Props of `ProposalCard`: `source?: ReactNode`, `title: ReactNode`, `description?: ReactNode`, `options?: ProposalOption[]`, `facts?: ProposalFact[]`, `note?: ReactNode`

## Radar Chart

`import { RadarChart, RadarChartAxis, RadarChartSeries } from '@youj/react'` Several things scored on the same axes, one filled shape each, so what one has more of than another reads at a glance.

Props of `RadarChart`: `axes: readonly RadarChartAxis[]`, `series: readonly RadarChartSeries[]`, `max?: number`, `rings?: number`, `formatValue?: (value: number, axis: RadarChartAxis) => string`, `locale?: string`

## Radial Graph

`import { RadialGraph, RadialGraphCenter, RadialGraphNode } from '@youj/react'` What one thing reaches, in rings by how many hops away: each branch a wedge, each dot in its kind’s color, and a solid or dashed ring with a matching link for a node’s state, so a path shows at a glance.

Props of `RadialGraph`: `center: RadialGraphCenter`, `nodes: readonly RadialGraphNode[]`, `hops?: number`, `ringLabels?: boolean`, `label?: string`

## Radial Menu

`import { RadialMenu, RadialMenuItem } from '@youj/react'` A pie menu: a ring of actions that fans out around the pointer, one icon per circular slot, with a hub that names the highlighted one.

Props of `RadialMenu`: `items: RadialMenuItem[]`, `trigger?: 'hold' | 'click' | 'contextmenu'`, `radius?: number`, `startAngle?: number`, `sweep?: number`, `open?: boolean`

## Radio Group

`import { RadioGroup, RadioGroupItem } from '@youj/react'` Base UI radio group: one tab stop, arrow keys move the selection (and wrap), Space selects.

## Rating

`import { Rating } from '@youj/react'` A rating in stars, or any Youj or lucide-style icon, in whole or half steps.

Props of `Rating`: `value?: number`, `defaultValue?: number`, `max?: number`, `allowHalf?: boolean`, `readOnly?: boolean`, `disabled?: boolean`

## Refill Meter

`import { RefillMeter } from '@youj/react'` A rate limit’s token bucket as cells you can count: one per token (or a share of the capacity), lit while the token is in the bucket.

Props of `RefillMeter`: `value: number`, `capacity: number`, `refillRate?: number`, `updatedAt?: number`, `burst?: number`, `segments?: number`

## Resizable

`import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from '@youj/react'` shadcn's resizable on react-resizable-panels 4: horizontal and vertical split groups that nest, with min / max sizes (px, %, rem) and collapsible panels that snap shut past their threshold.

Props of `ResizableHandle`: `withHandle?: boolean`

## Rollout Ruler

`import { RolloutRuler, RolloutStage } from '@youj/react'` How far a feature has rolled out, on a ruled track cut into its stages (Internal 1%, Beta 5%, 10%, 50%, GA 100% by default), each an equal stretch so the early cohorts get room; the axis says what each gate is worth.

Props of `RolloutRuler`: `value?: number`, `defaultValue?: number`, `stages?: readonly RolloutStage[]`, `readOnly?: boolean`, `disabled?: boolean`, `size?: 'default' | 'sm'`

## Route Map

`import { RouteMap, RouteMapRoute, RouteMapStop, RouteMapTerrain } from '@youj/react'` A route on a drawn map with no tiles: abstract land, water, parks and roads in the theme’s tones, and routes as smooth lines in their state: driven, on time, delayed (danger) or proposed (a dotted accent line nobody has accepted yet).

Props of `RouteMap`: `stops: RouteMapStop[]`, `routes: RouteMapRoute[]`, `terrain?: RouteMapTerrain`, `value?: string | null`, `defaultValue?: string | null`, `legend?: boolean`

## Score Ring

`import { ScoreGrade, ScoreRing } from '@youj/react'` A score out of a range as a full ring of fine ticks, lit clockwise from the top up to the score, the tick at the score reaching past the rest.

Props of `ScoreRing`: `value: number`, `min?: number`, `max?: number`, `grades?: readonly ScoreGrade[]`, `tone?: 'accent' | 'neutral' | 'success' | 'warning' | 'danger' | 'chart-1' | 'chart-2' | 'chart-3' | 'chart-4' | 'chart-5'`, `ticks?: number`

## Scroll Area

`import { ScrollArea, ScrollBar } from '@youj/react'` Base UI's scroll area: native scrolling (wheel, touch, and the keyboard once the viewport has focus) with thin overlay scrollbars that fade in while you hover or scroll and fade away on the slow token after.

Props of `ScrollArea`: `orientation?: 'vertical' | 'horizontal' | 'both'`, `fade?: boolean`, `viewportClassName?: string`

## Scrub Number Field

`import { ScrubNumberField } from '@youj/react'` A compact number you can drag.

Props of `ScrubNumberField`: `value?: number`, `defaultValue?: number`, `min?: number`, `max?: number`, `step?: number`, `largeStep?: number`

## Seat Map

`import { SeatMap, SeatMapRow, SeatMapSeat, SeatMapTier } from '@youj/react'` A venue from above: the stage, then rows of seats bending round it with aisles, the row’s letter at both ends.

Props of `SeatMap`: `rows: SeatMapRow[]`, `tiers: SeatMapTier[]`, `aisles?: number[]`, `value?: string[]`, `defaultValue?: string[]`, `max?: number`

## Segmented Control

`import { SegmentedControl, SegmentedControlItem } from '@youj/react'` One choice out of a few, always made: plain labels on a hairline, with a 2px accent bar that glides to the pressed segment on the smooth spring and retargets mid-flight (`variant="pill"` makes it a recessed track with a raised key).

Props of `SegmentedControl`: `variant?: 'underline' | 'pill'`, `value?: string`, `defaultValue?: string`, `sound?: boolean`, `size?: 'default' | 'sm' | 'lg'`

## Segmented Meter

`import { SegmentedMeter, SegmentedMeterThreshold } from '@youj/react'` How full a resource is, in cells you can count (`role="meter"`): a label and its value on one line, a row of discrete cells under them, lit from the inline start.

Props of `SegmentedMeter`: `value: number`, `min?: number`, `max?: number`, `label?: ReactNode`, `segments?: number`, `tone?: 'accent' | 'success' | 'warning' | 'danger' | 'neutral'`

## Segmented Ring

`import { SegmentedRing, SegmentedRingInterval } from '@youj/react'` An interval workout on one dial: every interval an arc as long as it lasts, round the ring clockwise from the top inside a ruler of ten-second ticks.

Props of `SegmentedRing`: `intervals: SegmentedRingInterval[]`, `elapsed: number`, `label?: string`, `locale?: string`, `sound?: boolean`

## Select

`import { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue } from '@youj/react'` Base UI select: typeahead, Home/End, and by default the macOS-style popup that lines the selected item up over the trigger.

Props of `SelectContent`: `presentation?: 'auto' | 'sheet' | 'popover'`

## Separator

`import { Separator } from '@youj/react'` A hairline in the border token with role="separator" and aria-orientation from Base UI.

## Session Timeout

`import { SessionSignedOut, SessionTimeout, SessionTimeoutState, UseSessionTimeoutOptions } from '@youj/react'` Warns before an inactive session signs out, for banking, admin and health apps.

Props of `SessionTimeout`: `signedOut?: ReactNode | false`, `timeout: number`, `warnBefore?: number`, `events?: SessionActivityEvent[]`, `throttle?: number`, `enabled?: boolean`

## Severity Timeline

`import { SeverityEvent, SeverityTimeline } from '@youj/react'` An incident, event by event (`ol`): each row has its clock time and how long after the start it came, a node on a rail (a dot in its severity’s tone, a diamond for a milestone), a soft SEV chip, the title and the detail.

Props of `SeverityTimeline`: `events: readonly SeverityEvent[]`, `start?: number`, `end?: number`, `now?: number`, `locale?: string`, `timeZone?: string`

## Share Bar

`import { ShareBar, ShareBarPart } from '@youj/react'` A word-sized share of a whole for a table cell or a list row: a solid bar, or a run of cells (`segments`) for the dense, counted look.

Props of `ShareBar`: `value?: number`, `max?: number`, `parts?: readonly ShareBarPart[]`, `active?: number | null`, `segments?: number`, `mark?: 'cell' | 'tick'`

## Share Dialog

`import { ShareAccess, ShareDialog, ShareInvite, SharePerson, SharePreview, ShareRecipient, ShareRole, ShareSuggestion } from '@youj/react'` Share one thing with people and by link, Google-Drive style.

Props of `ShareDialog`: `open?: boolean`, `defaultOpen?: boolean`, `trigger?: ReactElement`, `resource: string`, `link: string`, `roles?: ShareRole[]`

## Share Ring

`import { ShareRing, ShareRingSegment } from '@youj/react'` A whole split into its parts, as a dial of cells: a dish’s calories by macro, a budget by category, a day by activity.

Props of `ShareRing`: `segments: readonly ShareRingSegment[]`, `max?: number`, `value?: number`, `unit?: string`, `format?: Intl.NumberFormatOptions`, `amountFormat?: Intl.NumberFormatOptions`

## Sheet

`import { Sheet, SheetBody, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger } from '@youj/react'` A panel that slides in from an edge: a positioned Base UI Dialog (modal, focus-trapped, Escape and the scrim close it, focus returns to the trigger). motion’s yj-sheet-* slides it fully off its edge, decelerating in on the slow token and accelerating away on the base token; reversing mid-slide continues from where it is.

Props of `Sheet`: `sound?: boolean`

## Sidebar

`import { Sidebar, SidebarCard, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger } from '@youj/react'` shadcn's sidebar, re-skinned.

Props of `Sidebar`: `side?: 'left' | 'right'`, `variant?: 'sidebar' | 'floating' | 'inset'`, `collapsible?: 'offcanvas' | 'icon' | 'none'`, `surface?: 'solid' | 'glass'`

## Signature Pad

`import { SignaturePad, SignaturePadHandle } from '@youj/react'` One self-contained surface to sign on: full-width Draw | Sign by typing tabs on top, the signing area under them, and a footer with Undo and Clear (quiet icon buttons) and Accept.

Props of `SignaturePad`: `value?: SignatureValue | null`, `defaultValue?: SignatureValue | null`, `locked?: boolean`, `defaultLocked?: boolean`, `typeInstead?: boolean`, `aspectRatio?: number`

## Skeleton

`import { Skeleton } from '@youj/react'` A recessed block with a band of light crossing it on the shimmer loop: three deliberate beats per cycle (cross, then rest), so it reads as a calm pulse rather than a constant wash.

## Slide To Confirm

`import { SlideToConfirm } from '@youj/react'` A confirmation that takes a deliberate gesture: drag the thumb to the end of the track.

Props of `SlideToConfirm`: `label?: string`, `confirmingLabel?: string`, `confirmedLabel?: string`, `errorLabel?: string | ((error: unknown) => string)`, `resetAfter?: number`, `disabled?: boolean`

## Slider

`import { Slider } from '@youj/react'` Base UI slider: direct manipulation, so the thumb tracks the pointer 1:1 and keyboard steps land instantly, as on a native range.

Props of `Slider`: `thumbLabels?: string[]`, `getAriaValueText?: (formattedValue: string, value: number, index: number) => string`, `variant?: 'default' | 'liquid' | 'ticks'`, `tone?: 'accent' | 'neutral' | 'success' | 'warning' | 'danger' | 'chart-1' | 'chart-2' | 'chart-3' | 'chart-4' | 'chart-5'`, `ticks?: number`, `sound?: boolean`

## Slot Grid

`import { SlotGrid, SlotGridSlot } from '@youj/react'` A week of bookable times you can read at a glance: a column per day, a row per start time, and in each cell a run of pips (one per place, up to eight) lit for the places still free.

Props of `SlotGrid`: `slots: readonly SlotGridSlot[]`, `start?: Date | number`, `days?: number`, `times?: readonly number[]`, `value?: string | null`, `defaultValue?: string | null`

## Sortable List

`import { SortableList, SortableListHandle, SortableListItem } from '@youj/react'` A vertical list the user puts in order, on the same motion/react layer as Kanban.

Props of `SortableList`: `value?: string[]`, `defaultValue?: string[]`, `disabled?: boolean`

## Sparkline

`import { Sparkline } from '@youj/react'` A word-sized trend line: a monotone curve (it never overshoots a point), a wash under it and a dot on the latest value, in plain SVG.

Props of `Sparkline`: `data: readonly number[]`, `color?: string`, `area?: boolean`, `dot?: boolean`, `domain?: [number, number]`, `label?: string`

## Spinner

`import { Spinner } from '@youj/react'` youj's LoaderRingIcon: a constant-rate turn with an arc that breathes on a different period, so the loop never visibly repeats.

Props of `Spinner`: `label?: string | null`, `size?: number`

## Stage Rail

`import { Stage, StageRail } from '@youj/react'` A pipeline run as one segmented rail.

Props of `StageRail`: `stages: Stage[]`, `value?: string`, `defaultValue?: string`, `segments?: number`, `label?: string`, `locale?: string`

## Stat Card

`import { Stat, StatBars, StatBreakdown, StatBreakdownPart, StatCard, StatDelta, StatGroup, StatMeter, StatNote, StatValue } from '@youj/react'` Analytics tiles built like an instrument readout.

Props of `StatCard`: `label: ReactNode`, `value: number`, `format?: Intl.NumberFormatOptions`, `locale?: string`, `unit?: ReactNode`, `previous?: number`

## Stat Pill

`import { StatPill } from '@youj/react'` One live figure in a capsule: an icon in a recessed disc, its name as a mono eyebrow, the value in mono with its unit small and muted, then how it moves, a delta (an arrow and the change, tinted by `better`: a fall in latency is good) or a word-sized trend with a dot on the latest reading.

Props of `StatPill`: `label: string`, `value: number`, `format?: Intl.NumberFormatOptions`, `locale?: string`, `unit?: ReactNode`, `icon?: ReactNode`

## Stepper

`import { Stepper, StepperDetour, StepperStep } from '@youj/react'` Where you are in a sequence: each step is complete, current, upcoming or in error, and can be optional.

Props of `Stepper`: `steps: readonly StepperStep[]`, `current: number`, `orientation?: 'horizontal' | 'vertical'`, `stepHref?: (index: number) => string | undefined`, `compact?: boolean`, `detour?: StepperDetour`

## Stepper Nav

`import { StepperNav } from '@youj/react'` Step navigation for flows that span pages: Stepper in a named nav landmark, with done steps and the current one as links back to their pages (Stepper's `stepHref`).

Props of `StepperNav`: `steps: readonly StepperStep[]`, `current: number`, `href: (index: number) => string`, `orientation?: 'horizontal' | 'vertical'`, `compact?: boolean`

## Switch

`import { Switch } from '@youj/react'` Base UI switch (role="switch").

Props of `Switch`: `size?: 'sm' | 'default' | 'lg'`, `variant?: 'default' | 'liquid'`, `sound?: boolean`

## Table

`import { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow } from '@youj/react'` The plain table parts: header, body, footer, row, head, cell and caption.

## Tabs

`import { Tabs, TabsContent, TabsList, TabsTrigger } from '@youj/react'` Base UI tabs with a kinetic indicator: one motion SlidingIndicator per list glides to the selected tab on the `smooth` spring (transform-only, retargets mid-glide, re-places without motion on resize, jumps under reduced motion).

Props of `Tabs`: `sound?: boolean`

## Tag Input

`import { TagInput } from '@youj/react'` Free-form values as Badge chips in an InputGroup.

Props of `TagInput`: `value?: string[]`, `defaultValue?: string[]`, `validate?: (tag: string, tags: string[]) => string | null | undefined | void`, `delimiters?: string[]`, `addOnBlur?: boolean`, `maxTags?: number`

## Textarea

`import { Textarea } from '@youj/react'` A textarea rendered through Base UI's field control, so it is labeled, described and validated exactly like Input.

Props of `Textarea`: `value?: string`, `defaultValue?: string`

## Theme Toggle

`import { ThemeScript, ThemeToggle } from '@youj/react'` Light or dark for the whole page, through `data-theme` on <html>.

Props of `ThemeToggle`: `variant?: 'button' | 'segmented'`, `value?: ThemeToggleMode | (string & {})`, `defaultValue?: 'light' | 'dark' | 'system'`, `storageKey?: string`, `sound?: boolean`, `loading?: boolean`

## Time Lanes

`import { RotaLane, RotaShift, TimeLanes } from '@youj/react'` Who is on call when, as a week of lanes: a lane per person or team in the chart colors, each shift a bar, overrides hatched, a dashed baton where one lane hands off to another, and now as an accent line that glides with the clock.

Props of `TimeLanes`: `lanes: RotaLane[]`, `shifts: RotaShift[]`, `start: Date | number`, `days?: number`, `hours?: number`, `now?: Date | number | null`

## Time Picker

`import { TimePicker } from '@youj/react'` A time as segments in one InputGroup frame: hours, minutes and (on a 12-hour clock) AM/PM, each a spinbutton.

Props of `TimePicker`: `value?: string | null`, `defaultValue?: string | null`, `hourCycle?: 12 | 24`, `locale?: string`, `step?: number`, `disabled?: boolean`

## Timeline

`import { Timeline, TimelineEvent, TimelineEventType } from '@youj/react'` An activity feed: events grouped by day, newest first, each with a typed mark on a rail (commit, comment, deploy, alert, merge, pull request, or your own), who did it and a relative time that stays true.

Props of `Timeline`: `events: readonly TimelineEvent[]`, `types?: Record<string, TimelineEventType>`, `hasMore?: boolean`, `locale?: string`, `empty?: ReactNode`, `now?: Date | number`

## Toast

`import { PromiseOptions, Toaster, ToastOptions } from '@youj/react'` Base UI toasts with motion’s yj-toast stack.

Props of `PromiseOptions`: `loading: PromiseStep`, `success: PromiseStep | ((value: Value) => PromiseStep)`, `error: PromiseStep | ((error: unknown) => PromiseStep)`

## Toggle

`import { Toggle } from '@youj/react'` Base UI toggle: a two-state button with aria-pressed.

Props of `Toggle`: `sound?: boolean`, `variant?: 'default' | 'outline'`, `size?: 'default' | 'sm' | 'lg'`

## Toggle Group

`import { ToggleGroup, ToggleGroupItem } from '@youj/react'` Base UI toggle group: one tab stop, arrow keys rove (and wrap), Home/End jump, Space/Enter press.

Props of `ToggleGroup`: `size?: 'default' | 'sm' | 'lg'`, `variant?: 'default' | 'outline' | 'pill' | 'segmented'`, `spacing?: number`

## Toolbar

`import { Toolbar, ToolbarButton, ToolbarGroup, ToolbarInput, ToolbarLink, ToolbarSeparator, ToolbarToggle } from '@youj/react'` Base UI Toolbar: a row of buttons, toggles, links and inputs that is one tab stop, roved with the arrow keys (wrapping at the ends).

Props of `ToolbarButton`: `size?: 'default' | 'sm' | 'lg'`

## Tooltip

`import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@youj/react'` Base UI tooltip: a short visual label on hover or keyboard focus.

Props of `Tooltip`: `longPress?: boolean`

## Tour

`import { Tour, TourBeacon, TourStep } from '@youj/react'` Guided coach-marks: a dim scrim with a rounded cut-out over one element at a time and a card beside it with the step’s title and text, the count (“2 of 5”, and dots), Back / Next / Done and Skip.

Props of `Tour`: `steps: TourStep[]`, `open?: boolean`, `defaultOpen?: boolean`, `step?: number`, `defaultStep?: number`, `allowInteraction?: boolean`

## Track Timeline

`import { TimelineClip, TimelineTrack, TrackTimeline } from '@youj/react'` Tracks of clips on a time ruler, to move, trim and snap, with mute, solo and a level strip per track.

Props of `TrackTimeline`: `tracks: readonly TimelineTrack[]`, `clips: readonly TimelineClip[]`, `duration: number`, `position?: number`, `defaultPosition?: number`, `value?: string | null`

## Tree View

`import { TreeView, TreeViewContextActions } from '@youj/react'` A WAI-ARIA tree with one Tab stop: ↑ ↓ move, → opens or steps in, ← closes or steps out, Home / End, * opens every sibling, typing jumps to a matching name, Enter activates, Space selects or checks, F2 renames, Shift+F10 opens the context menu.

Props of `TreeView`: `data: TreeNode[]`, `expanded?: string[]`, `defaultExpanded?: string[]`, `selectionMode?: 'single' | 'multiple'`, `selected?: string[]`, `defaultSelected?: string[]`

## Treemap

`import { Treemap, TreemapItem } from '@youj/react'` How a whole divides: each part is a cell whose area is its value, laid out squarified so cells stay near square, largest first from the top-start corner (mirrored in RTL).

Props of `Treemap`: `items: readonly TreemapItem[]`, `highlight?: string | readonly string[]`, `formatValue?: (value: number) => string`, `label?: string`, `gap?: number`, `aspect?: number`

## Typography

`import { Eyebrow, TypographyBlockquote, TypographyH1, TypographyH2, TypographyH3, TypographyH4, TypographyInlineCode, TypographyLarge, TypographyLead, TypographyList, TypographyMuted, TypographyP, TypographySmall } from '@youj/react'` shadcn’s typography set as components: H1–H4, P, Lead, Large, Small, Muted, Blockquote, InlineCode and List, in the long-form voice the docs read in.

Props of `TypographyList`: `ordered?: false`

## Unit Chart

`import { UnitChart, UnitChartBucket } from '@youj/react'` A count you can see one by one: each column is a bucket and each dot in it one unit (`unit` sets how much a dot counts for), stacked from the baseline over a faint grid of every dot the chart could hold.

Props of `UnitChart`: `data: readonly UnitChartBucket[]`, `unit?: number`, `rows?: number`, `highlight?: readonly [number, number]`, `tone?: 'accent' | 'neutral' | 'success' | 'warning' | 'danger' | 'chart-1' | 'chart-2' | 'chart-3' | 'chart-4' | 'chart-5'`, `formatValue?: (value: number) => string`

## Voice Orb

`import { VoiceOrb, VoiceOrbBands } from '@youj/react'` A voice agent’s presence: a clean, softly lit sphere in the theme’s accent, from a light tint to a deep shade of it.

Props of `VoiceOrb`: `state?: 'idle' | 'listening' | 'thinking' | 'speaking'`, `level?: number`, `bands?: VoiceOrbBands`, `audio?: VoiceOrbAudio | null`, `muted?: boolean`, `spill?: boolean`

## Waffle Chart

`import { WaffleChart, WaffleChartItem } from '@youj/react'` A whole in countable cells: each cell is one unit (`unit` sets how much), colored by its part.

Props of `WaffleChart`: `items: readonly WaffleChartItem[]`, `unit?: number`, `columns?: number`, `rows?: number`, `shape?: 'square' | 'hex'`, `layout?: 'rows' | 'cluster'`

## Waveform Scrubber

`import { WaveformChapter, WaveformScrubber } from '@youj/react'` Where you are in a recording, drawn as its sound: bars from the loudness samples you pass (no decoding), played in ink and the rest dim, chapter starts as ticks with titles above and a ruler of minutes below.

Props of `WaveformScrubber`: `peaks: readonly number[]`, `duration: number`, `value?: number`, `defaultValue?: number`, `chapters?: readonly WaveformChapter[]`, `clip?: readonly [number, number]`

## Wheel Picker

`import { WheelPicker, WheelPickerColumn, WheelPickerOption } from '@youj/react'` A drum of values you spin: one or more columns, the chosen row of each in one band across the middle, the rows above and below curving away and fading.

Props of `WheelPicker`: `columns?: WheelPickerColumn[]`, `value?: Record<string, string>`, `defaultValue?: Record<string, string>`, `options?: never`, `label?: never`, `loop?: boolean`

## Whiteboard

`import { Whiteboard, WhiteboardCursor, WhiteboardHandle } from '@youj/react'` A whiteboard for sketching and arranging: pen, line, arrow, rectangle, ellipse, text, sticky notes that grow to fit, connectors that re-route when the shapes they join move (straight or elbow, with labels), embeds holding any React node, and comment pins that open your thread in a popover.

Props of `Whiteboard`: `value?: WhiteboardScene`, `defaultValue?: WhiteboardScene`, `defaultTool?: 'select' | 'hand' | 'pen' | 'line' | 'arrow' | 'rectangle' | 'ellipse' | 'text' | 'sticky' | 'connector' | 'comment'`, `tools?: readonly WhiteboardTool[]`, `readOnly?: boolean`, `height?: number`

## Wizard

`import { Wizard, WizardStep } from '@youj/react'` A multi-step flow on the Stepper: one step at a time with Back and Continue.

Props of `Wizard`: `children: ReactNode`, `step?: number`, `defaultStep?: number`, `orientation?: 'horizontal' | 'vertical'`, `backLabel?: string`, `nextLabel?: string`

## Workspace Switcher

`import { Workspace, WorkspaceSwitcher } from '@youj/react/workspace-switcher'` Switch between workspaces: a trigger with the current one's logo or initials, and a Popover with a searchable Command list.

Props of `WorkspaceSwitcher`: `workspaces: Workspace[]`, `value?: string`, `defaultValue?: string`, `createLabel?: string`, `searchPlaceholder?: string`, `compact?: boolean`

## World Clock

`import { WorldClock, WorldClockZone } from '@youj/react'` Several time zones side by side, to find a time that works for everyone.

Props of `WorldClock`: `zones: WorldClockZone[]`, `value?: Date | number | null`, `defaultValue?: Date | number | null`, `now?: Date | number`, `step?: number`, `hourCycle?: 12 | 24`