Components
- Accordion
- Alert
- Alert Dialog
- Autocomplete
- Avatar
- Badge
- Breadcrumb
- Button
- Card
- Checkbox
- Checkbox Group
- Collapsible
- Combobox
- Dialog
- Field
- Fieldset
- Form
- Frame
- Group
- Input
- Label
- Menu
- Meter
- Number Field
- Pagination
- Popover
- Preview Card
- Progress
- Radio Group
- Scroll Area
- Select
- Separator
- Sheet
- Slider
- Switch
- Table
- Tabs
- Textarea
- Toast
- Toggle
- Toggle Group
- Toolbar
- Tooltip
Resources
Separator
A separator element accessible to screen readers.
coss.com ui
Unstyled, accessible primitives for fast product UI and design systems.
Blog
Docs
Source
Releases
import { Separator } from "@/components/ui/separator"
export function SeparatorDemo() {
return (
<div className="max-w-72">
<div className="space-y-1">
<h4 className="text-sm font-medium">coss.com ui</h4>
<p className="text-sm text-muted-foreground">
Unstyled, accessible primitives for fast product UI and design
systems.
</p>
</div>
<Separator className="my-4" />
<div className="flex items-center gap-4 text-sm">
<div>Blog</div>
<Separator orientation="vertical" />
<div>Docs</div>
<Separator orientation="vertical" />
<div>Source</div>
<Separator orientation="vertical" />
<div>Releases</div>
</div>
</div>
)
}
Installation
pnpm dlx shadcn@latest add https://coss.com/ui/r/separator.json
Usage
import { Separator } from "@/components/ui/separator"
<Separator />
On This Page