# Prodular UI > The UI foundation for AI-built software: components, complete SaaS screens, tokens and rules for coding agents, built on shadcn/ui, Base UI and Tailwind CSS v4. Install any component with `npx shadcn@latest add @prodular/` after adding the registry `"@prodular": "https://ui.prodular.co/r/{name}.json"` to components.json. ## Rules for agents - Use semantic tokens (bg-card, text-muted-foreground, border-border). Never hard-code colors. - Mark AI output with the AI components (AiMark, Message, Reasoning) so users can tell what a model produced. - One container level: panels and cards are the only boxes. Separate content inside them with dividers and spacing. - Animate with the motion presets (animate-rise, animate-fade-in, animate-scale-in, animate-slide-in-end and their exits) and the --duration tokens. They respect reduced motion. See https://ui.prodular.co/docs/motion. - Build marketing pages from Section and Section header: stack Sections without margins, put a real screen in ProductFrame, end with CtaBand. See https://ui.prodular.co/docs/landing. - Wrap signed-in apps in AppShell once and pass the current page as activeId. Use SettingsNav for settings areas and MasterDetail for list and record views inside it. - Items marked (Pro) need a license. If `npx prodular-ui add` returns 401, tell the user and offer the closest free component instead. - Compose through the render prop: } />, }>. Do not wrap a trigger around a button or put a button inside another. - When a part that renders a button by default (Button, CollapsibleTrigger, PopoverTrigger, DialogTrigger, SelectTrigger, TabsTrigger, Toggle) renders a div, span, row or link through render, add nativeButton={false}. - Set density once with data-density on or on a region: dense for workstations, compact for busy SaaS screens, comfortable for sparse ones. Do not shrink controls with h-* or text-[10px] overrides; use the xs and sm sizes and text-2xs for metadata. - Never hand-build widgets the kit has: no div with role="button", "treeitem", "slider" or "tab". Use Button, Tree, Slider and Tabs. Every icon-only control needs aria-label. - For overlays on maps, charts, canvases and graphs, use Tooltip, Popover or HoverCard with anchor={pointAnchor(x, y, container)} and a controlled open state, not a hand-positioned div. Offer a keyboard path to every point. - Register shortcuts with useHotkey under one HotkeysProvider and render ShortcutsDialog; single-key shortcuts must stay switchable (WCAG 2.1.4). - Use a specialized renderer (MapLibre, D3, canvas, WebGL) only for the plot itself. Keep the chrome around it (panels, legends, toolbars, inspectors, menus) in kit components, and color the plot with tokenColor() or useTokenColors() from @/lib/token-color. - Encode severity with Severity and the severity-* tokens (critical, high, elevated, routine), never with chart or status colors, and always with a shape or label as well as color. - To extend the kit, compose its parts and pass className for layout only. Add a variant to a copied component rather than restyling every call site. Full reference: https://ui.prodular.co/llms-full.txt ## Docs - [What is Prodular UI](https://ui.prodular.co/docs): what is in it, how it relates to shadcn/ui, requirements, what is free and when it is not the right fit. - [Installation](https://ui.prodular.co/docs/installation): `npx prodular-ui init`, then `npx prodular-ui add `. - [MCP server](https://ui.prodular.co/docs/mcp): connect Claude Code, Cursor, VS Code or Codex with `npx prodular-ui mcp init --client claude`. - [AI ready](https://ui.prodular.co/docs/ai-ready): rules to paste into AGENTS.md or CLAUDE.md. - [Theming](https://ui.prodular.co/docs/theming), [Motion](https://ui.prodular.co/docs/motion), [Landing pages](https://ui.prodular.co/docs/landing) - [Changelog](https://ui.prodular.co/docs/changelog): what changed in the kit, the CLI and the MCP server, with migration notes. - [Pricing](https://ui.prodular.co/pricing) and [License](https://ui.prodular.co/license) ## Guides - [Build a SaaS app with Claude Code and a design system](https://ui.prodular.co/guides/claude-code-design-system): A working setup for building product screens with Claude Code on Prodular UI: install the kit, connect the MCP server, write the rules once, ask for outcomes and check what the agent wrote. - [How to keep AI-generated React interfaces consistent](https://ui.prodular.co/guides/consistent-ai-generated-ui): Why screens drift when a coding agent builds them one prompt at a time, and the five layers that stop it: tokens, shared components, whole screens with states, written rules and a check. - [shadcn/ui or a full design system: what each gives you](https://ui.prodular.co/guides/shadcn-ui-vs-design-system): What shadcn/ui provides out of the box, what application teams usually build on top of it, and when a ready system such as Prodular UI is worth paying for and when it is not. - [What matters in a design system for AI coding](https://ui.prodular.co/guides/design-system-for-ai-coding): Nine things to check before you pick a design system for Claude Code, Cursor or another coding agent, with a quick test for each. ## AI - [Agent run](https://ui.prodular.co/docs/components/agent-run) (Pro): A 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 action](https://ui.prodular.co/docs/components/ai-action) (Pro): The 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 chat](https://ui.prodular.co/docs/components/ai-chat) (Pro): A 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 actions](https://ui.prodular.co/docs/components/ai-field-actions) (Pro): AI 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 fill](https://ui.prodular.co/docs/components/ai-form-fill) (Pro): Fills 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 insight](https://ui.prodular.co/docs/components/ai-insight) (Pro): An AI generated insight callout for dashboards: a finding in one headline, the explanation, the number behind it, sources, actions and feedback. - [AI mark](https://ui.prodular.co/docs/components/ai-mark): The 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 parts](https://ui.prodular.co/docs/components/ai-message-parts): Renders one Vercel AI SDK UIMessage with Prodular UI: text through Response, reasoning, every tool state, approvals wired to addToolApprovalResponse, sources and inline citations. - [AI suggestion](https://ui.prodular.co/docs/components/ai-suggestion) (Pro): AI 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. - [Approval](https://ui.prodular.co/docs/components/approval) (Pro): Human 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. - [Artifact](https://ui.prodular.co/docs/components/artifact) (Pro): A 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. - [Attachment](https://ui.prodular.co/docs/components/attachment): A file chip for the composer and for messages, with upload, processing, error and done states. - [Bubble](https://ui.prodular.co/docs/components/bubble): A rounded container for short messages, used for what people write in a chat with an assistant. - [Code block](https://ui.prodular.co/docs/components/code-block): Monospaced code with an optional title, copy button, line numbers and diff lines. Used by Response and Tool Call. - [Confidence](https://ui.prodular.co/docs/components/confidence) (Pro): How sure the model is about an output, as a three bar meter and a label, with the reason in a hover card. - [Diff](https://ui.prodular.co/docs/components/diff) (Pro): A 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 assist](https://ui.prodular.co/docs/components/inline-assist) (Pro): The 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. - [Marker](https://ui.prodular.co/docs/components/marker): A quiet line inside a conversation for dates, system events and state changes such as a stopped response. - [Message](https://ui.prodular.co/docs/components/message): The layout of one turn in a conversation: who wrote it, where it aligns, and slots for header, content and footer. - [Message actions](https://ui.prodular.co/docs/components/message-actions): The row of quiet icon buttons under a message: copy, regenerate, rate with a reason, share and switch between versions. - [Message scroller](https://ui.prodular.co/docs/components/message-scroller): The scrolling viewport for a conversation: it follows new tokens, anchors each new question to the top and shows a jump to latest button. - [Model picker](https://ui.prodular.co/docs/components/model-picker) (Pro): Choose the model that runs a feature. Each option shows a provider glyph, a short descriptor, capabilities, context window and relative speed and cost. - [Prompt input](https://ui.prodular.co/docs/components/prompt-input): The composer for AI chat: an autosizing textarea with attachments, tools and a send button that turns into a stop button while the model answers. - [Questionnaire](https://ui.prodular.co/docs/components/questionnaire): Structured questions an assistant asks before it acts, one step at a time, with keyboard shortcuts for the choices. - [Reasoning](https://ui.prodular.co/docs/components/reasoning): Collapsible model thinking: a shimmering Thinking label with a live timer while it runs, then Thought for 12s, collapsed. - [Response](https://ui.prodular.co/docs/components/response): Renders an assistant answer from markdown, with a caret and soft word fade while it streams and citations from the sources it used. - [Sources](https://ui.prodular.co/docs/components/sources): Citations for generated answers: numbered inline chips with a preview card, and a collapsible list of every source used. - [Suggestions](https://ui.prodular.co/docs/components/suggestions): Prompt suggestions as a scrollable row of chips for empty states, or a vertical list of follow-up questions under an answer. - [Tool call](https://ui.prodular.co/docs/components/tool-call): One tool invocation by a model: name, a short summary of its arguments and its status, with the input and output inside the same container. - [Trace](https://ui.prodular.co/docs/components/trace): A quiet list of the steps an agent took, with running, error and pending states and collapsible detail. - [Usage meter](https://ui.prodular.co/docs/components/usage-meter) (Pro): Token and credit usage: a segmented bar against a limit, a context window ring that warns near the limit, and a monthly summary strip. - [Voice input](https://ui.prodular.co/docs/components/voice-input) (Pro): Dictation 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 bar](https://ui.prodular.co/docs/components/bulk-action-bar): A 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. - [Button](https://ui.prodular.co/docs/components/button): Triggers an action. Eight variants, including an AI variant for actions that run a model. - [Button group](https://ui.prodular.co/docs/components/button-group): Joins related buttons, inputs and labels into one row with shared borders. - [Hotkeys](https://ui.prodular.co/docs/components/hotkeys): Keyboard 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 input](https://ui.prodular.co/docs/components/amount-input) (Pro): A money field that takes its decimals and symbol from the currency and its grouping from the locale, with an optional currency switch. - [Calendar](https://ui.prodular.co/docs/components/calendar): A month grid for picking a date or a date range, built on React DayPicker. - [Checkbox](https://ui.prodular.co/docs/components/checkbox): An on or off choice that is saved with the rest of a form, with an indeterminate state for select all. - [Combobox](https://ui.prodular.co/docs/components/combobox): A text input that filters a list as you type, for picking one or many items from long lists. - [Date range picker](https://ui.prodular.co/docs/components/date-range-picker) (Pro): A 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. - [Field](https://ui.prodular.co/docs/components/field): The way to build forms: a label, a control, a description and an error, linked for assistive technology without passing ids. - [File upload](https://ui.prodular.co/docs/components/file-upload) (Pro): A 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. - [Form](https://ui.prodular.co/docs/components/form) (Pro): Forms 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 edit](https://ui.prodular.co/docs/components/inline-edit) (Pro): Edit text, numbers, choices and dates where they are shown, with async saving, validation errors and a saved confirmation, without opening a form. - [Input](https://ui.prodular.co/docs/components/input): A single-line text field for names, emails, numbers and files, in three sizes that line up with Button. - [Input group](https://ui.prodular.co/docs/components/input-group): An input with icons, text, keyboard hints or buttons attached inside the same border. - [Input OTP](https://ui.prodular.co/docs/components/input-otp): Enter a one-time code digit by digit, with paste and autofill support. - [Label](https://ui.prodular.co/docs/components/label): A text label for a form control. Inside forms, use FieldLabel, which links itself. - [Multi-select](https://ui.prodular.co/docs/components/multi-select): Pick several values from a list as chips, with groups, descriptions, select all and options that load from a server as people type. - [Native select](https://ui.prodular.co/docs/components/native-select): The browser's own select element with the Prodular surface, for forms where the system picker works best. - [Number input](https://ui.prodular.co/docs/components/number-input): A numeric field with steppers, units, precision and locale formatting, that steps with the arrow keys and can be scrubbed by dragging its label. - [Password input](https://ui.prodular.co/docs/components/password-input): A 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 picker](https://ui.prodular.co/docs/components/plan-picker) (Pro): Picks 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 group](https://ui.prodular.co/docs/components/radio-group): Pick exactly one option from a small set that people should see side by side, as a list or as choice cards. - [Rich text editor](https://ui.prodular.co/docs/components/rich-text-editor) (Pro): A 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 input](https://ui.prodular.co/docs/components/search-input): A search field with a clear button, a global keyboard shortcut, a loading state and recent searches while it is empty. - [Select](https://ui.prodular.co/docs/components/select): Choose one option from a short list in a popup, styled to match the rest of the form. - [Slider](https://ui.prodular.co/docs/components/slider): Pick a value or a range by dragging, for settings where the rough position matters more than the exact number. - [Switch](https://ui.prodular.co/docs/components/switch): Turns a setting on or off immediately, like a light switch. - [Tag input](https://ui.prodular.co/docs/components/tag-input) (Pro): A multi-value text input that turns entries into removable chips, with keyboard support, a suggestions list, a maximum count and validation. - [Textarea](https://ui.prodular.co/docs/components/textarea): A multi-line text field that grows with its content, for notes, descriptions and messages. - [Time picker](https://ui.prodular.co/docs/components/time-picker): A 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. - [Toggle](https://ui.prodular.co/docs/components/toggle): A button that stays pressed, for turning a view option or a format on and off. - [Toggle group](https://ui.prodular.co/docs/components/toggle-group): A 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 keys](https://ui.prodular.co/docs/components/api-keys) (Pro): API 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 log](https://ui.prodular.co/docs/components/audit-log) (Pro): Who 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. - [Avatar](https://ui.prodular.co/docs/components/avatar): A person or workspace image with an initials fallback, four sizes, a presence dot and overlapping groups. - [Badge](https://ui.prodular.co/docs/components/badge): A compact label for status, counts and metadata, with tinted status variants, a status dot and an AI variant. - [Bar list](https://ui.prodular.co/docs/components/bar-list): Ranked horizontal bars with the label on the bar and the value on the right. For top sources, pages, countries or customers. - [Carousel](https://ui.prodular.co/docs/components/carousel): A horizontal slider for a small set of cards or previews, with arrow buttons, dots and keyboard support. - [Chart](https://ui.prodular.co/docs/components/chart): A 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 grid](https://ui.prodular.co/docs/components/data-grid) (Pro): A dense, virtualized grid for large datasets: resizable and pinnable columns, keyboard navigation like a spreadsheet, inline editing with validation and a totals row. - [Data table](https://ui.prodular.co/docs/components/data-table) (Pro): A 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 chart](https://ui.prodular.co/docs/components/donut-chart): A 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 builder](https://ui.prodular.co/docs/components/filter-builder) (Pro): Nested 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. - [Item](https://ui.prodular.co/docs/components/item): A row with media, a title, a description and actions, for lists of integrations, files, people and settings. - [Kbd](https://ui.prodular.co/docs/components/kbd): A keyboard key or shortcut, styled to sit in text, menus, buttons and tooltips. - [Legend](https://ui.prodular.co/docs/components/legend): The key to a chart, map, graph or timeline: colors, shapes and line styles with labels, grouping and optional toggles. - [Permissions matrix](https://ui.prodular.co/docs/components/permissions-matrix) (Pro): Roles 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 list](https://ui.prodular.co/docs/components/property-list): Key-value pairs for inspectors and detail panels on one grid, with empty values, descriptions, monospace values and copy actions. - [Saved views](https://ui.prodular.co/docs/components/saved-views) (Pro): A 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. - [Severity](https://ui.prodular.co/docs/components/severity): A four-level threat or impact scale (critical, high, elevated, routine) with its own tokens and a shape per level, separate from system status. - [Sparkline](https://ui.prodular.co/docs/components/sparkline) (Pro): A tiny line, area or bar trend drawn in SVG without a chart library, colored with chart tokens through currentColor. - [Stat](https://ui.prodular.co/docs/components/stat) (Pro): A 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. - [Status](https://ui.prodular.co/docs/components/status): A colored dot with a label for system and record states, with an optional live pulse and a pill appearance for tables. - [Table](https://ui.prodular.co/docs/components/table): A data table with hairline rows, muted 13px headers, numeric alignment, selected rows and an optional sticky header. - [Time track](https://ui.prodular.co/docs/components/time-track) (Pro): A time axis with swimlanes, point and span events, a playhead, zoom, pan and range selection, for incident reviews, signal timelines and playback. - [Timeline](https://ui.prodular.co/docs/components/timeline) (Pro): An 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 color](https://ui.prodular.co/docs/components/token-color): Resolves color tokens to sRGB for canvas, WebGL, MapLibre, D3 and chart libraries, and updates them when the theme or mode changes. ## Feedback - [Alert](https://ui.prodular.co/docs/components/alert): An inline message about the state of the page or the account, with status variants, an AI variant and room for actions. - [Banner](https://ui.prodular.co/docs/components/banner) (Pro): A full-width announcement or system message with an icon, one line of text, an action link and an optional dismiss button. - [Empty](https://ui.prodular.co/docs/components/empty): A calm, centered placeholder for views with nothing to show yet, with an icon, a title, a description and actions. - [Progress](https://ui.prodular.co/docs/components/progress): A determinate bar for tasks and quotas, with a label and value row and status colors for thresholds. - [Skeleton](https://ui.prodular.co/docs/components/skeleton): A pulsing placeholder in the shape of content that is loading, so the layout does not jump. - [Spinner](https://ui.prodular.co/docs/components/spinner): An indeterminate loading indicator for short waits. - [Upgrade gate](https://ui.prodular.co/docs/components/upgrade-gate) (Pro): Locks 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 dialog](https://ui.prodular.co/docs/components/alert-dialog): A modal confirmation that interrupts the user before an irreversible or costly action and requires an explicit answer. - [Command](https://ui.prodular.co/docs/components/command): A searchable list of actions and destinations, used inline or as a cmd+K palette, with groups, shortcuts and a hint footer. - [Context menu](https://ui.prodular.co/docs/components/context-menu): A menu that opens on right click or long press, with the same items, shortcuts and variants as Dropdown menu. - [Destructive confirm](https://ui.prodular.co/docs/components/destructive-confirm): Confirms 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. - [Dialog](https://ui.prodular.co/docs/components/dialog): A 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. - [Drawer](https://ui.prodular.co/docs/components/drawer): A swipeable panel from the bottom or side of the screen, built for touch, with snap points and nested drawers. - [Dropdown menu](https://ui.prodular.co/docs/components/dropdown-menu): A list of actions or options that opens from a button, with groups, shortcuts, submenus, checkboxes and radio items. - [Hover card](https://ui.prodular.co/docs/components/hover-card): A preview card that appears when hovering or focusing a link, for people, issues or pull requests mentioned in text. - [Point anchor](https://ui.prodular.co/docs/components/point-anchor): Anchors Tooltip, Popover and HoverCard to a point instead of a trigger: a map marker, a chart datum, a graph node or the pointer. - [Popover](https://ui.prodular.co/docs/components/popover): A small floating panel anchored to a trigger for quick settings, sharing or filters that do not need a modal. - [Sheet](https://ui.prodular.co/docs/components/sheet): A panel that slides in from an edge of the screen for editing or inspecting a record without leaving the page. - [Toast](https://ui.prodular.co/docs/components/toast): A brief notification in a stack at the corner of the screen, with status icons, an optional action and progress for async work. - [Tooltip](https://ui.prodular.co/docs/components/tooltip): A short, high contrast label that appears on hover or focus, mostly for icon buttons and keyboard shortcuts. ## Navigation - [Breadcrumb](https://ui.prodular.co/docs/components/breadcrumb): Shows where the current page sits in the hierarchy and links back to each parent. - [Menubar](https://ui.prodular.co/docs/components/menubar): A horizontal bar of menus, like a desktop app's File and Edit menus, for editors and tools with many commands. - [Navigation menu](https://ui.prodular.co/docs/components/navigation-menu): The top navigation of a marketing site or docs, with dropdown panels of links that animate between each other. - [Pagination](https://ui.prodular.co/docs/components/pagination): Page links for long lists and tables, with previous and next controls and a raised current page. - [Settings nav](https://ui.prodular.co/docs/components/settings-nav): The 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. - [Sidebar](https://ui.prodular.co/docs/components/sidebar): The main navigation of an app: workspace switcher, sections with counts, projects and the user menu, collapsible to icons. - [Stepper](https://ui.prodular.co/docs/components/stepper) (Pro): Shows progress through an ordered flow, horizontal or vertical, with complete, current, upcoming and error states and clickable completed steps. - [Tabs](https://ui.prodular.co/docs/components/tabs): Switches between views of the same content. A segmented control for short sets and a line variant for page sections. - [Tree](https://ui.prodular.co/docs/components/tree) (Pro): A hierarchical list with expand and collapse, roving focus, type-ahead, selection, icons, metadata and context menus, for explorers, entity browsers and outlines. - [Workspace switcher](https://ui.prodular.co/docs/components/workspace-switcher) (Pro): Switches 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 - [Accordion](https://ui.prodular.co/docs/components/accordion): A stack of sections separated by hairlines that expand one or several at a time. - [App shell](https://ui.prodular.co/docs/components/app-shell) (Pro): The 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 ratio](https://ui.prodular.co/docs/components/aspect-ratio): Keeps media and previews at a fixed width to height ratio as the layout resizes. - [Card](https://ui.prodular.co/docs/components/card): The one container for grouped content: a header, a body and an optional footer on a raised surface. - [Collapsible](https://ui.prodular.co/docs/components/collapsible): Shows and hides one section of content with a trigger, animating its height. - [Master detail](https://ui.prodular.co/docs/components/master-detail): A 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 header](https://ui.prodular.co/docs/components/page-header) (Pro): The 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 header](https://ui.prodular.co/docs/components/panel-header): The 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. - [Resizable](https://ui.prodular.co/docs/components/resizable): Panels that people can resize by dragging a hairline handle, with keyboard support. - [Scroll area](https://ui.prodular.co/docs/components/scroll-area): A scroll container with a slim themed scrollbar that stays out of the way until you hover or scroll. - [Separator](https://ui.prodular.co/docs/components/separator): A 1px hairline that divides content inside a container, horizontally or vertically. - [Status bar](https://ui.prodular.co/docs/components/status-bar): The strip along the bottom of a desktop app for connection state, background work, counts and keyboard hints. - [Workspace](https://ui.prodular.co/docs/components/workspace) (Pro): Docked, resizable panes for workstation screens: explorer, canvas, inspector and a bottom panel, collapsible to rails, remembered across reloads and stacked on small screens. ## Marketing - [Announcement](https://ui.prodular.co/docs/components/announcement): A small pill above a hero pointing to news: a release, a beta or a post. A link when it has an href. - [Backdrop](https://ui.prodular.co/docs/components/backdrop): A 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 grid](https://ui.prodular.co/docs/components/bento-grid) (Pro): A 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. - [Changelog](https://ui.prodular.co/docs/components/changelog) (Pro): Release 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 band](https://ui.prodular.co/docs/components/cta-band) (Pro): The 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. - [FAQ](https://ui.prodular.co/docs/components/faq): Questions 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 grid](https://ui.prodular.co/docs/components/feature-grid) (Pro): Features 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 rows](https://ui.prodular.co/docs/components/feature-rows) (Pro): Features 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 section](https://ui.prodular.co/docs/components/hero-section) (Pro): The 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 cloud](https://ui.prodular.co/docs/components/logo-cloud): Customer 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 footer](https://ui.prodular.co/docs/components/marketing-footer) (Pro): The 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 navbar](https://ui.prodular.co/docs/components/marketing-navbar) (Pro): The 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 signup](https://ui.prodular.co/docs/components/newsletter-signup): An email signup as its own band: the pitch on one side and the field on the other, with sending, done and error states. - [Pricing table](https://ui.prodular.co/docs/components/pricing-table) (Pro): Plans 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 frame](https://ui.prodular.co/docs/components/product-frame) (Pro): Shows 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. - [Reveal](https://ui.prodular.co/docs/components/reveal): Lets 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. - [Section](https://ui.prodular.co/docs/components/section): A 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 strip](https://ui.prodular.co/docs/components/stats-strip) (Pro): Three 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 grid](https://ui.prodular.co/docs/components/team-grid): The people behind the product: a photo or initials, name, role and an optional line each, in three or four columns. - [Testimonials](https://ui.prodular.co/docs/components/testimonials) (Pro): Quotes from customers: TestimonialHighlight for the one that matters most, large and centered, and TestimonialWall for many short ones in columns. ## Blocks: Application - [Customers](https://ui.prodular.co/blocks/customers) (Pro): A full customer list with segment tabs, search, faceted filters, column options, bulk actions and pagination. Clicking a row opens the customer in a sheet with balances, invoices and activity. - [Dashboard](https://ui.prodular.co/blocks/dashboard) (Pro): A finance overview inside the app shell: KPI strip with sparklines, revenue against the previous period, one AI insight, recent invoices and an activity feed. - [Notifications](https://ui.prodular.co/blocks/notifications) (Pro): A notification center inside the app shell: tabs for mentions, approvals, agents and system events, grouped by day, with inline approve, reply and mark read. AI written items carry the AI mark, and the bell in the header opens a compact popover version. - [Onboarding](https://ui.prodular.co/blocks/onboarding) (Pro): A focused setup flow: a stepper across four steps, the current step's form in one card and a checklist rail with progress and a person to ask for help. ## Blocks: AI - [Agent inbox](https://ui.prodular.co/blocks/agent-inbox) (Pro): Everything Relay's background agents are doing: runs grouped by needs review, running, failed and done, with filters and bulk approval for low risk items. Selecting a run shows its approval, the proposed change and the step by step timeline. - [Approvals queue](https://ui.prodular.co/blocks/approvals-queue) (Pro): Human in the loop at scale: every action your agents propose, grouped by risk. Selecting one shows the request with a before and after, parameters, the agent's reasoning, confidence and sources. Bulk approve low risk work, review with J, K, A and R, and keep an audit trail of every decision. - [Assistant](https://ui.prodular.co/blocks/assistant) (Pro): A full Relay Analyst workspace: conversations grouped by day with search, a thread with reasoning, tool calls, a streamed answer with a table and citations, a composer with model picker and attachments, and a generated reconciliation report with versions in a side panel. - [Copilot panel](https://ui.prodular.co/blocks/copilot-panel) (Pro): An AI assistant docked to the right of a normal app screen. It knows what is on screen, offers suggestions for that view, answers with citations that highlight the rows they point to, proposes actions through an approval, and minimizes to a rail. - [Knowledge sources](https://ui.prodular.co/blocks/knowledge-sources) (Pro): What the AI assistant and agents can read: connected sources with sync status, document counts and errors, an upload area with indexing progress, per source access for people and agents, and a test box that answers from the sources with citations. ## Blocks: Settings - [AI settings](https://ui.prodular.co/blocks/ai-settings) (Pro): Workspace AI controls for admins: one switch for all AI, per feature on and off with a default model, the data sources AI may read, training and retention, agent approval rules by risk and an audit log of AI actions. - [Settings](https://ui.prodular.co/blocks/settings) (Pro): Workspace settings with a secondary section nav: a general form, members with an invite dialog, billing and usage, notifications, API keys, security and a danger zone, separated by dividers. - [Team and roles](https://ui.prodular.co/blocks/team-roles) (Pro): Members with inline role changes, an invite dialog with email chips and a role picker, pending invites, seats with SSO and SCIM status, and a roles and permissions matrix with custom roles. - [AI usage and billing](https://ui.prodular.co/blocks/usage-billing) (Pro): AI credits for the workspace: the balance with a segmented meter, top-up and auto top-up, spend limits with alerts, daily usage by feature, usage by member, agent and model, and invoices. ## Blocks: Authentication - [Sign in](https://ui.prodular.co/blocks/sign-in) (Pro): A split sign-in screen: email and password, single sign-on and magic link options on the left, a calm product visual built from real components and a customer quote on the right. - [Sign up](https://ui.prodular.co/blocks/sign-up) (Pro): A three step sign up: work email and name, a 6 digit email code, then the workspace name, URL, team size and role. A live preview of the new workspace on the right fills in as people type. ## Blocks: Marketing - [About page](https://ui.prodular.co/blocks/about-page) (Pro): An about page: the mission as the title, stats that count up, the story as a short timeline, three working principles, the team, investors and a hiring call to action. - [Changelog page](https://ui.prodular.co/blocks/changelog-page) (Pro): Release notes as a page: a title with an RSS link, entries with a date and version that stay in view, tags, a live picture of the change, the story and smaller fixes, then an email signup. - [SaaS landing](https://ui.prodular.co/blocks/landing) (Pro): A full landing page built from the marketing sections: navbar, hero with a live product frame, logo marquee, feature grid, an AI bento, stats that count up, testimonials, pricing, FAQ, a closing call to action and the footer. - [AI product landing](https://ui.prodular.co/blocks/landing-ai) (Pro): A landing page for an AI agent: a hero where the agent works a ticket live, with tool calls and an approval, a three step setup, feature rows with real tool calls, an approval and cited answers, stats, safety guardrails, a testimonial, FAQ and a closing call to action. - [Pricing](https://ui.prodular.co/blocks/pricing) (Pro): A pricing page with three tiers and a monthly or yearly toggle, a full feature comparison grouped by category and an FAQ. - [Pricing page](https://ui.prodular.co/blocks/pricing-page) (Pro): A full pricing page on the marketing sections: plans with a monthly or yearly switch and a comparison table, logos, a savings estimate with two sliders, a testimonial, billing FAQ and a closing call to action.