Primitives
Every SevenUI primitive, built on Base UI and installed into your project as source code through the shadcn CLI.
Accordion
A vertically stacked set of interactive headings that each reveal an associated panel of content, built on the Base UI Accordion primitive.
Alert
Displays a message with optional title and description for the user.
Alert Dialog
A modal dialog that interrupts the user with important content and expects a response, built on the Base UI Alert Dialog primitive.
Aspect Ratio
Displays content such as images, video, and maps inside a box that keeps a fixed aspect ratio as its width changes.
Attachment
Displays file attachments with media previews and actions, for chat composers, uploads, and message threads.
Avatar
An image element with a fallback for representing the user, built on the Base UI Avatar primitive, with initials when the image fails.
Badge
Displays a small status descriptor, with default, secondary, destructive, outline, ghost, and link variants that can render as a link.
Breadcrumb
Displays the current location within a hierarchical navigation structure.
Bubble
Chat message bubbles for conversational interfaces, with incoming and outgoing styles for AI chat and messaging UIs.
Button
Displays a button built on the Base UI Button primitive, with default, secondary, outline, ghost, destructive, and link variants.
Button Group
Groups related buttons with shared borders and separators, for toolbars, split buttons, and segmented actions.
Calendar
A date field primitive that lets users select dates or ranges.
Card
Displays a container with optional header, content, and footer sections.
Carousel
A carousel with motion and swipe built using Embla, with previous and next controls, horizontal and vertical orientation.
Chart
Composable chart primitives built on Recharts: a themed container, tooltip, and legend that pick up your shadcn chart colors.
Checkbox
Displays a checkbox built on the Base UI Checkbox primitive, for accepting terms, toggling settings, and picking several options.
Collapsible
An interactive primitive which expands/collapses a panel, built on the Base UI Collapsible.
Combobox
An input combined with a filterable popup list, built on the Base UI Combobox primitive.
Command
A fast, composable command palette built on the Base UI Autocomplete primitive.
Context Menu
Displays a menu to the user — such as a set of actions or functions — triggered by right click or touch long-press, built on the Base UI Menu primitive.
Dialog
A window overlaid on either the primary window or another dialog window, rendering the content underneath inert, built on the Base UI Dialog primitive.
Direction
Re-exports the Base UI DirectionProvider for RTL support, so every SevenUI primitive below it follows right-to-left layouts.
Drawer
A panel that slides in from an edge of the screen and can be dismissed with a swipe gesture, built on the Base UI Drawer primitive.
Dropdown Menu
Displays a menu to the user — such as a set of actions or functions — triggered by a button, built on the Base UI Menu primitive.
Empty
Displays an empty state with media, title, description, and actions.
Field
Associates a label, control, description, and validation error for a form field.
Form
A native form with consolidated, auto-clearing validation error handling.
Hover Card
Displays a preview card when hovering or focusing a link, built on the Base UI Preview Card primitive.
Input
Displays a text input built on the Base UI Input primitive, for text, email, password, file, and other native input types.
Input Group
Groups an input with addons, buttons, and inline text, such as icons, units, and clear or submit actions inside one field.
Input OTP
Displays an OTP input field built on the Base UI OTPField primitive.
Item
A flexible list item with media, content, and actions, for settings rows, file lists, contact lists, and notifications.
Kbd
Displays a keyboard key or shortcut, alone or grouped into combinations, for hotkey hints in menus, tooltips, and docs.
Label
Displays an accessible label for a form control, styled to match SevenUI inputs, checkboxes, and switches, and used inside Field.
Layer Card
A muted tray holding one or more raised panels, with a header and footer as chrome.
Marker
An inline marker with icon and content for annotating UI, such as status notes, highlights, and callouts inside text.
Menubar
A horizontal menu bar with multiple menus — such as File, Edit, and View — built on the Base UI Menu primitive.
Message
Chat message layout with avatar, content, header, and footer.
Message Scroller
Auto-scrolling chat viewport built on the shadcn MessageScroller primitive.
Meter
Displays a value within a known range, built on the Base UI Meter primitive.
Native Select
A styled native HTML select element with the SevenUI input look, for forms that want the platform picker on every device.
Navigation Menu
A collection of links for navigating websites, sharing one animated popup between top-level menu triggers, built on the Base UI Navigation Menu primitive.
Number Field
Displays a number field built on the Base UI Number Field primitive.
Pagination
Displays page navigation for multi-page content, with previous and next links, page numbers, and an ellipsis for gaps.
Popover
Displays rich content in a portal, positioned relative to an anchor element, built on the Base UI Popover primitive.
Progress
Displays an indicator showing the completion progress of a task.
Questionnaire
Multi-step questionnaire flow built on the shadcn Questionnaire primitive.
Radio Group
Displays a radio group built on the Base UI Radio primitive, for choosing exactly one option from a short list.
Resizable
Accessible resizable panel groups and layouts built on react-resizable-panels, with keyboard-operable handles.
Scroll Area
Augments native scroll functionality for custom, cross-browser styling, built on the Base UI Scroll Area primitive.
Select
Displays a select menu built on the Base UI Select primitive.
Separator
Visually or semantically separates content, horizontally or vertically, built on the Base UI Separator primitive.
Sheet
An edge-positioned panel that slides in from the side of the screen, built on the Base UI Dialog primitive.
Sidebar
A composable, themeable sidebar with collapsible, mobile, and icon-only modes.
Skeleton
Use to show a placeholder while content is loading: pulsing blocks shaped like the text, avatars, and cards they stand in for.
Slider
Displays a slider built on the Base UI Slider primitive, for picking a single value or a range with keyboard and pointer.
Spinner
Displays an animated loading indicator for pending work, sized and colored to sit inside buttons, inputs, and empty states.
Switch
Displays a switch built on the Base UI Switch primitive, for turning a setting on or off with an accessible label.
Table
Displays data in rows and columns with semantic HTML and support for headers, bodies, and footers.
Tabs
A set of layered sections of content — known as tab panels — that display one panel at a time, built on the Base UI Tabs primitive.
Textarea
Displays a multi-line text input field that matches the SevenUI input styles and works with Field for labels and errors.
Toast
Stacked, swipe-dismissable notifications driven by the Base UI toast manager.
Toggle
Displays a toggle built on the Base UI Toggle primitive: a two-state button for options like bold, italic, or mute.
Toggle Group
Displays a toggle group built on the Base UI Toggle Group primitive.
Toolbar
A container for grouping a set of controls, such as buttons, toggle groups, or links, built on the Base UI Toolbar primitive.
Tooltip
A popup that displays information related to an element when hovered or focused, built on the Base UI Tooltip primitive.