Fundação
Componentes
- Componentes
- Accordion
- ActivityGraph
- Alert
- Alert Dialog
- Aspect Ratio
- Avatar
- AvatarGroup
- Badge
- Box
- Breadcrumb
- Button
- Button Group
- Calendar
- Card
- Carousel
- Chart
- Checkbox
- Collapsible
- Combobox
- Command
- Connector
- Container
- Context Menu
- Dialog
- Drawer
- DropdownMenu
- Empty
- EnvEditor
- Fade In
- Field
- Fps
- Hover Card
- Highlighter
- Input
- InputGroup
- Input OTP
- Item
- JSONViewer
- Kbd
- Label
- Marquee
- Menubar
- Native Select
- Navigation Menu
- NumberInput
- Pagination
- Popover
- Preview Card
- Progress
- ProgressiveBlur
- Radio Group
- Resizable
- Retro Grid
- Scan Line
- ScrollArea
- Scrubber
- SectionLabel
- Select
- Separator
- Sheet
- Signature
- Sidebar
- Skeleton
- Slider
- Sonner
- Spinner
- Stagger Group
- StatusDot
- SystemBanner
- Switch
- Table
- Tabs
- TagInput
- Textarea
- ThemeToogle
- Toggle
- Toggle Group
- Tooltip
- Typing Effect
O componente está em @zexon/ui/components/scroll-area (Radix). Exporta ScrollArea e ScrollBar. A prop showScrollBar (por defeito true) permite esconder a barra visualmente com hidden em CSS sem remover o nó: o viewport continua a fazer scroll (comportamento documentado no pacote).
Uso
Lista com rolagem
Linha 1
Linha 2
Linha 3
Linha 4
Linha 5
Linha 6
Linha 7
Linha 8
Linha 9
Linha 10
Linha 11
Linha 12
Barra oculta
showScrollBar={false}
O scroll continua a funcionar com teclado, trackpad e toque; apenas a barra não é mostrada. Útil para alinhar o visual a layouts minimalistas.
ScrollBar horizontal
ScrollBar é incluído dentro de ScrollArea por defeito (vertical). Para uso avançado, pode importar ScrollBar e compor com a API do Radix conforme necessário.
Aplicações
Ideal para tabelas estreitas, listas em modais e painéis laterais onde o conteúdo excede a altura disponível.