Ir para o conteúdo

Componentes UI

O catálogo foi dividido por categoria para facilitar navegação. Cada arquivo cobre props, exemplos e notas de acessibilidade.

➡️ Começar pela Entrada de dados

Ícone por nome

Precisa renderizar um ícone cujo nome só existe em runtime (menu vindo da API, campo de CMS)? Veja Ícones por slug — <Icon name="save" /> cobre os 2024 slugs do lucide sem o custo de chunk do DynamicIcon.

Categorias

  • Entrada de dados — 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
  • Ação — Button, FloatingActionButton, Tooltip, DropdownMenu, Popover, ConfirmDialog, InstallButton, InstallBanner
  • Navegação — 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
  • Dados — 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
  • Identidade & micro — Avatar, AvatarGroup, Card, Kbd
  • Utilitários & headless — CopyButton, RelativeTime, Money, TruncateText, VisuallyHidden, Portal, ClickOutside, ConditionalWrapper, For, ErrorText, Image, DataList, DescriptionList, CodeBlock, QRCode
  • Overlays & avançados — os componentes em paridade com a shadcn/ui, em cinco páginas (visão geral):
    • Essenciais — Toggle, ToggleGroup, Label, Collapsible, ContextMenu, HoverCard, Command
    • Layout & UX — ScrollArea, Resizable, Calendar, Scheduler
    • Navegação & conteúdo — NavigationMenu, Menubar, Carousel
    • Dados — DataTable, Wizard, Markdown, Masonry, Tour, Transfer, FilterBar, Kanban
    • Conversa — Chat, AIChat

Convenções globais

  • CSS Modules com prefix tempest_ — não colide com estilos do app.
  • className prop sempre disponível para customização local.
  • Tokens CSS (--tempest-*) — customize via root, não via copy-paste de CSS.
  • Forward ref em inputs / textarea / select / botões — funciona com react-hook-form.
  • A11y baseline — aria-invalid em erro, aria-label em close buttons, aria-current="page" em nav, focus trap em Modal/Drawer/BottomSheet.
  • Mobile-aware — Navbar/BottomNavigation/BottomSheet/Toast/Modal.fullscreen aplicam env(safe-area-inset-*).
  • Responsive props — Stack.direction, Grid.columns, Form.layout aceitam ResponsiveValue<T> ({ base, sm, md, lg, xl }).

Veja também