Yugen UI

Button triggers a single action or event.

ButtonGroup joins adjacent buttons into one unified control for related actions.

CompoundButton is a large button with an icon and two lines of text: the main label and a description of the action.

Link takes people to another page, resource or location, inline in a paragraph or on its own.

MenuButton is a button with a trailing chevron that opens a Menu of options.

SplitButton offers several related actions: the main button runs the primary one, the rest live in a menu.

ToggleButton has an on and an off state and turns an option on or off immediately.

ToggleGroup groups related ToggleButtons to pick one or several options.

Toolbar groups frequently used commands into a horizontal or vertical bar navigated with the arrow keys.

Autocomplete is a search box with suggestions: type to filter, pick a suggestion to fill it, or press Enter to search the raw query.

Calendar shows a monthly grid of days to pick a single date, several dates or a date range.

Checkbox lets people select one or more independent options from a set.

ColorPicker picks any color: a saturation / brightness area, hue and opacity bars, and HEX / RGB / HSL inputs.

Combobox combines a text input with a listbox: type to filter, then pick one or more options.

DatePicker is a Fluent-style input that opens a Calendar in a popover to pick a date, shown as dd/MM/yyyy.

DateRangePicker with a list of quick range presets next to the calendar.

DateTimePicker picks a date and a time in one popover: the calendar on top, the time field below.

Dropdown lets people pick one option from a custom listbox that opens below the field.

Field wraps an input control with its label, required marker, hint and validation message.

FileUpload is a drop zone with a file list: pick with mouse or keyboard, drag and drop or paste; type, size and count are validated.

Combine Yugen's Field, Input, Select, Checkbox, DatePicker and Button with react-hook-form + zod for fully validated, accessible forms.

FormattedInput formats phone numbers, card numbers and amounts as you type, keeping the caret in place.

Input lets people enter and edit a single line of text.

InputOTP collects a one-time passcode, one character per box.

Label names a control so people know what to enter or choose.

MonthPicker and YearPicker pick a month or a year, with the same field and keyboard as DatePicker.

PasswordInput is a password field with a show / hide button, a Caps Lock note and an optional strength meter.

RadioGroup lets people choose exactly one option from a mutually exclusive set.

Rating lets people score with stars; RatingDisplay shows a read-only score.

SearchBox is an input dedicated to search, with a magnifier icon and a quick clear button.

Select picks one value from a list using the browser's native select element.

Slider picks a value (or a range) along a continuous track by dragging the thumb.

SpinButton lets people type a number and step it up or down with buttons or the keyboard.

SwatchPicker lets people pick a color (or material) from a grid of swatches.

Switch turns a setting on or off, taking effect immediately.

Tag represents an attribute, filter or selected object; it can be dismissible or interactive.

TagPicker selects multiple items and shows each one as a Tag right inside the input.

Textarea lets people enter and edit longer, multi-line text.

TimePicker is a combobox-style input for picking a time from a list or typing it freely.

Breadcrumb shows where you are in a hierarchy and lets you jump back to parent levels.

Command is a searchable command palette for finding and running commands or navigating quickly with the keyboard.

ContextMenu shows commands related to an area or element when people right-click it.

Menu shows a list of commands or options when people interact with a button.

Menubar is a persistent horizontal, desktop-style menu bar holding command groups like File, Edit, View…

Nav is an app's vertical navigation, moving people between its main areas.

NavigationMenu is a website header menu: links and triggers that open dropdown panels (mega menus).

Pagination splits long content into pages and lets people move between them quickly.

Stepper shows which step of a multi-step process people are on; Wizard pairs it with each step's content and Back / Next buttons.

TabList switches between sibling content panels without leaving the page.

Avatar represents a person or entity with a photo, initials or an icon.

AvatarGroup shows a group of people or entities as avatars laid side by side, stacked, or split inside a circle.

Badge is a visual indicator for a small piece of information: a status, a count or a category label.

Carousel presents content one slide at a time, navigated with previous / next buttons, dots, thumbnails or the arrow keys.

Citation adds numbered sources [1] inline in an answer; hover or focus for a quick preview of title, domain and snippet, click to open the card and link.

CodeBlock shows code with lightweight built-in syntax highlighting (no Prism / Shiki), line numbers, highlighted lines, diffs, wrapping and a copy button.

CounterBadge shows a count (notifications, unread messages) or a dot signalling something new.

DataGrid is an interactive data grid: sorting, row selection, resizable columns and virtualization for tens of thousands of rows.

DescriptionList shows label / value pairs: order details, a profile, a summary of settings.

Image displays a picture with fit, corner radius, border and shadow options; AspectRatio keeps the frame at the right ratio.

Kbd displays a key or keyboard shortcut to guide people through keyboard interactions.

List shows a vertical sequence of related items, keyboard navigable, with single or multiple selection.

Markdown renders content written in Markdown (articles, release notes, CMS fields) with Prose typography, safely for untrusted content.

MessageScroller is a conversation scroll area that sticks to the bottom for new messages, shows “N new messages” while you read older ones, and keeps your place when history loads.

Persona pairs an Avatar (or just a presence dot) with a name and up to three lines of details about a person.

PresenceBadge shows a person's availability: available, busy, away, offline…

Prose styles long content from Markdown or a CMS: headings, paragraphs, lists, tables, code, quotes and images on the Yugen type ramp.

Quote shows an attributed quotation: a testimonial, an excerpt from a document or a statement in an article.

Stat shows one key number with its change and an optional small chart.

StreamingMarkdown renders an AI's Markdown answer as tokens arrive, without flashes of raw syntax, HTML injection or a full re-render on every word.

