M
MiniDev UI
AccordionAccessible React accordion on Base UI, with bordered items, a rotating chevron and animated panels. Keyboard navigable, with one or many items open at once.
Account setup progressaccount-setup-progressReact onboarding card that shows account setup as completed steps out of a total, with a labelled progress bar and a hint for the next step to finish.
Activity feedactivity-feedReact activity feed that lists who did what and when, with initials avatars, muted action text and tabular timestamps in a single bordered card.
Add card formadd-card-formCompact payment form for card number, expiry and CVC with correct autocomplete hints, numeric input mode and a full width save button. Ready for your processor.
Admin stat stripadmin-stat-stripResponsive Tailwind row of admin KPI tiles, each with a label, a large tabular value and an optional up or down delta. Collapses from four columns to one.
Admin user rowadmin-user-rowUser management row with avatar, online status dot, name, email, a role chip for admin, write or read access, and an accessible actions menu button.
Agent traceagent-traceReact timeline of an AI agent run: each tool step shows pending, running, done or error, reports its duration and folds out details. The header sums up the run.
Ai composerai-composerChat input for AI apps with a multiline textarea, Enter to send, suggestion chips, attach button, model picker and a stop button while a response streams.
Alert dialogalert-dialogShadcn style alert dialog on Base UI for confirmations that need an explicit answer. Modal backdrop, focus trap, title, description and an actions row.
Announcement barannouncement-barSlim site-wide announcement bar for launches, promos or notices. Centered content, a polite status role for screen readers and an optional dismiss button.
Api key listapi-key-listReact settings panel listing API keys with masked previews, created date badges and a rotate button per key, plus a header action to create a new key.
App shellapp-shellTailwind app shell layout with a fixed width sidebar slot, a topbar slot and a scrolling main area. The sidebar hides below the md breakpoint for mobile.
Approval cardapproval-cardReact request card for approval workflows showing the requester avatar, title and summary, with Reject and Approve buttons wired to your callbacks.
Area chartarea-chartDependency free SVG area chart for React with a smoothed line, dashed grid, gradient fill and an optional highlighted point. Strokes stay crisp at any size.
Artifact previewartifact-previewFramed preview for AI generated artifacts such as code, documents or UI, with a title bar, copy button and optional expand action for a full view.
Aspect ratioaspect-ratioShadcn compatible aspect ratio wrapper that locks media to a ratio such as 16:9 or 1:1 using CSS aspect-ratio, with overflow clipped for images and video.
Assign pickerassign-pickerAssignee picker for tasks and tickets: a listbox of people with initials avatars, where the selected person is highlighted and choices report their id.
Attachment chipattachment-chipCompact Tailwind file chip with a paperclip icon, truncated filename and an optional remove button, for attachments in chat composers, emails and forms.
Audio playeraudio-playerMinimal React audio player row with a play and pause toggle, title, subtitle and an accessible progress bar. Controlled, so it works with any audio source.
Audio recorderaudio-recorderA microphone recorder with start, pause and stop, an elapsed timer, live waveform bars, playback with a progress bar and a download button.
Audit filter baraudit-filter-barFilter toolbar for audit logs combining a search field, actor filter chips for all, admins or system, and a date range picker in one wrapping row.
Audit log entryaudit-log-entrySingle audit log line: actor avatar, actor name, muted action text and the affected target, with a relative timestamp underneath. Stacks into a trail.
Audit trailaudit-trailBordered audit trail in React that renders a list of actor, action, target and time records as stacked log entries. Useful for security and admin history pages.
Auth cardauth-cardCentered Tailwind sign in card with a title, optional description, a slot for fields and providers, and a divided footer for sign up or reset links.
AutocompleteText input that filters string options as you type, using ARIA combobox and listbox roles. Works controlled or uncontrolled and lists up to eight matches.
AvatarShadcn compatible avatar on Base UI with image and initials fallback, three sizes, a status badge and an overlapping avatar group with a plus count.
Avatar groupavatar-groupShown under the name in the tooltip and overflow list.
Avatar uploadavatar-uploadReact profile photo uploader with an avatar preview and an Upload button that opens a hidden image file input. Shows initials until a picture is chosen.
Back linkback-linkSmall back navigation link with a left arrow icon, muted text that darkens on hover and a visible focus ring. Defaults to the label Back and accepts any href.
Back to topback-to-topA back to top button that appears after scrolling, with a ring that fills as the reader progresses. Smooth scroll that respects reduced motion.
BadgeShadcn style badge in seven variants: default, accent, secondary, destructive, outline, ghost and link. Renders as a span or any element, with icon support.
BannerInline notice banner in accent, warning or danger tones, with a status role, a slot for an action button and an optional dismiss icon on the right.
Bar chartbar-chartLightweight React bar chart with rounded bars, dashed gridlines and labels. Hovering a bar dims the rest and shows its value; the peak is highlighted first.
Bento gridbento-gridA responsive bento grid for feature sections: tiles with icon, title, copy and a visual slot on a six column grid that collapses to one column on phones.
Billing addressbilling-addressTailwind billing address fieldset with a multiline street field and a responsive row for city, state and postal code. Drops into checkout forms.
Blog cardblog-cardLinked Tailwind blog post card with a 16:9 cover image, tag, relative date, title and a two line clamped excerpt. Hover and focus states cover the card.
BreadcrumbBreadcrumb navigation from an items array, with chevron separators, linked ancestors and the current page marked with aria-current. Built with React.
Breadcrumb ellipsisbreadcrumb-ellipsisEllipsis marker for collapsing the middle of long breadcrumb trails. Decorative and hidden from assistive tech, sized to sit between breadcrumb separators.
Build pipelinebuild-pipelineCI pipeline view that shows each stage as a chip with success, running, failed or pending icons, joined by connectors. Status text is exposed to screen readers.
Bulk actions barbulk-actions-barFloating Tailwind selection bar that appears once rows are selected, showing the count, your action buttons and a clear button. Sticks to the bottom edge.
Bulk user importbulk-user-importCSV user import panel with a format hint for email, name and role, a CSV-only dropzone and an Import users button that enables once a file is added.
ButtonShadcn compatible React button on Base UI with eight variants, nine sizes including icon sizes, a pressed state and render prop support for links.
Button groupbutton-groupGroups adjacent buttons into one segmented control in Tailwind, joining borders and rounding only the outer corners. Uses role group for toolbars.
Calendar agendacalendar-agendaReact agenda list of the day's events with a fixed time column, title and optional meta line such as location or attendees, divided inside one card.
Calendar monthcalendar-monthMonth calendar grid with weekday headers and clickable day cells that highlight the selected date. A simple Tailwind base for date views and schedulers.
CalloutTailwind callout box in info, success, warning or danger tones with an optional bold title. Uses the note role, which suits docs, forms and setup steps.
Cancel flowcancel-flowTwo step subscription cancellation flow: ask for a reason with radio options, then confirm with a destructive button or go back. Tells users what they keep.
CardShadcn compatible card with header, title, description, action, content and footer slots, a compact size and edge to edge images. Built for Tailwind v4.
CarouselScroll snap React carousel with previous and next buttons, arrow key support and a labelled region. Shows one, two or three slides by breakpoint, no library.
Cart line itemcart-line-itemReact shopping cart row with product title, unit price, a quantity stepper and an optional remove button. Callbacks report quantity changes and removals.
Case study cardcase-study-cardCase study card with the company name, a short headline and a large result metric, plus an optional up or down delta. Good for proof sections on landing pages.
CenterLayout helper that centers content horizontally and vertically in a narrow, text-centered column. Handy for empty states, auth screens and simple heroes.
Character countcharacter-countLive React character counter that shows the current count against a limit and turns red when it goes over. Announces changes politely to screen readers.
Chart cardchart-cardCard wrapper for charts with a title, optional description and a minimum height body. Pairs with the area, bar and donut charts in a React dashboard.
Chart legendchart-legendWrapping chart legend with small color swatches and labels. Pass colors per series or fall back to accent, success, warning and danger theme tokens.
Chart tooltip cardchart-tooltip-cardTooltip card for charts showing a title and label and value rows with tabular numbers. Drop it into any chart library's custom tooltip slot.
Chat threadchat-threadScrolling chat thread for React that renders user, assistant and system messages as bubbles, auto scrolls to the newest one and uses a live log role.
Check run listcheck-run-listList of CI check runs with success, failed or running icons, monospaced job names and a status label. Looks like the checks section of a pull request.
CheckboxShadcn style checkbox on Base UI with an animated check, indeterminate state, invalid and disabled styles, and an enlarged hit area for touch.
Checkbox groupcheckbox-groupVertical wrapper that groups related checkboxes under role group with even spacing. Use it with Checkbox and labels for multi select settings.
Checkout summarycheckout-summaryTailwind order summary card listing line items and prices, a divided total row and a full width Pay now button. Fits the side column of a checkout.
Chip filterchip-filterSingle select filter chips in React that behave as a radio group, with an accent ring on the active chip. Good for quick filters above lists and tables.
Choice cardchoice-cardSelectable React card button with an icon, title and description, using aria-pressed and an accent outline when chosen. Suits plan pickers and onboarding.
Citation chipcitation-chipInline citation button for AI answers, with an accent source number and label. Link it to a source panel or popover so users can check references.
ClusterFlex layout primitive that wraps children in a row with vertical centering and a numeric gap on the 4px scale. Great for tags, buttons and meta rows.
Code blockcode-blockReact code block with zero dependency syntax coloring, a language tag, optional filename and line numbers, and a copy button that confirms Copied.
Code editor framecode-editor-frameEditor style frame with a monospaced filename tab and a code area. Wrap snippets, editors or diffs so they read as a file in your React docs or app.
CollapsibleShadcn compatible collapsible on Base UI: a full width trigger that shows or hides a panel of content. Accessible expanded state and keyboard support.
Collapsible sidebarcollapsible-sidebarSidebar with a toggle button on its edge that collapses it to a narrow rail and expands it again. The button label updates for screen readers.
Color pickercolor-pickerSwatch color picker with eight OKLCH presets, a ring on the selected swatch and listbox semantics. Works controlled or uncontrolled for theme or label colors.
Column visibility menucolumn-visibility-menuColumns dropdown for data tables with a checkbox item per column. It returns the updated list of visible column ids so you can show or hide table columns.
ComboboxShadcn style combobox: a popover select with a filter input, check mark on the chosen item and an empty message. Built on Base UI popover for React.
Command dialogcommand-dialogCommand dialog that opens the command palette in a modal from a list of commands with labels and handlers. Wire it to a Cmd K shortcut in your React app.
Command itemcommand-itemRow for command menus with a label, an optional keyboard shortcut in a kbd tag and an active highlight state. Use it to build custom command lists.
Command palettecommand-paletteCmd K style command palette in a dialog with a search field that filters commands as you type, runs the chosen action and closes. Shows an empty state.
Comment composercomment-composerComment box with a three row textarea and a Comment button that stays disabled until there is text. Submits the trimmed value and clears the field.
Comment threadcomment-threadThreaded React comment list with initials avatars, author name, timestamp and body in bordered bubbles. Pairs with the comment composer.
Commit rowcommit-rowGit commit row for React with author avatar, commit message, relative time, a short SHA badge and a copy button for the hash. Fits deploy logs.
Comparison tablecomparison-tablePlan comparison table with features as rows and plans as columns, showing check or dash icons for booleans and text for values. Scrolls on mobile.
Confirm destructiveconfirm-destructiveDestructive action confirm: a red trigger button opens a dialog with a title, warning text, Cancel and Confirm. Labels are configurable for deletes and resets.
Connected accountconnected-accountTailwind settings row for a linked third party account showing the provider and account name, with a Disconnect button. For OAuth and integrations.
Console outputconsole-outputScrollable Tailwind console panel in monospace that prints log, warn and error lines with level labels. Uses a log role and is keyboard focusable.
ContainerResponsive page container that centers content with side padding and a max width preset: sm, default, lg or full. The basic wrapper for Tailwind layouts.
Context chipcontext-chipSmall toggle chip for picking context in AI prompts or filters, with an active accent state and hover styling. Passes through all native button props.
Context menucontext-menuRight click context menu that opens at the cursor with menu items, including destructive items in red. Closes on selection or click outside, in React.
Context pillcontext-pillRounded pill for showing attached context, such as files or pages in an AI prompt, with a truncated label and an optional remove button.
Conversation sidebarconversation-sidebarReact chat history sidebar with a New chat button and a scrolling list of conversations showing title and relative time. Highlights the active chat.
Cookie bannercookie-bannerFloating React cookie consent card fixed to the corner, with a short notice and Accept and Reject buttons. It is a labelled dialog for assistive tech.
Copy buttoncopy-buttonReact copy to clipboard button that writes a value, then swaps to a check icon and Copied label for a moment. Accepts every Button variant and size.
Copy idcopy-idMonospaced ID chip that copies its value to the clipboard on click and shows a check when done. Good for API keys, order IDs and record UUIDs.
Coupon inputcoupon-inputPromo code field with an Apply button and inline success or error messages. The demo validation is easy to replace with your own check in React.
Coverage metercoverage-meterTest coverage bar with a label and percentage that turns green at 80, amber at 60 and red below. Exposed as a progressbar for screen readers.
Create api keycreate-api-keyInline form to name and create an API key, with a labelled input and a Create key button that passes the name to your handler. Pairs with the key list.
Credit balancecredit-balanceCompact credit balance pill with a small label and a large tabular figure. Shows remaining credits or usage balance for AI and pay-as-you-go apps.
Credit card inputcredit-card-inputLuhn (mod 10) checksum, the check digit rule every major card number follows.
Cta bannercta-bannerTailwind call to action banner with a heading, supporting text and a primary button that stacks on mobile and sits in a row on wider screens.
Currency inputcurrency-inputMoney input with a currency code prefix, decimal keypad on mobile and tabular numbers. Controlled via a string value to avoid rounding issues in React forms.
Danger zonedanger-zoneDanger zone settings card with a red outline, a warning that the action cannot be undone and a destructive delete button. Put it last on settings pages.
Data tabledata-tableReact data table with sortable columns, row selection, a floating bulk actions bar, hover row actions, sticky header, three densities and skeleton loading.
Date pickerdate-pickerDate picker built on the native date input, styled to match the rest of your form fields. Returns ISO date strings and supports disabled and labelled states.
Date range pickerdate-range-pickerStart and end date range picker made from two labelled date inputs. Works controlled or uncontrolled and returns a from and to object for filters and reports.
Delete account confirmdelete-account-confirmAccount deletion step with a danger alert and a confirmation field: the delete button stays disabled until the user types DELETE. Guards against misclicks.
Density toggledensity-toggleToggle group that switches between compact and comfortable density, reporting the choice to your handler. Pairs with data tables and dense list views.
Description listdescription-listSemantic dl, dt and dd list of label and value pairs in a responsive two column grid with dividers. Good for record details and summaries in Tailwind apps.
DialogShadcn compatible modal dialog on Base UI with a blurred backdrop, enter and exit animation, close button, header, title, description and a footer bar.
Diff viewdiff-viewReact code diff viewer that tints added lines green and removed lines red with plus and minus gutters, context lines and an optional filename header.
Donut chartdonut-chartSingle value donut chart in SVG that fills an accent ring to a percentage of max and prints the percent in the middle. Labelled as an image for screen readers.
Downgrade warningdowngrade-warningTailwind plan downgrade warning card with an amber border, a summary of what gets locked on the free plan, and Keep plan or Downgrade buttons.
DrawerBottom drawer that slides a sheet up from the screen edge with a titled header, close button and scrolling body, capped at 80% of the viewport height.
Dropdown menudropdown-menuShadcn compatible dropdown menu on Base UI with groups, labels, checkbox and radio items, submenus, shortcuts, separators and destructive items.
Due date chipdue-date-chipSmall Tailwind due date chip with a calendar icon that switches to a red border and icon when overdue. Use it on task cards, tickets and boards.
Editable headingeditable-headingInline editable title that looks like a large heading but is a text input. Use it for document, page or project names; works controlled or uncontrolled.
Email buttonemail-buttonSolid link button for email templates with a fixed height, padding and rounded corners. Uses an anchor so it survives email clients that strip buttons.
Email cardemail-cardContent card for transactional emails with an optional title and body text, inset from the email edges. Use it for receipts, codes and highlights.
Email footeremail-footerEmail footer with your company address and Unsubscribe and Preferences links, centered on a muted background. Covers what marketing emails need at the end.
Email headeremail-headerSimple email header band that shows your brand name on a muted background with a bottom border. Sits at the top of the email layout in React templates.
Email layoutemail-layoutEmail layout shell with a centered 560px column, rounded border and surface background. Compose it with the email header, cards, button and footer.
Email preview frameemail-preview-frameInbox style preview frame showing the sender and subject above the rendered email body. Handy for template galleries and email settings screens.
Emoji pickeremoji-pickerCompact emoji picker grid with a default set of twelve reactions or your own list, using listbox and option roles. Calls onSelect with the chosen emoji.
Empty searchempty-searchNo results state for search that echoes the query in the title and suggests trying another query or clearing filters. Built on the empty state component.
Empty stateempty-stateDashed empty state panel with an icon slot, title, description and an optional call to action button. Use it for first run screens and empty lists in React.
Empty tableempty-tableEmpty table placeholder with a dashed border, a No data yet title, helper text and an optional button to create the first row. For React tables.
Env badgeenv-badgeUppercase environment badge for production, staging or development, with production outlined in red so live systems stand out in dev tools and consoles.
Env switcherenv-switcherReact segmented control for switching between Dev, Staging and Prod environments, reporting the selected value. Fits dashboards, API consoles and deploy tools.
Error stateerror-stateReact error state panel with an alert role, a title, explanation and an optional Try again button that calls your retry handler. For failed fetches.
Event calendarevent-calendarA week and day event scheduler with overlap layout, an all-day row, a current time line and click to create.
Expandable rowexpandable-rowBordered Tailwind row that expands to reveal details on click, with a rotating chevron and aria-expanded. Can start open and takes any content.
Export dataexport-dataSettings card to request a data export, explaining what the JSON export includes and when it will be ready, with a Request export button.
Facet filterfacet-filterA titled checkbox facet group for sidebar search filters in React. Each option can show a result count, and the selected values come back as an array.
Faq listfaq-listAn FAQ section built on an accessible accordion. Pass question and answer pairs and each one expands in place, with keyboard support and a readable max width.
Feature flag togglefeature-flag-toggleA settings row for flipping a feature flag on or off: flag name, optional description and a labeled switch, wired as a controlled React component.
Feature gridfeature-gridA responsive grid of feature cards, one to three columns wide, each with an optional icon, a title and a short description. Built with React and Tailwind.
Feedback thumbsfeedback-thumbsThumbs up and thumbs down buttons for rating an answer or article. Uses aria-pressed, toggles off on a second click, and works controlled or uncontrolled.
File dropzonefile-dropzoneA React drag and drop upload zone with accept and reject states, type and size checks, image previews, per file progress, retry and screen reader updates.
File listfile-listA stacked list of file rows showing each name and metadata such as size or date, with an optional download button per item. Good for React attachment lists.
File referencefile-referenceA compact card that cites a source file with its name, monospace path and line range. Useful for code assistants, docs and AI answers that point into a repo.
File rowfile-rowA single file row with an icon, a truncated name, an optional meta line and a ghost download button with an accessible label. Styled with Tailwind.
File treefile-treeA code editor style file explorer with file icons, git status, a filter field and full tree keyboard support.
Filter barfilter-barA wrapping Tailwind toolbar for tables and lists: a search input first, your own filter controls as children, and a Clear button when onClear is set.
Floating action buttonfloating-action-buttonA round primary button fixed to the bottom right corner of the viewport for the main action on a screen. Accepts every Button prop, including icons.
Floating label inputfloating-label-inputReturn an error message, or nothing when valid. Runs on submit and after the first error.
Footer megafooter-megaA multi column site footer with a brand block and titled link groups that reflow from one to five columns. A React and Tailwind footer for marketing sites.
Footer navfooter-navA slim one line footer with the brand name on the left and a wrapping set of links in a labeled nav element. Fits app shells, docs and small landing pages.
Forgot password formforgot-password-formA password reset request card with one email field and a full width Send reset email button, composed from AuthCard, FormField and Input in React.
Form fieldform-fieldA wrapper that pairs any input with its label, required marker, help text and an error message announced with role alert. Keeps React forms consistent.
Funnel chartfunnel-chartA funnel chart with stage bars laid out horizontally or vertically, conversion rates and drop-off between stages, an optional comparison series and bars that spring to new values when the data changes.
Funnel stepsfunnel-stepsA conversion funnel drawn as labeled horizontal bars scaled to the largest step, with formatted counts per stage. Suited to signup and checkout analytics.
Gantt chartgantt-chartA project timeline with day and week scales, a today line, progress fills, dependency arrows, a sticky task column and focusable bars.
Gantt rowgantt-rowOne row of a Gantt timeline: a task label beside a track with a bar placed by start and end values on a shared scale. Stack rows to build a React roadmap.
Gauge chartgauge-chartA semicircle SVG gauge that fills to a value against a max and prints the percentage in the center. Exposed as an image with an accessible label for dashboards.
Goal ringgoal-ringA circular progress ring that shows how far along a goal is, with the percentage in the middle and a caption below. Handy for fitness, sales or weekly targets.
HeadingA heading primitive that renders h1 through h6 with a matched type scale, tuned letter spacing and medium weight. Pick the level with the as prop in React.
Health indicatorhealth-indicatorA status dot and label for service health with operational, degraded and down states mapped to success, warning and danger colors. Made for status pages.
Heatmap cellheatmap-cellA square heatmap cell whose fill blends from a muted base to the accent color by an intensity from 0 to 1, with an aria label. Tile it for activity grids.
HeroA centered landing page hero with an optional eyebrow, a large headline, supporting copy and up to two call to action buttons. A plain Tailwind starting point.
Horizontal bar charthorizontal-bar-chartA lightweight horizontal bar chart where each row shows a label, a rounded bar scaled to the largest value and the number. No chart library, just Tailwind.
Hover cardhover-cardA card that appears below a trigger on mouse hover to preview extra detail such as a user profile or link summary. A light take on the shadcn hover card.
Icon buttonicon-buttonA square React button for icon only actions in small, default and large sizes with every Button variant. Its aria-label prop is required, so it is always named.
Image cropperimage-cropperLeft edge in source pixels, measured on the image after `rotation`.
Image galleryimage-galleryA responsive photo grid of square tiles, two columns on mobile and three on larger screens, each image cropped to fill. Built with React and Tailwind.
Image lightboximage-lightboxA clickable image thumbnail that opens a full screen modal of the picture with a dimmed backdrop and a close button. Handy for screenshots and product shots.
Image uploadimage-uploadA single image picker that starts as a drag and drop zone, then swaps to a large preview with a remove button. Returns an object URL and the File in React.
Impersonation bannerimpersonation-bannerA top of page bar telling support staff which user account they are viewing as, with an Exit button to end the session. Common in admin and support tools.
Incident bannerincident-bannerA full width Tailwind status bar announcing an outage with minor, major and critical severity colors, the incident title and a link to your status page.
Infinite scrollinfinite-scrollLoad the next page when a sentinel scrolls into view, with a loading row, an end of list message and a Load more button as the accessible fallback.
Inline alertinline-alertAn inline React message box in neutral, success, warning and danger tones with a matching icon, an optional title and body text. Announced with role alert.
Inline cell editinline-cell-editClick to edit table cell text: the value turns into an input on click, saves on Enter or blur and cancels on Escape. Built for editable React data grids.
Inline code diffinline-code-diffA two line code diff showing the removed line in red with a minus and the added line in green with a plus, in monospace. Suits AI edit suggestions.
InputThe base text input with sm, default and lg sizes and designed hover, focus, disabled, read only and invalid states. A drop in shadcn style input for React.
Input affixinput-affixA text input with leading and trailing slots for icons, units or buttons, sharing one focus ring and invalid state across the field. Tailwind styled.
InsetA recessed panel with a sunken background, rounded border and responsive padding for grouping secondary content, code samples or previews inside a card or page.
Integration cardintegration-cardAn app integration tile with the service name, a short description, a Connected or Available badge and a Connect or Manage button. Built in React.
Interactive area chartinteractive-area-chartA React SVG area chart with a crosshair that follows the pointer or arrow keys, showing the value and percent change against a dashed comparison line.
Invite membersinvite-membersA team invite panel with an email input, a Send button and badges for pending invitations. A starting point for workspace member management in SaaS settings.
Invoice detailinvoice-detailAn invoice card with the number, date, a paid, open or void status badge, itemized line amounts and a bold total row. Built with React for billing pages.
Invoice listinvoice-listA bordered list of invoices showing number, date, amount and a paid, open or void status badge on each row. Fits the billing history in account settings.
Ip allowlistip-allowlistAn editor for IP and CIDR allowlists: a monospace list with a remove button per entry plus an input and Add button that skips duplicates. Built in React.
Issue cardissue-cardA compact issue tracker card with a monospace ticket key, status and priority badges, a title and an assignee line. Fits Linear or Jira style boards.
Issue keyissue-keyA monospace ticket identifier such as MD-241 that renders as plain text or, given an href, as a link with an accent hover underline. For issue lists.
Join workspacejoin-workspaceA centered card for joining a team workspace with an invite code: heading, helper text, a monospace code input and a full width Join button. Tailwind styled.
Json viewerjson-viewerA collapsible JSON tree with syntax colours, item counts, copy value and copy path on hover, search highlighting and full keyboard navigation.
Kanban boardkanban-boardA horizontally scrolling Kanban board built from column data: each column shows its title, a card count and stacked cards with a title and optional meta line.
Kanban columnkanban-columnA single Kanban lane with a title, an optional count badge and a slot for any cards you render as children. Compose several to build your own React task board.
KbdA keyboard key cap for showing shortcuts, with a raised edge and room for icons, plus a KbdGroup wrapper for combos like Cmd K. Renders a semantic kbd element.
Keyboard shortcutskeyboard-shortcutsA keyboard shortcuts cheat sheet in a dialog, opened with the ? key or a trigger button, with search and the right modifier glyphs for the viewer's platform.
Kpi rowkpi-rowA responsive row of KPI tiles, up to four across, each with a label, a large value and an up or down delta. Drop it at the top of a SaaS analytics dashboard.
LabelA form label that dims and blocks pointer events when its peer input or group is disabled. Native label API, styled with Tailwind like the shadcn label.
Language pickerlanguage-pickerA grid of language options exposed as an accessible listbox, with the selected language outlined in the accent color. Plug it into locale or profile settings.
Latency badgelatency-badgeA monospace millisecond badge that turns green under 100ms, amber under 400ms and red above. Useful for API monitors, model responses and status dashboards.
Light providerlight-providerA page wide light source that follows the pointer and drifts when idle, driving shadows via CSS variables, plus a hairline, glass, metal and paper switcher.
Line chartline-chartA multi series SVG line chart with smooth curves, a dashed hairline grid and dots on the last point of each line, colored from chart tokens. No library.
LinkA styled anchor with the accent color, underline on hover and a visible focus ring. Accepts every native anchor prop, so it works with Next.js or plain hrefs.
Link previewlink-previewA rich link card with an optional 2:1 cover image, title, two line description and the URL, opening in a new tab. Good for chat messages, posts and bookmarks.
List itemlist-itemA flexible list row with leading and trailing slots around a truncated heading and description, split by hairline borders. Build settings or contact lists.
Live cursors barlive-cursors-barA multiplayer presence strip with overlapping colored avatars per collaborator and an editing now count. Suits docs, whiteboards and real time React editors.
Loading overlayloading-overlayA translucent overlay that covers its parent with a centered spinner and label while data loads, inheriting the parent radius and announced with role status.
Loading tableloading-tableA skeleton placeholder for data tables with configurable rows and columns, a header row and aria-busy so assistive tech knows content is loading.
Logo cloudlogo-cloudA centered, wrapping row of customer or partner logos with names in muted text and an optional mark each. Adds social proof to a Tailwind landing page.
Magic link formmagic-link-formA passwordless sign in card with an email field and a Send link button that passes the address to onSend. Built from AuthCard, FormField and Input.
Markdown editormarkdown-editorA markdown editor with a toolbar that wraps the selection, Cmd/Ctrl+B and I shortcuts, write, split and preview modes, a live preview rendered without innerHTML, and a word count.
Markdown renderermarkdown-rendererA small React renderer for AI output that splits text into paragraphs on blank lines and turns fenced code blocks into scrollable monospace panels.
MarqueeAn infinitely scrolling Tailwind strip that loops its children horizontally, duplicated for a gapless cycle, and stops when users prefer reduced motion.
Masked inputmasked-inputFormats a value with a mask, e.g. applyMask("(999) 999-9999", "5550102030") gives "(555) 010-2030".
Masonry gridmasonry-gridA masonry layout for React that keeps source order: a CSS grid with measured row spans, so keyboard and screen reader order match the visual flow.
Mention inputmention-inputA comment textarea that opens a suggestion list when you type @, filters names as you keep typing and inserts the chosen @mention. For React comments.
MenubarA desktop style app menubar built on Base UI: a row of triggers that each open a dropdown of items, with keyboard navigation between menus. shadcn compatible.
Merge boxmerge-boxA React pull request merge panel with a success or warning callout for check status and a full width Merge button that stays disabled until checks pass.
Message actionsmessage-actionsA row of ghost icon buttons for chat replies: copy, retry, good response and bad response, each with an aria label and callback. Place it under AI messages.
Message bubblemessage-bubbleA React chat message for user, assistant and system roles: user turns sit in a right aligned capsule, assistant replies read as prose, with a streaming cursor.
MeterA horizontal gauge bar using role meter with aria value attributes, an optional label and a fill clamped to 100 percent. For storage, quota and usage limits.
Metric deltametric-deltaA tiny percentage change indicator with an up arrow in green for gains and a down arrow in red for losses. Pair it with stat cards, KPI tiles and table cells.
Mobile action sheetmobile-action-sheetAn iOS style action sheet that rises from the bottom with a list of actions, destructive items in red, a Cancel button and a backdrop that dismisses on tap.
Mobile nav drawermobile-nav-drawerA hamburger button that opens a right side navigation drawer as a modal dialog, with a close button and links that dismiss it on tap. Built in React.
Model comparemodel-compareA comparison table for AI models listing name, latency with a color coded badge, cost and a quality note per row. Helps users pick between LLM providers.
Model pickermodel-pickerA dropdown for choosing an AI model, built on the Select component with an accessible trigger and a placeholder. Pass an array of models and read the chosen id.
Morph panelmorph-panelA React button that morphs into the panel it opens on a spring, blurring the label out and the form in. Ships with a feedback form and closes on Escape.
Multi selectmulti-selectA multi select dropdown in a popover with check marks on chosen items and removable chips below the trigger. Works controlled or uncontrolled in React.
Nav marketingnav-marketingA sticky marketing header with a translucent blurred background, brand link, nav links that hide on mobile and Sign in and Get started buttons. Tailwind built.
Navigation menunavigation-menuA site navigation menu built on Base UI with triggers that open rich dropdown panels in a shared viewport, plus link items. Mirrors the shadcn navigation menu.
Nested navnested-navA collapsible tree navigation built from nested node data, indented by depth with rotating chevrons on items that have children. Fits React docs sidebars.
Newsletter signupnewsletter-signupAn inline email capture form with a required email field and a Subscribe button that stack on mobile and sit side by side on wider screens. Tailwind styled.
Not found statenot-found-stateA 404 state with the error code, a Page not found heading, a short explanation and Go home and Open gallery buttons, centered in a card. Built in React.
Notebook cellnotebook-cellA Jupyter style notebook cell with a Run button beside a code editor frame and an optional output panel below. Good for interactive docs and playgrounds.
Notification inboxnotification-inboxA bell with an unread count that opens a notification popover: All and Mentions tabs, unread dots, mark all read, type icons and an empty state. Built in React.
Notification itemnotification-itemA single notification row with an unread dot and tint, a truncated title, relative time and a short body line. Stack it in React inboxes and activity feeds.
Notification preferencesnotification-preferencesA notification settings list of labeled switches for email digests, product updates and security alerts. A simple React start for preference pages.
Number inputnumber-inputA numeric stepper with minus and plus buttons around a centered input that clamps to min and max and moves by a custom step. Works controlled or uncontrolled.
Number rollnumber-rollAn odometer style animated number where each digit rolls on a spring and only changed digits move. Supports Intl formatting, trend tint and reduced motion.
Offline banneroffline-bannerA full width amber banner shown when the app loses its connection, with a wifi off icon, a note that changes will sync later and an optional Retry button.
Offline stateoffline-stateAn offline status card with a warning dot, a You are offline heading, a note on what still works and a Retry connection button. For PWA and sync apps.
Onboarding checklistonboarding-checklistA Get started card with a list of setup tasks that toggle between done and pending on click, showing a check box and a strikethrough on completed items.
Onboarding wizardonboarding-wizardA three step React onboarding flow that walks new users through creating a workspace, inviting teammates and a done screen, with a stepper on top.
Order summaryorder-summaryA checkout summary card listing line items such as subtotal, shipping and tax, then a separator and a bold total. Built with React for cart pages.
Org chartorg-chartA collapsible organisation chart with connector lines, initials avatars, team colours, per node counts and arrow key navigation.
Org switcherorg-switcherA popover switcher for moving between organizations or workspaces, showing the current name, a check on the active item and an optional plan label per org.
Otp inputotp-inputA React one time code input where one real input powers the slots, so paste, SMS autofill and screen readers work natively. Has groups, error shake and success.
Page headerpage-headerA Tailwind page title block with an h1, an optional description and a wrapping slot for action buttons on the right, set off by a bottom border.
PaginationA pagination nav with Prev and Next buttons that disable at the edges and numbered page buttons that mark the current page with aria-current. Built in React.
Password inputpassword-inputA password field with a show and hide toggle inside the input, an eye icon that swaps state and an accessible label. Supports sm, default and lg sizes in React.
Password strengthpassword-strengthA React password field with a four step strength meter and a live rule checklist. Announces the score politely and accepts your own scorer such as zxcvbn.
Payment method cardpayment-method-cardA saved card row showing the card brand, last four digits and expiry date in monospace, with an Edit button. Fits the payment methods area of billing.
Peek panelpeek-panelA right side detail panel with a titled header, a close button and a scrollable body for previewing a record without leaving the list. Tailwind styled.
Permission chippermission-chipA small uppercase chip for access levels: admin, write or read. Use it in member lists, API key tables and sharing dialogs to show what a user or token can do.
Permission deniedpermission-deniedA 403 style access card explaining that admin rights are needed, with Request access and Switch workspace buttons. Use it wherever a route is role gated.
Phone inputphone-inputA telephone number field with type tel, a numeric keypad on mobile, tel autocomplete, tabular digits and a default aria label. Styled like the React base input.
Pie chartpie-chartAn SVG pie chart with leader line labels, a legend and slices that pull out on hover or focus.
Pinned messagepinned-messageA highlighted pinned note for chat channels and threads with a pin icon, a Pinned by author line and the message body on an accent tinted Tailwind background.
Plan cardplan-cardA pricing plan card with the plan name, a large price per period, a feature list and a full width call to action. A highlighted prop marks the recommended tier.
Plan comparisonplan-comparisonA Free versus Pro comparison table with a row per feature and check or dash icons in each plan column. Shows what an upgrade unlocks on Tailwind pricing pages.
PopoverA floating React panel anchored to a trigger, built on Base UI with side and align options, collision aware positioning, title and description parts.
Presence dotpresence-dotA small colored dot for user status: online, away, busy or offline, exposed with role status and an aria label. Overlay it on avatars in chat and team lists.
Press quotepress-quoteA centered press or testimonial quote using figure, blockquote and figcaption, with a large quoted line and an uppercase source. Adds proof to landing pages.
Pricing tablepricing-tableA three column pricing section that renders a PlanCard for each tier you pass in, stacking on mobile. Mark one plan as highlighted to steer visitors toward it.
Pricing togglepricing-toggleA Monthly and Yearly billing period switch built on a segmented control, with a Save 20% with yearly note underneath. Pairs with pricing tables and plan cards.
Priority pickerpriority-pickerA radio group of priority chips, Low, Medium, High and Urgent, each with a colored dot and aria-checked state. Built for issue trackers, tasks and ticket forms.
Product cardproduct-cardA storefront product tile with a square image, an optional corner badge like Sale or New, the product title, price and an Add to cart button when onAdd is set.
Profile formprofile-formAn account profile form with a display name input, a bio textarea and a Save profile button, composed from FormField, Input and Textarea in React.
ProgressA linear progress bar built on Base UI with track, indicator, label and value parts, a default aria label and smooth width transitions. Matches shadcn progress.
Progress circleprogress-circleA compact circular progress indicator drawn in SVG with a configurable size, an accent arc, an accessible label and the percentage in monospace below it.
Prompt inputprompt-inputAn AI chat composer that grows with its content, sends on Enter, adds a newline on Shift Enter and has attach, toolbar and send controls. Built for React.
Prompt input attachmentsprompt-input-attachmentsThe AI prompt composer with an Attach file button and helper text above it, forwarding every PromptInput prop. For chat apps that accept documents or images.
Prompt libraryprompt-libraryA searchable list of saved prompts that filters by title, body and tag as you type and returns the chosen prompt through onSelect. Useful in React AI apps.
ProseA Tailwind typography wrapper for raw HTML or MDX that styles headings, muted paragraphs, links, lists, inline code and blockquotes at a readable measure.
Publish barpublish-barReact publish bar with a draft, scheduled or published status badge, an autosave note, and Preview and Publish buttons wired to an onPublish callback.
Qr codeqr-codeA dependency free QR code rendered as crisp SVG, with error correction levels, a logo well and a one click SVG download.
Quantity stepperquantity-stepperReact quantity stepper with minus and plus buttons around a tabular count. Clamps to min and max, disables at the limits, and works controlled or uncontrolled.
Query builderquery-builderFilter query builder that chains field, operator and value clauses with AND. Add or remove rows, each with labelled selects, built in React and Tailwind.
Quota barquota-barCompact quota bar showing a label, used over max with locale formatting, and a thin accent progress track exposed as an ARIA progressbar for plan limits.
Radar chartradar-chartSVG radar chart that plots normalized 0 to 1 values on labelled axes over four concentric grid rings. Themed with currentColor and labelled for screen readers.
Radial chartradial-chartA radial bar chart of concentric progress rings with a legend, a rolling centre total and spring animated values.
Radio groupradio-groupAccessible radio group on Base UI with keyboard navigation, a springy checked dot, larger hit areas, and invalid and disabled states. A shadcn-style drop in.
Range sliderrange-sliderTwo-thumb range slider for picking a min and max, with value bubbles on both thumbs while dragging, optional marks, a formatter and an onValueCommitted hook.
RatingStar rating input rendered as a radiogroup, with one labelled radio per star, a configurable max, disabled state, and controlled or uncontrolled value in React.
Reaction barreaction-barRow of emoji reaction pills with counts, where active reactions get an accent border and aria-pressed. Toggle callbacks suit comments and chat threads.
Read receiptread-receiptMessage read receipt icon that shows a single check for sent, a double check for delivered, and an accent double check once read. Labelled for screen readers.
Reasoning blockreasoning-blockCollapsible AI reasoning block, folded by default. The title shimmers while the model is thinking, then reads Thought for Ns, with an animated height reveal.
ReceiptMonospace payment receipt card with an order id, itemized amounts in tabular numerals and a bold total row. Built with Tailwind for checkout and billing pages.
Regenerate barregenerate-barFooter bar for AI answers with a Not quite right prompt, a Regenerate button with a refresh icon, and an optional Edit prompt action when onEdit is set.
Region pickerregion-pickerDeployment region picker with selectable cards for each region and its latency in milliseconds. Uses radio semantics and an accent tint for the chosen one.
Relative timerelative-timeReact relative timestamp that renders just now, 5m ago, 3h ago or 2d ago inside a semantic time element, with the full local date shown as a hover title.
Reset password formreset-password-formReset password card with new password and confirm password fields and a full-width Update password button, built from AuthCard, FormField and Input in React.
Resizable panelsresizable-panelsSplit panes with draggable, keyboard operable handles, min and max sizes, snap to collapse and nested groups in either direction.
Resource quota gridresource-quota-gridResponsive grid of quota cards, one per resource, each with a labelled usage bar showing used over max. Useful for infra limits like builds, storage and seats.
Retry blockretry-blockError block that pairs a danger inline alert with a Try again button and an onRetry callback. Defaults to a request failed message you can override in React.
Review request cardreview-request-cardCode review request card with a Review requested badge, pull request title, repo name, author avatar, and Review and View diff buttons for developer dashboards.
Rich text toolbarrich-text-toolbarFormatting toolbar with bold and italic toggles, link, bullet and numbered list buttons, and a divider. Uses role toolbar with labelled icon toggles in React.
Role permission matrixrole-permission-matrixRole and permission matrix with roles as columns and permissions as rows, each cell a labelled checkbox. Scrolls sideways on small screens, styled in Tailwind.
Role pickerrole-pickerTeam role picker built on the radio group, offering Owner, Admin and Member options with linked labels. Drop it into invite dialogs and member settings forms.
Row selectionrow-selectionRow selection checkbox for data tables with checked and indeterminate states and a default Select row label. Pairs with a header checkbox for select all.
Sankey chartsankey-chartAn SVG sankey diagram that lays nodes out in columns computed from the links, draws curved ribbons, labels nodes with values, highlights a node's flows on hover or focus, and includes a hidden table.
Saved viewssaved-viewsSaved views list for filters, rendered as a listbox of named views with item counts and a highlighted active view. Works controlled or uncontrolled in React.
Schema field rowschema-field-rowAPI schema field row with a monospace field name, a required badge, the type and a description, in three columns on desktop for docs and reference pages.
Scroll areascroll-areaCustom scroll area on Base UI with a thin rounded thumb, vertical or horizontal scrollbars and a focus ring on the viewport. A shadcn-compatible ScrollArea.
Search inputsearch-inputSearch input with a leading search icon and a clear button that appears once there is text. Comes in sm, default and lg sizes, controlled or uncontrolled.
Search with resultssearch-with-resultsSearch field with a results list below it showing titles and optional subtitles, plus a No results state. Emits onSearch as you type so you can filter in React.
Seat managerseat-managerTeam seat manager card showing seats used out of the plan, an Invite button, and a member list with name, email and role badge. Built in React for billing.
Secret revealsecret-revealMasked secret field for API keys with an eye toggle to reveal or hide the value and a copy button for the full key. Monospace, compact, built with Tailwind.
Section headersection-headerTailwind section header with a title, optional muted description and a right-aligned actions slot that wraps on narrow screens. Use it above cards and tables.
Segmented controlsegmented-controlSegmented control with a raised thumb that springs between options, arrow, Home and End key support, icons, badges, three sizes and reduced motion support.
SelectSelect dropdown on Base UI with a trigger in three sizes, an animated popup, groups, labels, separators, a check indicator and scroll arrows. Shadcn-compatible.
SeparatorHairline separator on Base UI that draws a 1px rule horizontally or vertically, stretching to fill its container. A drop-in shadcn Separator for React layouts.
Server error stateserver-error-state500 error state card with a danger outline, a short explanation, and Retry and Copy request id buttons so users can recover or reach support with context.
Session listsession-listActive sessions list showing each device and location, marking the current device and giving other sessions a Revoke button. A React account security block.
Settings layoutsettings-layoutSettings page layout with a 200px side nav column and a content area, plus a SettingsSection for titled groups divided by hairlines. Tailwind grid based.
SheetSlide-out sheet from the left, right, top or bottom with a backdrop, a titled header, a close button and a scrollable body, rendered as a modal dialog in React.
Shipping addressshipping-addressShipping address form with full name, street address, city and postal code fields, each with the right autocomplete attribute for browser autofill at checkout.
Shortcut cheat sheetshortcut-cheat-sheetKeyboard shortcut cheat sheet listing actions next to their key combinations rendered as Kbd keycaps. Pass your own rows or use the default command palette set.
SidebarApp sidebar shell with a collapsed icon-only width and SidebarNavItem buttons that show icons, truncated labels and an active state. Built with Tailwind.
Sidebar sectionsidebar-sectionSidebar section that groups nav items under an optional small uppercase heading with tight spacing. Stack several inside the Sidebar to organize app navigation.
Sign up formsign-up-formCreate account form with GitHub and Google buttons, required name, email and password fields, a submit button and a Sign in link, all inside an AuthCard.
Signature padsignature-padDraw a signature with mouse, pen or finger on a canvas with pressure aware strokes, undo and clear, a typed name fallback and PNG export for forms.
SkeletonTailwind skeleton loader with a sunken plate and a soft sheen that sweeps every 1.6s, plus a SkeletonCard preset with title, text lines and a media block.
Skip linkskip-linkSkip to content link that stays visually hidden until focused, then appears fixed in the top corner so keyboard users can jump past navigation in any React app.
Slash command menuslash-command-menuReact slash command menu that filters commands by the typed query, shows each as /name with an optional hint, and falls back to a No commands message.
SliderSlider on Base UI with a hairline rail, a keycap thumb, a value bubble while dragging, optional labelled marks, Intl number formatting and vertical support.
Social auth rowsocial-auth-rowTwo-column row of Continue with GitHub and Continue with Google buttons with click handlers, ready to sit above email fields on sign in and sign up screens.
Social proofsocial-proofSocial proof row of up to five overlapping avatars with initials fallback, next to a count label like 2,000 teams. Built in React for landing page heroes.
Sortable headersortable-headerSortable table header button that shows an up, down or neutral arrow for the current sort direction and calls onToggle on click. Pairs with any Tailwind table.
Sortable listsortable-listDrag to reorder a list in React with Motion Reorder, plus Arrow key reordering from the handle and polite announcements of every move for screen readers.
Source cardsource-cardCitation source card for AI answers showing a title, a source badge, the truncated URL and a short snippet. List references under a generated response.
Sparkline setsparkline-setResponsive grid of metric cards, each with a label, value, delta chip and a small area chart sparkline. Good for a KPI overview at the top of a React dashboard.
SpinnerLoading spinner in sm, default and lg sizes with role status and an accessible Loading label. Drop it into buttons, cards or full page states in a Tailwind app.
Split buttonsplit-buttonSplit button with a primary action and a chevron that opens a dropdown of secondary actions, including destructive items. The menu matches the button width.
Split flapsplit-flapSplit-flap display that flips each character through the alphabet like a departure board, with a column ripple, tones, sizes and reduced motion support.
Split panesplit-paneStatic two-column split pane that stacks on mobile and sits side by side from md up, with a hairline divider. Handy for compare views and editor previews.
Sql result tablesql-result-tableSQL query result table with uppercase column headers, monospace cells and horizontal scroll for wide results. Built for database consoles and admin tools.
Sso provider cardsso-provider-cardSSO provider card with a name, description, Configured or Not set badge, an enable switch and a Configure button. A React block for SAML and OIDC settings.
StackVertical stack layout primitive that arranges children in a flex column with a gap prop from 1 to 8 on a 4px scale. Accepts all normal div props in React.
Stack tracestack-traceStack trace block that shows an error trace in a monospace pre with a danger tint and scroll for long output. Useful in error pages, logs and debug panels.
Stacked bar chartstacked-bar-chartStacked bar chart that splits each column into colored series segments with hover titles, category labels underneath and a series legend. Uses chart CSS tokens.
Stat cardstat-cardReact stat card with a label, optional icon, a large tabular value and a delta chip colored by its sign, with invertDelta for metrics like churn or latency.
Stat sparklinestat-sparklineMetric card with a label, a large value, a signed delta and an edge-to-edge area sparkline that turns red when the trend is down. Built for React dashboards.
Stats stripstats-stripTailwind stats strip of centered value and label cells split by hairlines, two columns on mobile and four on desktop. Shows traction numbers on landing pages.
Status badgestatus-badgeTailwind status badge with a tinted fill, hairline border and colored dot in neutral, success, warning, danger, accent and info tones that read as one set.
Status dotstatus-dotSmall status dot in neutral, success, warning, danger and accent tones, built with cva. Place it next to labels for online, healthy or failing indicators.
Step progressstep-progressStep progress bar made of segments that fill in accent for completed and current steps, with small labels under each. Fits checkout and onboarding flows.
StepperNumbered stepper for multi-step forms that shows each step as a bar and a label, highlighting completed and current steps. Semantic ordered list in React.
Sticky barsticky-barSticky bottom action bar with a translucent blurred background and a hairline top border. Keeps save, cancel or checkout actions in reach on long pages.
Sticky columnsticky-columnSticky table column wrapper that pins content to the left or right edge with a solid background and divider while the rest of a wide table scrolls horizontally.
Stop generatingstop-generatingStop generating button with a filled square icon and an onClick handler, for cancelling a streaming AI response mid-answer in chat interfaces built with React.
Streak calendarstreak-calendarStreak calendar showing a 28-day grid in seven columns, with active days filled in accent. Useful for habit tracking, learning apps and activity views.
Streaming cursorstreaming-cursorBlinking caret that sits inline at the end of streaming text, sized to the line and hidden from screen readers. Signals an AI response is still arriving.
Streaming messagestreaming-messageChat message bubble that renders partial AI output with a blinking caret at the end, for showing token-by-token streaming responses in a Tailwind chat UI.
Suggestion chipssuggestion-chipsRow of rounded suggestion chips such as Summarize or Find bugs that call onSelect when clicked. Use them as prompt starters under a React AI chat input.
SwitchSwitch on Base UI whose thumb stretches on press then springs across, with sm and default sizes, a loading spinner state and an optional clickable label row.
TableTable primitives for header, body, footer, row, head, cell and caption, wrapped in a horizontal scroll container. Same API as the shadcn Table, in Tailwind.
Table of contentstable-of-contentsA sticky table of contents that spies on headings while you scroll, with a marker that glides to the active item and smooth scroll on click.
Table paginationtable-paginationTable pagination footer showing Page X of Y with previous and next icon buttons that disable at the first and last page. Wire it to onPageChange in React.
Table toolbartable-toolbarToolbar above a data table with a search input on the left and a right slot for filters, view toggles or export buttons. Wraps cleanly on narrow screens.
TabsTabs on Base UI with a raised thumb or a line underline that springs to the active tab, optional count badges, vertical orientation and roving keyboard focus.
Tags inputtags-inputReact tags input that adds a chip on Enter or comma, skips duplicates, removes the last tag on Backspace and gives each chip a labelled remove button.
Tax fieldstax-fieldsCheckout tax fields with country and a monospace VAT or EIN tax ID input in a two-column grid. Drop it into billing address forms for business customers.
Team member rowteam-member-rowTeam member row with an initials avatar, name, email and a role badge, truncating cleanly in narrow lists. Built for team pages and member management in React.
Terminal windowterminal-windowTerminal window frame with traffic light dots, a title bar and a monospace body for commands and output. A Tailwind block for install steps, CLI docs and demos.
TestimonialTestimonial card with a quote, avatar with initials fallback, name and role, using semantic figure and blockquote markup. Built in Tailwind for landing pages.
TextText paragraph primitive with muted, subtle and mono variants on top of your base type styles. Keeps secondary copy and inline technical text consistent.
TextareaMultiline textarea with a 96px minimum height, comfortable line height, hairline border, focus ring and subtle placeholder. A shadcn-compatible Textarea.
Theme pickertheme-pickerLight, dark and system theme picker as a segmented radiogroup that toggles the dark class on the root element for Tailwind dark mode and reports it to onChange.
Thinking blockthinking-blockReact Thinking panel with a chevron header and aria-expanded that reveals the model's intermediate reasoning in muted text. Collapsed by default in chat.
Time pickertime-pickerReact time picker built on the native time input, styled to match the other inputs, with a controlled value, onChange, disabled state and an aria-label.
TimelineTailwind vertical timeline with a hairline rail, a dot per event, titles, optional descriptions and right-aligned timestamps for activity feeds and changelogs.
ToastToast notifications with a toast() API for success, error, warning and promise states. The Toaster stacks cards, fans them out on hover and pauses timers.
TocTable of contents nav with anchor links indented by heading level and a highlighted active item. Pair it with scroll tracking for docs and long articles.
ToggleTwo-state toggle button on Base UI with sm, default and lg sizes and a pressed style. A shadcn-compatible Toggle for toolbar actions like bold or mute in React.
Toggle grouptoggle-groupToggle group on Base UI that wraps Toggle buttons for single or multiple selection with shared keyboard navigation. Use it for text formatting or view modes.
Token usage metertoken-usage-meterLLM token usage meter showing tokens used against a monthly limit, a labelled progress bar and a percent of budget note with the reset date. Useful in AI apps.
Tool call cardtool-call-cardAgent tool call card showing the tool name, argument preview, duration and a running, done or failed status chip, with collapsible monospace output below.
Tool call collapsedtool-call-collapsedCompact collapsed tool call row with a rotating chevron and monospace tool name that expands to show its details. Keeps agent traces tidy inside chat threads.
Tool result paneltool-result-panelTool result panel with the tool name, a success, error or running status badge and the output shown in a JSON code block. Built in React for AI agent UIs.
TooltipReact tooltip on Base UI with a provider for delay, a trigger, and content that positions on any side with an arrow and portal. Drop-in shadcn Tooltip API.
TopbarApp top bar that is 56px tall with a title or custom left content and a right slot for actions, avatars or search. Sits above the main content in dashboards.
Trace waterfalltrace-waterfallReact trace waterfall that draws each span as a bar offset by start time and scaled by duration, indented by depth with a millisecond label for observability.
Tree viewtree-viewNested tree view with expandable nodes, rotating chevrons, depth indentation and ARIA tree roles. Suited to file explorers and nested category lists in React.
Treemap charttreemap-chartA squarified SVG treemap with one level of grouping, labels that hide in small cells, hover and keyboard focus with a value tooltip, and a hidden data table.
Trial bannertrial-bannerTrial banner with a days left headline, a short note on what stays unlocked and an Upgrade button, on an accent tinted strip. Built for SaaS billing nudges.
Two factor setuptwo-factor-setupTwo-factor setup card with a QR code area, a one-time code input and a Verify and enable button, guiding users through linking an authenticator app in React.
Two factor verifytwo-factor-verifyTwo-factor verification screen with a one-time password input and a full-width Verify button inside an auth card. Use it as the second step after sign in.
Typing indicatortyping-indicatorTailwind typing indicator with three pulsing dots in a rounded pill, staggered by 120ms, with role status and a Typing label. Shows someone is replying in chat.
Upgrade promptupgrade-promptUpgrade prompt card with a title, a short description of what the paid plan unlocks and an Upgrade button. Place it where a free user hits a gated feature.
Uptime baruptime-barStatus page uptime bar with one cell per day over 90 days, green when operational and red on degraded days, and the uptime percentage above. Built in Tailwind.
Usage breakdownusage-breakdownUsage breakdown listing several metered items, each with its label, used over limit and a thin accent bar. Use it on billing pages to show where plan limits go.
Usage meterusage-meterSingle usage meter with a label, used over limit count and a Progress bar linked by aria-labelledby. Handy for API calls, storage or seats on billing pages.
User chipuser-chipReact user chip showing a small avatar with initials fallback and the person's name, plus an optional remove button. Good for assignees, mentions and pickers.
Version badgeversion-badgeVersion badge that shows a v-prefixed release number with an optional stable, beta or canary channel pill, each tinted differently, for docs and changelogs.
Vertical tabsvertical-tabsVertical tabs with a 180px tab list on the left and the active panel on the right, using tab and tabpanel roles. Stacks on mobile. Built for settings screens.
Video player chromevideo-player-chromeVideo player chrome with a 16:9 stage, a centered play and pause button, a volume icon, a playback progress bar and a title. Bring your own video in React.
Virtual listvirtual-listA windowed list that renders only the rows in view, with fixed or measured row heights, overscan, keyboard row navigation and scroll to index.
Virtualized listvirtualized-listVirtualized list that renders only the visible rows plus a small buffer, using a fixed item height and absolute positioning. Keeps thousands of React rows fast.
Visually hiddenvisually-hiddenVisually hidden wrapper that keeps content available to screen readers while hiding it on screen via sr-only. Use it for icon button labels and extra context.
Vote controlvote-controlUpvote and downvote control with a score between two chevrons, aria-pressed states and click again to undo. Built in React for forums and feedback boards.
Waffle chartwaffle-chartWaffle chart that fills a 10 column grid of squares to show a value out of a total, with a label and count above. Clear for adoption rates and percentages.
Webhook listwebhook-listWebhook endpoints list with an Add endpoint button, monospace URLs, subscribed events and an active or paused badge per row. Built for developer settings pages.
Welcome screenwelcome-screenReact onboarding welcome card with an eyebrow, headline, short intro, three numbered getting started steps and primary and secondary buttons for a first run.
WellA recessed Tailwind panel with a sunken background, hairline border and inner highlight. Use it to set apart notes, code output or secondary content.
Window chromewindow-chromeA macOS style window frame for React with three traffic light dots, a truncated title bar and a padded content area for framing demos and screenshots.
Wishlist buttonwishlist-buttonA Tailwind heart icon button for product cards that toggles a wishlist state. It sets aria-pressed and switches its label between add and remove.
Workspace createworkspace-createA compact create workspace form in React with a required name field, a URL slug input and a submit button wired to an onCreate callback.