Components
153 components, every one themed by tokens and documented for people and for coding agents.
AI
Agent runAIProA live timeline of an agent doing work: the goal, run status and elapsed time, ordered steps with tool calls, approvals and a final result.AI actionProThe shared state model for AI actions: start, stream, stop, retry, accept, reject and undo, with any provider. useAiAction powers the field actions and form fill, and builds your own AI features in a few lines.AI chatAIProA complete streaming chat on the Vercel AI SDK: useChat, reasoning, tool calls, approvals, sources, attachments and a model picker, with a Claude route handler that installs with it.AI field actionsProAI for one text field: rewrite, shorten, expand, fix, change the tone, translate or follow an instruction. Streams into the field's AI state, shows the change as a before and after diff to accept or reject, and lets people undo.AI form fillProFills a Form from a document, an email or a record. Suggestions stream in under each field with where they came from and how sure the model is; people accept or dismiss them one by one or all at once, and Accept all can be undone.AI insightAIProAn AI generated insight callout for dashboards: a finding in one headline, the explanation, the number behind it, sources, actions and feedback.AI markAIThe sparkle that marks content a model produced, as an icon, a small badge or inline with text, with the model name on hover.AI message partsAIRenders one Vercel AI SDK UIMessage with Prodular UI: text through Response, reasoning, every tool state, approvals wired to addToolApprovalResponse, sources and inline citations.AI suggestionAIProAI inside forms: a suggestion row under a field, ghost text that completes what someone types, and an AiFill button that writes a field with a shimmer while it works.ApprovalAIProHuman in the loop: an agent asks to perform an action and a person approves, edits or rejects it, with what, why, affected items, parameters and risk in view.ArtifactAIProA panel for something the model generated, such as a document, a chart or code, with versions, Preview and Code tabs, copy, download and full screen, and a streaming state.AttachmentAIA file chip for the composer and for messages, with upload, processing, error and done states.BubbleAIA rounded container for short messages, used for what people write in a chat with an assistant.Code blockAIMonospaced code with an optional title, copy button, line numbers and diff lines. Used by Response and Tool Call.ConfidenceAIProHow sure the model is about an output, as a three bar meter and a label, with the reason in a hover card.DiffAIProA text diff with inline and split modes, word level highlights inside changed lines and optional line numbers. Shows what an AI edit or a new version changes.Inline assistAIProThe Cmd+K inline edit for text: select a passage, ask the AI how to change it, then review the proposed change as a diff and accept, reject or try again.MarkerAIA quiet line inside a conversation for dates, system events and state changes such as a stopped response.MessageAIThe layout of one turn in a conversation: who wrote it, where it aligns, and slots for header, content and footer.Message actionsAIThe row of quiet icon buttons under a message: copy, regenerate, rate with a reason, share and switch between versions.Message scrollerAIThe scrolling viewport for a conversation: it follows new tokens, anchors each new question to the top and shows a jump to latest button.Model pickerAIProChoose the model that runs a feature. Each option shows a provider glyph, a short descriptor, capabilities, context window and relative speed and cost.Prompt inputAIThe composer for AI chat: an autosizing textarea with attachments, tools and a send button that turns into a stop button while the model answers.QuestionnaireAIStructured questions an assistant asks before it acts, one step at a time, with keyboard shortcuts for the choices.ReasoningAICollapsible model thinking: a shimmering Thinking label with a live timer while it runs, then Thought for 12s, collapsed.ResponseAIRenders an assistant answer from markdown, with a caret and soft word fade while it streams and citations from the sources it used.SourcesAICitations for generated answers: numbered inline chips with a preview card, and a collapsible list of every source used.SuggestionsAIPrompt suggestions as a scrollable row of chips for empty states, or a vertical list of follow-up questions under an answer.Tool callAIOne tool invocation by a model: name, a short summary of its arguments and its status, with the input and output inside the same container.TraceAIA quiet list of the steps an agent took, with running, error and pending states and collapsible detail.Usage meterAIProToken and credit usage: a segmented bar against a limit, a context window ring that warns near the limit, and a monthly summary strip.Voice inputAIProDictation for AI features: a mic button with a listening state, live level bars, a timer, a stop button and a transcript preview with interim words.
Actions
Bulk action barA toolbar for the selected items: count, select all and clear, actions with single key shortcuts, a More menu for the rest, loading per action, and confirmation for destructive ones.ButtonTriggers an action. Eight variants, including an AI variant for actions that run a model.Button groupJoins related buttons, inputs and labels into one row with shared borders.HotkeysKeyboard shortcuts for desktop apps: one listener, scopes, guards for fields and open menus, conflict detection, remapping and a shortcuts sheet that can turn single-key shortcuts off (WCAG 2.1.4).
Inputs
Amount inputProA money field that takes its decimals and symbol from the currency and its grouping from the locale, with an optional currency switch.CalendarA month grid for picking a date or a date range, built on React DayPicker.CheckboxAn on or off choice that is saved with the rest of a form, with an indeterminate state for select all.ComboboxA text input that filters a list as you type, for picking one or many items from long lists.Date range pickerProA trigger showing the selected range that opens presets and a two-month calendar, with an optional compare to previous period toggle. Changes apply on Apply.FieldThe way to build forms: a label, a control, a description and an error, linked for assistive technology without passing ids.File uploadProA dropzone with drag-over state, click or keyboard to browse and type and size checks, plus a file list with type icons, progress, success and error states, remove and retry.FormProForms on React Hook Form and Zod: fields wired to labels and errors, conditional fields, an error summary, server errors per field, and autosave with a status line.Inline editProEdit text, numbers, choices and dates where they are shown, with async saving, validation errors and a saved confirmation, without opening a form.InputA single-line text field for names, emails, numbers and files, in three sizes that line up with Button.Input groupAn input with icons, text, keyboard hints or buttons attached inside the same border.Input OTPEnter a one-time code digit by digit, with paste and autofill support.LabelA text label for a form control. Inside forms, use FieldLabel, which links itself.Multi-selectPick several values from a list as chips, with groups, descriptions, select all and options that load from a server as people type.Native selectThe browser's own select element with the Prodular surface, for forms where the system picker works best.Number inputA numeric field with steppers, units, precision and locale formatting, that steps with the arrow keys and can be scrubbed by dragging its label.Password inputA password field with a show and hide toggle and a Caps Lock hint, plus a strength meter and a requirements checklist for choosing a new password.Plan pickerProPicks a plan, seats and a billing period, with a summary of the price, what is due today, and whether the change is an upgrade or a downgrade. Prices and proration come from your billing backend.Radio groupPick exactly one option from a small set that people should see side by side, as a list or as choice cards.Rich text editorAIProA Tiptap editor with headings, lists, quotes, code, links and tables, a toolbar, a slash menu, a selection menu, and AI editing that streams a rewrite as a diff before it replaces anything.Search inputA search field with a clear button, a global keyboard shortcut, a loading state and recent searches while it is empty.SelectChoose one option from a short list in a popup, styled to match the rest of the form.SliderPick a value or a range by dragging, for settings where the rough position matters more than the exact number.SwitchTurns a setting on or off immediately, like a light switch.Tag inputProA multi-value text input that turns entries into removable chips, with keyboard support, a suggestions list, a maximum count and validation.TextareaA multi-line text field that grows with its content, for notes, descriptions and messages.Time pickerA time field that understands what people type, offers a list of times at a fixed step and follows the locale's 12 or 24 hour clock.ToggleA button that stays pressed, for turning a view option or a format on and off.Toggle groupA set of toggles where one or several can be pressed. With spacing 0 and the outline variant it is a segmented control.
Data display
API keysProAPI keys for a workspace: create with scopes and an expiry, see the secret once, rotate and revoke with confirmation, and see when and where each key was last used. Every change goes through your callbacks.Audit logProWho did what, to which record, and when. Events group by day and expand to their before and after values and request context; filter by actor, record type and time, and search across everything.AvatarA person or workspace image with an initials fallback, four sizes, a presence dot and overlapping groups.BadgeA compact label for status, counts and metadata, with tinted status variants, a status dot and an AI variant.Bar listRanked horizontal bars with the label on the bar and the value on the right. For top sources, pages, countries or customers.CarouselA horizontal slider for a small set of cards or previews, with arrow buttons, dots and keyboard support.ChartA themed wrapper for Recharts: series colors from the chart tokens, hairline grids, 12px muted axes, a popover tooltip, and built-in loading and empty states.Data gridProA dense, virtualized grid for large datasets: resizable and pinnable columns, keyboard navigation like a spreadsheet, inline editing with validation and a totals row.Data tableProA full data grid on TanStack Table v9: sorting, search, faceted filters with chips, column visibility, row selection with a bulk action bar, pagination, and loading and empty states.Donut chartA donut or pie with the total in the center and a legend with values and shares. Hovering a segment or legend row shows that part in the center.Filter builderProNested AND/OR conditions over typed fields: text, number, date, select and yes/no, each with its own operators. The value is plain JSON, with helpers to apply it to rows and describe it in a sentence.ItemA row with media, a title, a description and actions, for lists of integrations, files, people and settings.KbdA keyboard key or shortcut, styled to sit in text, menus, buttons and tooltips.LegendThe key to a chart, map, graph or timeline: colors, shapes and line styles with labels, grouping and optional toggles.Permissions matrixProRoles across, permissions down, a level in every cell: no access, read, write or admin. Granting a permission adds what it requires, removing one takes away what depends on it, and roles and groups change in bulk.Property listKey-value pairs for inspectors and detail panels on one grid, with empty values, descriptions, monospace values and copy actions.Saved viewsProA bar of saved views over a table or report. Picking a view restores its filters, sorting and columns; changing them marks the view modified, with Save, Save as new and Reset.SeverityA four-level threat or impact scale (critical, high, elevated, routine) with its own tokens and a shape per level, separate from system status.SparklineProA tiny line, area or bar trend drawn in SVG without a chart library, colored with chart tokens through currentColor.StatProA KPI strip: one surface with dividers between metrics, each with a label, a large value, a colored delta, an optional sparkline and a comparison line.StatusA colored dot with a label for system and record states, with an optional live pulse and a pill appearance for tables.TableA data table with hairline rows, muted 13px headers, numeric alignment, selected rows and an optional sticky header.Time trackProA time axis with swimlanes, point and span events, a playhead, zoom, pan and range selection, for incident reviews, signal timelines and playback.TimelineProAn activity feed with avatars or icons, actor, action, target and relative time, optional comments and attachments, grouped by day with sticky labels and a connector line.Token colorResolves color tokens to sRGB for canvas, WebGL, MapLibre, D3 and chart libraries, and updates them when the theme or mode changes.
Feedback
AlertAn inline message about the state of the page or the account, with status variants, an AI variant and room for actions.BannerProA full-width announcement or system message with an icon, one line of text, an action link and an optional dismiss button.EmptyA calm, centered placeholder for views with nothing to show yet, with an icon, a title, a description and actions.ProgressA determinate bar for tasks and quotas, with a label and value row and status colors for thresholds.SkeletonA pulsing placeholder in the shape of content that is loading, so the layout does not jump.SpinnerAn indeterminate loading indicator for short waits.Upgrade gateProLocks a feature behind a plan and says how to get it: over a dimmed preview, as a row in settings, or in place of the feature, with a plan comparison and a custom upgrade action. PlanBadge marks locked items in menus and nav.
Overlays
Alert dialogA modal confirmation that interrupts the user before an irreversible or costly action and requires an explicit answer.CommandA searchable list of actions and destinations, used inline or as a cmd+K palette, with groups, shortcuts and a hint footer.Context menuA menu that opens on right click or long press, with the same items, shortcuts and variants as Dropdown menu.Destructive confirmConfirms an action that cannot be undone: it names what is lost, can ask people to type a name first, waits for the async action, shows its error without closing, and explains when the action is blocked.DialogA modal window for a focused task, such as a short form or a review step, that blocks the page until it is done or dismissed.DrawerA swipeable panel from the bottom or side of the screen, built for touch, with snap points and nested drawers.Dropdown menuA list of actions or options that opens from a button, with groups, shortcuts, submenus, checkboxes and radio items.Hover cardA preview card that appears when hovering or focusing a link, for people, issues or pull requests mentioned in text.Point anchorAnchors Tooltip, Popover and HoverCard to a point instead of a trigger: a map marker, a chart datum, a graph node or the pointer.PopoverA small floating panel anchored to a trigger for quick settings, sharing or filters that do not need a modal.SheetA panel that slides in from an edge of the screen for editing or inspecting a record without leaving the page.ToastA brief notification in a stack at the corner of the screen, with status icons, an optional action and progress for async work.TooltipA short, high contrast label that appears on hover or focus, mostly for icon buttons and keyboard shortcuts.
Navigation
BreadcrumbShows where the current page sits in the hierarchy and links back to each parent.MenubarA horizontal bar of menus, like a desktop app's File and Edit menus, for editors and tools with many commands.Navigation menuThe top navigation of a marketing site or docs, with dropdown panels of links that animate between each other.PaginationPage links for long lists and tables, with previous and next controls and a raised current page.Settings navThe section list of a settings area: grouped pages, search across labels, descriptions and keywords, and the open page marked. Becomes a native select on phones. SettingsLayout puts it beside the page.SidebarThe main navigation of an app: workspace switcher, sections with counts, projects and the user menu, collapsible to icons.StepperProShows progress through an ordered flow, horizontal or vertical, with complete, current, upcoming and error states and clickable completed steps.TabsSwitches between views of the same content. A segmented control for short sets and a line variant for page sections.TreeProA hierarchical list with expand and collapse, roving focus, type-ahead, selection, icons, metadata and context menus, for explorers, entity browsers and outlines.Workspace switcherProSwitches between organizations and workspaces: searchable, grouped by organization, recent ones first, with create and settings actions. Sizes itself for the App shell sidebar, its collapsed rail and a top navigation.
Layout
AccordionA stack of sections separated by hairlines that expand one or several at a time.App shellProThe frame of an app: navigation, top bar and the scrolling page. Four layouts share one nav model: collapsible sidebar, a rail that peeks open on hover, a double sidebar and top navigation. Phones get a sheet, and the collapsed state is remembered.Aspect ratioKeeps media and previews at a fixed width to height ratio as the layout resizes.CardThe one container for grouped content: a header, a body and an optional footer on a raised surface.CollapsibleShows and hides one section of content with a trigger, animating its height.Master detailA list beside the selected record. Side by side and resizable on wide screens, with empty and loading states; on phones the record takes the screen with a Back button.Page headerProThe title area of an app screen: breadcrumb, title, description, a meta row for status and owners, actions on the right and optional tabs on the bottom border.Panel headerThe strip at the top of a panel: icon, title, count, status and actions in one row the height of a control, with an optional fold toggle.ResizablePanels that people can resize by dragging a hairline handle, with keyboard support.Scroll areaA scroll container with a slim themed scrollbar that stays out of the way until you hover or scroll.SeparatorA 1px hairline that divides content inside a container, horizontally or vertically.Status barThe strip along the bottom of a desktop app for connection state, background work, counts and keyboard hints.WorkspaceProDocked, resizable panes for workstation screens: explorer, canvas, inspector and a bottom panel, collapsible to rails, remembered across reloads and stacked on small screens.
Marketing
AnnouncementA small pill above a hero pointing to news: a release, a beta or a post. A link when it has an href.BackdropA quiet pattern behind a section: a hairline grid, dots or a glow in the theme's AI colors, faded toward the edges. Pure CSS, nothing moves.Bento gridProA grid of cards of different sizes for showing what a product does, each with a live visual on top and a title and sentence below.ChangelogProRelease notes on a page: the date and version in a column that stays in view, then tags, the title, a live picture, the story and smaller changes. Every entry has its own link.CTA bandProThe closing call to action of a page: one sentence, a line of support and the buttons, in a panel with a soft glow so it reads as the end.FAQQuestions people ask before buying, answered in place: the heading and a way to ask more on one side, the questions in an accordion on the other.Feature gridProFeatures in a grid separated by hairlines rather than boxes: an icon, a title and a sentence each, optionally a link. Cells rise in one after another.Feature rowsProFeatures told one at a time: the text on one side and a live picture on the other, switching sides row by row. Stacks on phones with the picture under the text.Hero sectionProThe first section of a landing page: announcement, h1, lead, actions and a note, with the product beside or below it over a quiet backdrop. Parts rise in one after another.Logo cloudCustomer or partner logos under a line of proof: a calm grid, or a marquee that pauses on hover, off screen and for reduced motion.Marketing footerProThe footer of a marketing site: brand and a line about the product, link columns, an optional newsletter signup, and a bottom row with legal text, small links and social profiles.Marketing navbarProThe header of a marketing site: brand, links with menus and descriptions, and actions like Sign in and a call to action. Sticks to the top and shows its edge once the page scrolls; on phones the links move into a panel.Newsletter signupAn email signup as its own band: the pitch on one side and the field on the other, with sending, done and error states.Pricing tableProPlans side by side for a pricing page: monthly and yearly, one highlighted plan, features as plain lines, and an optional comparison table below. Prices and buttons line up across plans.Product frameProShows a real screen of your product on a marketing page: the content renders at app width and scales to fit inside a quiet window frame, with optional tilt and fade. Live components, never a stale screenshot.RevealLets content rise into place the first time it scrolls into view, with an optional delay for staggering. Content shows at once with reduced motion or without scripts.SectionA band of a marketing page with one vertical rhythm and one content width, plus Section header for the eyebrow, title, lead and actions. Stacked sections keep even spacing without margins of their own.Stats stripProThree or four numbers that prove the point, side by side with hairlines between them. They count up the first time they scroll into view.Team gridThe people behind the product: a photo or initials, name, role and an optional line each, in three or four columns.TestimonialsProQuotes from customers: TestimonialHighlight for the one that matters most, large and centered, and TestimonialWall for many short ones in columns.