Table arranges data in rows and columns so people can scan, compare and act on each record.

Text renders type on the Fluent 2 type ramp, with presets for every role from Display to Caption2.

Timeline lists events over time: an order history, an activity log, the steps a request has gone through.

Tree shows hierarchical data as expandable / collapsible branches, like a folder tree or a navigation catalog.

One place for every state of async data (idle, loading, loaded, empty, error), with skeletons that don't flicker and errors that always offer a way out.

Empty shows a blank state when there's no data yet, with an explanation and a next step.

InfoLabel is a label with a small info button that opens a Popover with extra guidance for a field.

MessageBar communicates important information about the state of the whole page or a region.

A thin brand-colored progress bar along the top edge: signals that the app is working during route changes or background loads without covering what you're reading.

ProgressBar shows the progress of a running task, with a known percentage or as indeterminate.

Skeleton is a placeholder sketch of upcoming content that makes loading feel shorter.

Sonner stacks short notifications in a corner: the newest in front, older ones behind, fanning out on hover.

Spinner shows that the system is working on a task of unknown duration.

StatusPage is a page for HTTP errors (404, 500, 503…), being offline and new versions; ErrorBoundary shows it when its children fail.

Toast is a short, non-blocking notification that appears in a corner of the screen and dismisses itself.

Card is a surface that groups information and actions about a single subject.

Dialog is a modal window that asks people to confirm or provide information before continuing.

Drawer is a surface that slides in from the edge of the screen, holding navigation, filters or secondary content.

HoverCard previews the content behind a link when people point at it.

Popover shows floating, interactive content anchored to a trigger element.

TeachingPopover introduces a new feature or walks people through steps, right next to the related element.

Tooltip shows brief supplementary information when people hover or focus an element.

Accordion organizes content into expandable / collapsible sections to reduce information overload.

AppShell is the frame of an app: a sidebar that collapses to icons or opens as a Drawer, a header and the main content.

AspectRatio keeps a frame at a fixed width-to-height ratio at any width, for video, images, banners or stories.

Collapsible shows or hides a region with a toggle control, animating its height.

Divider is a thin line separating groups of content, optionally with text or an icon at the start, center or end.

Overflow moves items that don't fit the available width into a "…" menu button, in priority order.

Resizable splits an area into panels people drag to resize or collapse / expand, horizontally or vertically.

ScrollArea replaces the browser's default scrollbar with a thin Fluent-style one that appears on hover.

Blur goes from blurry to sharp and Rotate turns an element from -90° into place: two emphatic presence motions.

Collapse smoothly expands or collapses the height (or width) of a content region.

Fade fades an element in and out. It is the gentlest presence motion.

Scale grows an element from 90% to full size while fading in, for small floating surfaces.

Slide moves an element in from the start, end, top or bottom edge.

Stagger reveals child elements one after another, separated by a short delay.

AriaLiveAnnouncer and useAnnounce read dynamic announcements to screen reader users.

useArrowNavigationGroup and useFocusableGroup manage keyboard focus for groups of elements, like Fluent's Tabster.

Nine shared hooks that Yugen UI's own components use: state, screen, storage, shortcuts and measuring.

Sortable reorders lists by drag and drop or with the keyboard; every step is announced to screen readers.

useMediaQuery tracks a CSS media query (breakpoint, dark mode, reduced motion, pointer type) and re-renders when it changes.

Optimistic list updates: the UI changes the moment you click and syncs with the server in the background; on failure, exactly that change is rolled back and a toast explains why.

VisuallyHidden hides content from the screen while keeping it available to screen readers.

BarChart compares magnitudes across categories with vertical columns or horizontal bars, grouped or stacked, including negative values.

ChatComposer is an auto-growing message box: Enter sends, Shift+Enter adds a new line, and Send is enabled only when there's content.

DonutChart gives a quick part-to-whole view with up to 6 slices; the tail is grouped into “Other” and the total sits in the middle.

Heatmap colors a row × column matrix by magnitude, for hour / day patterns, cohort comparisons or retention tables.

LineChart and AreaChart show trends over time or across ordered categories, with several series on one axis.

Show loaders at the right moment and only over the region that is loading: no flash for fast responses, no flicker for slow ones.

NotificationCenter is a bell with an unread count. It opens a panel of notifications grouped by day: a Popover on desktop, a bottom sheet on mobile.

PromptInput is a complete prompt composer for AI assistants: auto-grows, attaches via button / drag and drop / pasted images, validates files inline, and Send turns into Stop while the model responds.

Questionnaire builds surveys or multi-step forms from a config array, one question per screen or everything on one page.

Reasoning tucks the model's thinking into a collapsible block: “Reasoning…” with a timer while it runs, “Reasoned for 12s” when done.

ScatterChart shows the relationship between two numeric measures (correlation, clusters, outliers), with bubbles and a trend line when needed.

Sheet is an adaptive overlay with one API and one content: a side panel on wide screens, a draggable bottom sheet on phones.

Ready-made skeletons for paragraphs, avatars, cards, lists and tables, with the size, radius and spacing of the real components.

Sometimes the answer isn't a chart: StatTile leads with the number, plus a delta and a small trend sparkline.

Tour walks people through the key parts of a product step by step: dims the rest, spotlights the right element and explains it with a TeachingPopover.

Trace shows execution step by step (an AI agent calling tools, a CI pipeline, a deployment) so people see what the system is doing and why.

brush adds an overview strip under LineChart / AreaChart to zoom into a period without losing the context of the whole series.