---
name: "@sevenui"
slug: "sevenui"
description: "Base UI powered components, distributed through the shadcn registry."
category: "Animated components"
tags: ["animation", "auth", "buttons", "cards", "charts", "dashboard", "forms", "loaders", "media", "navigation", "overlays", "pro-available", "tables", "theming"]
framework: "react"
license: null
author: "useui"
website: "https://sevenui.dev"
github: "https://github.com/useui/sevenui"
registry: "https://sevenui.dev/r/registry.json"
pro: true
pro_url: "https://sevenui.dev/pro"
github_stars: 2
component_count: 67
generated_at: "2026-09-21T01:50:16.753Z"
---

# @sevenui

Base UI powered components, distributed through the shadcn registry.

## Links

- Website: https://sevenui.dev
- GitHub: https://github.com/useui/sevenui
- Registry JSON: https://sevenui.dev/r/registry.json
- Directory page: https://sh4dcn.vercel.app/registry/sevenui
- This file: https://sh4dcn.vercel.app/md/sevenui.md
- Pro / pricing: https://sevenui.dev/pro

## Install

```sh
# add the whole registry (shadcn CLI)
npx shadcn@latest add https://sevenui.dev/r/registry.json
pnpm dlx shadcn@latest add https://sevenui.dev/r/registry.json
bunx shadcn@latest add https://sevenui.dev/r/registry.json
# clone the source repo
git clone https://github.com/useui/sevenui.git
# fetch the raw registry index
curl -s https://sevenui.dev/r/registry.json
```

## Components (67)

