- 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 Separator (Radix) está em separator.tsx; o DiagramSeparator (linha ao centro com Connector nas junções, usado dentro de Container) está em diagram-separator.tsx.
Separator (Radix)
Por defeito é decorativo (decorative={true}) e horizontal (orientation="horizontal").
Uso
Horizontal
Orientação
Use orientation="vertical" para uma linha entre colunas. O contentor flex precisa de altura definida para a linha vertical se estender.
Vertical
Semântica
Se o separador não for puramente decorativo, defina decorative={false} e garanta um nome acessível (por exemplo com aria-labelledby no contentor pai).
DiagramSeparator
Linha horizontal ou vertical ao centro de um contentor relative, com conectores opcionais nas quatro junções (espelhados em cada extremo). Normalmente não é usado isoladamente; o Container expõe separator e separatorConnectors que delegam aqui.
DiagramSeparator (vertical)
Contentor relativo
Aplicações
Cartão com divisões
Lista com separadores