Separator
Oddělovací čára s orientací a barvou
Installation
pnpm dlx shadcn@latest add https://registry.ceskysoftware.cz/r/separator.json
Usage
Preview
Typy čar
solid
dashed
dotted
gradient
Barvy
default
primary
secondary
blue
green
red
orange
S labelem — pozice
Vlevo
Střed
Vpravo
Tloušťka
1px
2px
3px
4px
Vertikální
ABCD
Import
import { Separator } from "@/registry/cs/ui/separator/separator"
Example
// Horizontální oddělovač
<Separator />
// S labelem (pozice: left | center | right)
<Separator label="nebo" labelPosition="center" />
// Styly čáry: solid | dashed | dotted | gradient
<Separator lineStyle="dashed" />
// Barvy: default | primary | secondary | blue | green | red | orange | yellow | grey | dark
<Separator color="primary" />
// Tloušťka (px)
<Separator thickness={2} color="primary" label="Sekce" />
// Vertikální (v flex kontejneru)
<div className="flex h-10 items-center gap-4">
<span>A</span>
<Separator orientation="vertical" />
<span>B</span>
</div>
Dependencies
@radix-ui/react-separatorhttps://registry.ceskysoftware.cz/r/utils.json (registry)