Skip to content

UI Components

The catalogue is split by category to make navigation easier. Each file covers props, examples, and accessibility notes.

➡️ Start with Data entry

Icons by name

Need to render an icon whose name only exists at runtime (a menu from the API, a CMS field)? See Icons by slug — <Icon name="save" /> covers all 2024 lucide slugs without DynamicIcon's chunk cost.

Categories

  • Data entry — Input, Textarea, Select, Combobox, MultiSelect, Checkbox, Radio/RadioGroup, Switch, ChipInput, SearchBar, DatePicker, DateRangePicker, TimePicker, FileUpload, Dropzone, Slider, RangeSlider, RatingStars, PinInput, PasswordInput, StepperInput, Form*, ImageCropper, SignaturePad
  • Actions — Button, FloatingActionButton, Tooltip, DropdownMenu, Popover, ConfirmDialog, InstallButton, InstallBanner
  • Navigation — Navbar, AppBar, Sidebar, NavigationRail, BottomNavigation, Tabs, Stepper, Breadcrumbs, Pagination, SegmentedControl
  • Overlay — Modal, Drawer, BottomSheet, ModalsManager, Lightbox
  • Layout — AppShell, Page, Container, Stack, Grid, Divider, Spacer, Center, AspectRatio, SafeArea, Show, Hide
  • Data — Table, VirtualList, VirtualTable, DataTable, ListTile, Accordion, Timeline, TreeView, Sparkline
  • Status & feedback — Alert, Banner, Badge, Tag, Stat, Progress, NProgress, Spinner, Skeleton, RefreshIndicator, Toast, EmptyState, ErrorState, OfflineIndicator, SyncStatusBadge, UpdatePrompt
  • Identity & micro — Avatar, AvatarGroup, Card, Kbd
  • Utilities & headless — CopyButton, RelativeTime, Money, TruncateText, VisuallyHidden, Portal, ClickOutside, ConditionalWrapper, For, ErrorText, Image, DataList, DescriptionList, CodeBlock, QRCode
  • Overlays & advanced — the components at parity with shadcn/ui, across five pages (overview):
    • Essentials — Toggle, ToggleGroup, Label, Collapsible, ContextMenu, HoverCard, Command
    • Layout & UX — ScrollArea, Resizable, Calendar, Scheduler
    • Navigation & content — NavigationMenu, Menubar, Carousel
    • Data — DataTable, Wizard, Markdown, Masonry, Tour, Transfer, FilterBar, Kanban
    • Chat — Chat, AIChat

Global conventions

  • CSS Modules with the tempest_ prefix — no collision with the app's styles.
  • className prop always available for local customization.
  • CSS tokens (--tempest-*) — customize via root, not by copy-pasting CSS.
  • Forward ref on inputs / textarea / select / buttons — works with react-hook-form.
  • A11y baseline — aria-invalid on error, aria-label on close buttons, aria-current="page" on nav, focus trap in Modal/Drawer/BottomSheet.
  • Mobile-aware — Navbar/BottomNavigation/BottomSheet/Toast/Modal.fullscreen apply env(safe-area-inset-*).
  • Responsive props — Stack.direction, Grid.columns, Form.layout accept ResponsiveValue<T> ({ base, sm, md, lg, xl }).

See also