| name | type | description | install |
| --- | --- | --- | --- |
| theme | registry:theme | shadcn-compatible design tokens (neutral palette). | `npx shadcn@latest add https://sevenui.dev/r/theme.json` |
| animations | registry:style | SevenUI's enter/exit animation utilities (animate-in/out, fade, zoom, slide) used by the overlay components. | `npx shadcn@latest add https://sevenui.dev/r/animations.json` |
| button | registry:ui | Displays a button built on the Base UI Button primitive. | `npx shadcn@latest add https://sevenui.dev/r/button.json` |
| badge | registry:ui | Displays a small status descriptor. | `npx shadcn@latest add https://sevenui.dev/r/badge.json` |
| kbd | registry:ui | Displays a keyboard key. | `npx shadcn@latest add https://sevenui.dev/r/kbd.json` |
| label | registry:ui | Displays a label for form inputs. | `npx shadcn@latest add https://sevenui.dev/r/label.json` |
| card | registry:ui | Displays a container with optional header, content, and footer sections. | `npx shadcn@latest add https://sevenui.dev/r/card.json` |
| input | registry:ui | Displays a text input built on the Base UI Input primitive. | `npx shadcn@latest add https://sevenui.dev/r/input.json` |
| input-otp | registry:ui | Displays an OTP input field built on the Base UI OTPField primitive. | `npx shadcn@latest add https://sevenui.dev/r/input-otp.json` |
| alert | registry:ui | Displays a message with optional title and description for the user. | `npx shadcn@latest add https://sevenui.dev/r/alert.json` |
| avatar | registry:ui | An image element with a fallback for representing the user. | `npx shadcn@latest add https://sevenui.dev/r/avatar.json` |
| separator | registry:ui | Visually or semantically separates content. | `npx shadcn@latest add https://sevenui.dev/r/separator.json` |
| skeleton | registry:ui | Use to show a placeholder while content is loading. | `npx shadcn@latest add https://sevenui.dev/r/skeleton.json` |
| spinner | registry:ui | Displays a loading indicator. | `npx shadcn@latest add https://sevenui.dev/r/spinner.json` |
| aspect-ratio | registry:ui | Displays content with a fixed aspect ratio. | `npx shadcn@latest add https://sevenui.dev/r/aspect-ratio.json` |
| textarea | registry:ui | Displays a multi-line text input field. | `npx shadcn@latest add https://sevenui.dev/r/textarea.json` |
| table | registry:ui | Displays data in rows and columns with semantic HTML and support for headers, bodies, and footers. | `npx shadcn@latest add https://sevenui.dev/r/table.json` |
| breadcrumb | registry:ui | Displays the current location within a hierarchical navigation structure. | `npx shadcn@latest add https://sevenui.dev/r/breadcrumb.json` |
| pagination | registry:ui | Displays navigation for multi-page content. | `npx shadcn@latest add https://sevenui.dev/r/pagination.json` |
| progress | registry:ui | Displays an indicator showing the completion progress of a task. | `npx shadcn@latest add https://sevenui.dev/r/progress.json` |
| field | registry:ui | Associates a label, control, description, and validation error for a form field. | `npx shadcn@latest add https://sevenui.dev/r/field.json` |
| form | registry:ui | A native form with consolidated, auto-clearing validation error handling. | `npx shadcn@latest add https://sevenui.dev/r/form.json` |
| checkbox | registry:ui | Displays a checkbox built on the Base UI Checkbox primitive. | `npx shadcn@latest add https://sevenui.dev/r/checkbox.json` |
| radio-group | registry:ui | Displays a radio group built on the Base UI Radio primitive. | `npx shadcn@latest add https://sevenui.dev/r/radio-group.json` |
| switch | registry:ui | Displays a switch built on the Base UI Switch primitive. | `npx shadcn@latest add https://sevenui.dev/r/switch.json` |
| toggle | registry:ui | Displays a toggle built on the Base UI Toggle primitive. | `npx shadcn@latest add https://sevenui.dev/r/toggle.json` |
| toggle-group | registry:ui | Displays a toggle group built on the Base UI Toggle Group primitive. | `npx shadcn@latest add https://sevenui.dev/r/toggle-group.json` |
| slider | registry:ui | Displays a slider built on the Base UI Slider primitive. | `npx shadcn@latest add https://sevenui.dev/r/slider.json` |
| number-field | registry:ui | Displays a number field built on the Base UI Number Field primitive. | `npx shadcn@latest add https://sevenui.dev/r/number-field.json` |
| select | registry:ui | Displays a select menu built on the Base UI Select primitive. | `npx shadcn@latest add https://sevenui.dev/r/select.json` |
| combobox | registry:ui | An input combined with a filterable popup list, built on the Base UI Combobox primitive. | `npx shadcn@latest add https://sevenui.dev/r/combobox.json` |
| tooltip | registry:ui | A popup that displays information related to an element when hovered or focused, built on the Base UI Tooltip primitive. | `npx shadcn@latest add https://sevenui.dev/r/tooltip.json` |
| popover | registry:ui | Displays rich content in a portal, positioned relative to an anchor element, built on the Base UI Popover primitive. | `npx shadcn@latest add https://sevenui.dev/r/popover.json` |
| hover-card | registry:ui | Displays a preview card when hovering or focusing a link, built on the Base UI Preview Card primitive. | `npx shadcn@latest add https://sevenui.dev/r/hover-card.json` |
| dialog | registry:ui | A window overlaid on either the primary window or another dialog window, rendering the content underneath inert, built on the Base UI Dialog primitive. | `npx shadcn@latest add https://sevenui.dev/r/dialog.json` |
| alert-dialog | registry:ui | A modal dialog that interrupts the user with important content and expects a response, built on the Base UI Alert Dialog primitive. | `npx shadcn@latest add https://sevenui.dev/r/alert-dialog.json` |
| sheet | registry:ui | An edge-positioned panel that slides in from the side of the screen, built on the Base UI Dialog primitive. | `npx shadcn@latest add https://sevenui.dev/r/sheet.json` |
| drawer | registry:ui | 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. | `npx shadcn@latest add https://sevenui.dev/r/drawer.json` |
| dropdown-menu | registry:ui | 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. | `npx shadcn@latest add https://sevenui.dev/r/dropdown-menu.json` |
| context-menu | registry:ui | 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. | `npx shadcn@latest add https://sevenui.dev/r/context-menu.json` |
| menubar | registry:ui | A horizontal menu bar with multiple menus — such as File, Edit, and View — built on the Base UI Menu primitive. | `npx shadcn@latest add https://sevenui.dev/r/menubar.json` |
| toast | registry:ui | A sonner-style, module-level toast API for showing brief, non-blocking notifications, built on the Base UI Toast primitive. | `npx shadcn@latest add https://sevenui.dev/r/toast.json` |
| tabs | registry:ui | 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. | `npx shadcn@latest add https://sevenui.dev/r/tabs.json` |
| accordion | registry:ui | A vertically stacked set of interactive headings that each reveal an associated panel of content, built on the Base UI Accordion primitive. | `npx shadcn@latest add https://sevenui.dev/r/accordion.json` |
| collapsible | registry:ui | An interactive component which expands/collapses a panel, built on the Base UI Collapsible primitive. | `npx shadcn@latest add https://sevenui.dev/r/collapsible.json` |
| scroll-area | registry:ui | Augments native scroll functionality for custom, cross-browser styling, built on the Base UI Scroll Area primitive. | `npx shadcn@latest add https://sevenui.dev/r/scroll-area.json` |
| meter | registry:ui | Displays a value within a known range, built on the Base UI Meter primitive. | `npx shadcn@latest add https://sevenui.dev/r/meter.json` |
| toolbar | registry:ui | A container for grouping a set of controls, such as buttons, toggle groups, or links, built on the Base UI Toolbar primitive. | `npx shadcn@latest add https://sevenui.dev/r/toolbar.json` |
| navigation-menu | registry:ui | A collection of links for navigating websites, sharing one animated popup between top-level menu triggers, built on the Base UI Navigation Menu primitive. | `npx shadcn@latest add https://sevenui.dev/r/navigation-menu.json` |
| command | registry:ui | A fast, composable command palette built on the Base UI Autocomplete primitive. | `npx shadcn@latest add https://sevenui.dev/r/command.json` |
| sidebar | registry:ui | A composable, themeable sidebar with collapsible, mobile, and icon-only modes. | `npx shadcn@latest add https://sevenui.dev/r/sidebar.json` |
| resizable | registry:ui | Accessible resizable panel groups and layouts. | `npx shadcn@latest add https://sevenui.dev/r/resizable.json` |
| carousel | registry:ui | A carousel with motion and swipe built using Embla. | `npx shadcn@latest add https://sevenui.dev/r/carousel.json` |
| calendar | registry:ui | A date field component that lets users select dates or ranges. | `npx shadcn@latest add https://sevenui.dev/r/calendar.json` |
| chart | registry:ui | Composable chart primitives built on Recharts. | `npx shadcn@latest add https://sevenui.dev/r/chart.json` |
| button-group | registry:ui | Groups related buttons with shared borders and separators. | `npx shadcn@latest add https://sevenui.dev/r/button-group.json` |
| input-group | registry:ui | Groups an input with addons, buttons, and inline text. | `npx shadcn@latest add https://sevenui.dev/r/input-group.json` |
| item | registry:ui | A flexible list item with media, content, and actions. | `npx shadcn@latest add https://sevenui.dev/r/item.json` |
| empty | registry:ui | Displays an empty state with media, title, description, and actions. | `npx shadcn@latest add https://sevenui.dev/r/empty.json` |
| native-select | registry:ui | A styled native HTML select element. | `npx shadcn@latest add https://sevenui.dev/r/native-select.json` |
| direction | registry:ui | Re-exports the Base UI DirectionProvider for RTL support. | `npx shadcn@latest add https://sevenui.dev/r/direction.json` |
| marker | registry:ui | An inline marker with icon and content for annotating UI. | `npx shadcn@latest add https://sevenui.dev/r/marker.json` |
| message | registry:ui | Chat message layout with avatar, content, header, and footer. | `npx shadcn@latest add https://sevenui.dev/r/message.json` |
| message-scroller | registry:ui | Auto-scrolling chat viewport built on the shadcn MessageScroller primitive. | `npx shadcn@latest add https://sevenui.dev/r/message-scroller.json` |
| bubble | registry:ui | Chat message bubbles for conversational interfaces. | `npx shadcn@latest add https://sevenui.dev/r/bubble.json` |
| attachment | registry:ui | Displays file attachments with media previews and actions. | `npx shadcn@latest add https://sevenui.dev/r/attachment.json` |
| questionnaire | registry:ui | Multi-step questionnaire flow built on the shadcn Questionnaire primitive. | `npx shadcn@latest add https://sevenui.dev/r/questionnaire.json` |

## For AI agents

```text
You are adding components from @sevenui to a shadcn-compatible project.
1. Read this file (https://sh4dcn.vercel.app/md/sevenui.md) for the component list.
2. Fetch the machine-readable index: https://sevenui.dev/r/registry.json
3. Install a single component with its install command from the table above.
4. Full structured record: https://sh4dcn.vercel.app/json (library slug: sevenui).
```