Tag Reference
Component Import Usage
All tags listed below are exported directly from the package root. Import them in your pages or layouts with a single statement:
import { List, ListItem, Flex, Box, Button, TextField, Table, Card } from "@shavin/ui";Layout(11)
| Tag / Primitive | Description | Where it is used | Docs |
|---|---|---|---|
<Box> | Low-level layout container supporting display, position, padding, margin, width, and height props. | Use as a basic wrapper div with custom spacing and layout overrides. | View → |
<Flex> | Flexbox layout container with direction, align, justify, wrap, and gap props. | 1D row or column alignment of items, buttons, or card elements. | View → |
<Grid> | CSS Grid container with columns, rows, gap, align, and justify props. | 2D responsive layouts, multi-column card grids, and dashboard panels. | View → |
<Container> | Centered max-width container with responsive side padding. | Page body wrappers to constrain content width (sm, md, lg, xl, 2xl). | View → |
<Section> | Vertical page section wrapper with token-driven vertical padding. | Grouping major vertical blocks on landing pages or documentation. | View → |
<Sidebar> | Collapsible left sidebar shell with Header, Body, Footer, Section, and Item sub-components. | Application left navigation menus and dashboard navigation bars. | View → |
<AppFrame> | Top-level layout shell with responsive sidebar, main column, and rail context. | Full-screen application layouts containing sidebars and top bars. | View → |
<NavRail> | Slim icon-only vertical navigation rail for multi-workspace apps. | Leftmost app switcher rail in complex multi-tenant admin portals. | View → |
<TopBar> | Header bar container with title, search, actions, and profile trigger slots. | Sticky top navigation bar across application pages. | View → |
<Inset> | Margin/padding inset wrapper that clips flush to container borders. | Edge-to-edge card headers, hero media, or full-width table cards. | View → |
<AspectRatio> | Fixed aspect ratio container (16:9, 4:3, 1:1) backed by Radix AspectRatio. | Video embeds, card image thumbnails, and responsive media framing. | View → |
Typography(9)
| Tag / Primitive | Description | Where it is used | Docs |
|---|---|---|---|
<Heading> | Semantic heading (h1–h6) with size (xs to 3xl), weight, and color props. | Page titles, section headers, card titles, and modal headers. | View → |
<Text> | Body text paragraph or span with size, weight, color, and align props. | General prose text, subtitles, field labels, and descriptions. | View → |
<Em> | Inline italic emphasis element with token-styled styling. | Emphasizing words or phrases within body text paragraphs. | View → |
<Strong> | Inline bold strong element with token-styled font weight. | High-importance terms, key values, or highlighted inline names. | View → |
<Quote> | Inline quote element with auto-curly quotation styling. | Inline quotes or short cited phrases inside paragraphs. | View → |
<Blockquote> | Block-level quotation block with left accent bar and muted styling. | Pull quotes, user testimonials, and highlighted document excerpts. | View → |
<Code> | Inline monospace code badge with subtle background and hair-line border. | Displaying inline code symbols, component tags, and file paths. | View → |
<Kbd> | Keyboard shortcut key badge (e.g. ⌘K, Ctrl+C, Shift+Enter). | Command palettes, shortcut tooltips, and hotkey documentation. | View → |
<Link> | Token-styled anchor tag with hover underline and color variants. | Inline paragraph hyperlinks, footer navigation links, and external URLs. | View → |
Buttons(3)
| Tag / Primitive | Description | Where it is used | Docs |
|---|---|---|---|
<Button> | Primary, secondary, outline, ghost, soft, and destructive button with size & loading states. | Form submission, primary calls to action, modal triggers, and wizard steps. | View → |
<IconButton> | Compact icon-only button with accessible aria-label and variant styles. | Header actions, close buttons, toolbar controls, and table row actions. | View → |
<ActionBar> | Grouped floating action toolbar for multi-selection or rich editing. | Bulk table operations bar (e.g. Delete Selected, Export) or text toolbars. | View → |
Forms(14)
| Tag / Primitive | Description | Where it is used | Docs |
|---|---|---|---|
<TextField> | Single-line input with leading/trailing icon slots, clear button, and error state. | Text, email, search, password, or numeric form inputs. | View → |
<TextArea> | Multi-line text input with auto-resize, character counter, and helper text. | Feedback forms, long descriptions, comments, and message inputs. | View → |
<Checkbox> | Accessible boolean toggle checkbox backed by Radix Checkbox. | Agreeing to terms, single boolean options, and multi-select list items. | View → |
<CheckboxGroup> | Accessible multi-checkbox group container with shared label. | Selecting multiple features, categories, or filter options. | View → |
<CheckboxCards> | Rich card-styled checkbox list with titles, descriptions, and check indicators. | Selecting plan add-ons, feature modules, or configuration options. | View → |
<RadioGroup> | Single-selection radio button group backed by Radix RadioGroup. | Selecting exactly one choice from a short list of options. | View → |
<Radio> | Individual radio item inside a RadioGroup with customizable shape radius. | Single radio option entry inside a RadioGroup container. | View → |
<Switch> | Instant-on/off toggle switch control backed by Radix Switch. | Setting toggles (e.g., Enable Dark Mode, Notifications, Auto-Save). | View → |
<Select> | Accessible select dropdown with viewport scrolling backed by Radix Select. | Selecting one option from a structured list of options. | View → |
<Dropdown> | Native HTML select wrapper with token styling for mobile picker support. | Simple form select fields where native mobile sheet selection is preferred. | View → |
<Combobox> | Searchable autocomplete dropdown input with instant query filtering. | Selecting an item from large lists (e.g. country pickers, user search). | View → |
<Slider> | Accessible numeric range slider backed by Radix Slider. | Adjusting continuous numeric values (volume, price range, opacity). | View → |
<SegmentedControl> | Multi-segment toggle button bar backed by Radix ToggleGroup. | Switching view modes (e.g. Grid vs List, Monthly vs Annual). | View → |
<Stepper> | Multi-step progress indicator for sequential wizard flows. | Multi-step checkout, onboarding flows, and multi-page forms. | View → |
Pickers(4)
| Tag / Primitive | Description | Where it is used | Docs |
|---|---|---|---|
<ColorPicker> | Swatch grid and hex color selection popover. | Selecting theme accent colors, tag colors, or custom branding. | View → |
<DatePicker> | Calendar popup for date selection with month navigation and range support. | Form fields requiring date selection (due dates, birth dates, schedule). | View → |
<TimePicker> | Time input component with dropdown, 3-field input, and clock dial options. | Selecting event times, appointment hours, and notification schedules. | View → |
<IconPicker> | Searchable Lucide icon grid picker with categories. | Allowing users to pick an icon for custom folders, tags, or categories. | View → |
Data Display(18)
| Tag / Primitive | Description | Where it is used | Docs |
|---|---|---|---|
<Icon> | Vector icon component with size token scales, semantic colors, and dynamic name lookups. | Action indicators, badges, feature items, buttons, and visual labels. | View → |
<Table> | Semantic data table with TableHeader, TableBody, TableRow, TableCell sub-components. | Structured data grids, user lists, financial logs, and record management. | View → |
<DataList> | Key-value pair summary list container with DataListItem. | Sidebar detail views, account summary lists, and order metadata. | View → |
<List> | Prose list container supporting bullet, decimal, roman, alpha, or plain markers. | Prose bullet points, numbered instructions, ordered steps, and feature lists. | View → |
<ListItem> | Individual list item entry inside a List component. | Individual bullet or numbered entries inside <List>. | View → |
<Card> | Surface panel container with variant, padding, and interactive hover options. | Grouping related content, dashboard widgets, feature blocks, and item cards. | View → |
<CardList> | Bordered container for stacked clickable list items. | Vertical lists of settings, notification feeds, or email threads. | View → |
<StatCard> | KPI metric display card with title, large value, trend badge, and sparkline slot. | Analytics dashboards displaying revenue, users, conversion, or metrics. | View → |
<Row> | Interactive row element with leading/trailing slots and active state. | Interactive list items, navigation links, and drag-and-drop items. | View → |
<Badge> | Compact status chip with variant, tone (accent, green, red, etc.), and radius props. | Status indicators (Active, Pending, Paid), category tags, and pill labels. | View → |
<Avatar> | User avatar with image fallback, delay timer, and shape control backed by Radix. | User profile pictures, team member lists, and comment author icons. | View → |
<Image> | Optimized image component with shimmer placeholder and error fallback. | Displaying product photos, hero banners, and article media images. | View → |
<Chart> | Lightweight SVG chart supporting line, bar, and area visualization. | Dashboard analytics, metric trends, and performance visualization. | View → |
<CodeBlock> | Syntax-highlighted code container with copy button and language tag. | Documentation code examples, developer API snippets, and configuration. | View → |
<ChatBubble> | Conversational message bubble with avatar, timestamp, and alignment. | AI chat interfaces, messaging applications, and support conversation logs. | View → |
<Progress> | Accessible progress bar with ARIA value attributes backed by Radix Progress. | Upload progress, task completion percentage, and profile completeness. | View → |
<Spinner> | Animated loading spinner with size and tone variants. | Inline loading states inside buttons, panels, or asynchronous views. | View → |
<Skeleton> | Shimmer loading placeholder mimic for content loading states. | Skeleton card placeholders while fetching data asynchronously. | View → |
Overlays(10)
| Tag / Primitive | Description | Where it is used | Docs |
|---|---|---|---|
<Dialog> | Accessible modal dialog window with focus trap & backdrop backed by Radix Dialog. | Modal dialogs, form popups, detail inspect windows, and edit modals. | View → |
<AlertDialog> | Accessible confirm/cancel modal with default focus on Cancel backed by Radix. | Destructive confirmation prompts (e.g. Delete Account, Discard Changes). | View → |
<ProfileModal> | Preset user profile settings modal dialog shell. | Standard user account & profile settings popup dialog. | View → |
<Menu> | Accessible dropdown menu with items, submenus, & shortcuts backed by Radix. | Header action menus, profile dropdowns, and option trigger menus. | View → |
<ContextMenu> | Right-click context menu panel backed by Radix ContextMenu. | Right-click context actions on file rows, table entries, or canvas elements. | View → |
<Popover> | Accessible floating popover container triggered by click backed by Radix Popover. | Rich filter popovers, inline picker panels, and info cards. | View → |
<HoverCard> | Hover-triggered preview card popover backed by Radix HoverCard. | Hovering over username links to display profile preview popovers. | View → |
<Tooltip> | Hover/focus micro-copy tooltip popup backed by Radix Tooltip. | Explaining icon-only buttons, truncated text, or hotkeys on hover. | View → |
<Accordion> | Collapsible accordion panel container with AccordionItem, Trigger, and Content. | FAQ sections, collapsible sidebar sub-groups, and expandable settings. | View → |
<ToastProvider> | Toast notification provider and useToast hook for temporary alerts. | Displaying success toasts (e.g., 'Settings saved') or temporary errors. | View → |
Navigation(8)
| Tag / Primitive | Description | Where it is used | Docs |
|---|---|---|---|
<Breadcrumbs> | Hierarchical path navigation trail (e.g. Home > Settings > Profile). | Top of deep pages to show location hierarchy and parent navigation. | View → |
<BottomNav> | Mobile bottom navigation bar with active icon items and labels. | Mobile-view application bottom navigation bar. | View → |
<Tabs> | Unified tabs component supporting in-page stateful panels (as='states') and URL routing navigation (as='navigation'). | Top section navigation bars or in-page content panel switching. | View → |
<Tabs> | Stateful tab container with TabsList, TabsTrigger, and TabsContent backed by Radix. | In-page tabbed content panels switching active views. | View → |
<Pagination> | Page number navigation bar with previous, next, and total count indicator. | Paginated data tables, search result lists, and catalog pages. | View → |
<ScrollArea> | Custom scrollbar container preserving native momentum backed by Radix. | Scrollable sidebars, modal bodies, and custom scroll overflow panels. | View → |
<Separator> | Horizontal or vertical divider line backed by Radix Separator. | Dividing section content, sidebar groups, or toolbar items. | View → |
<Sortable> | Drag-and-drop sortable list container with SortableHandle. | Reorderable task lists, dashboard column ordering, or list item drag. | View → |