Components
- Accordion
- Alert
- Alert Dialog
- Autocomplete
- Avatar
- Badge
- Breadcrumb
- Button
- Card
- Checkbox
- Checkbox Group
- Collapsible
- Combobox
- Dialog
- EmptyNew
- Field
- Fieldset
- Form
- Frame
- Group
- Input
- Input GroupNew
- KbdNew
- Label
- Menu
- Meter
- Number Field
- Pagination
- Popover
- Preview Card
- Progress
- Radio Group
- Scroll Area
- Select
- Separator
- Sheet
- SkeletonNew
- Slider
- SpinnerNew
- Switch
- Table
- Tabs
- Textarea
- Toast
- Toggle
- Toggle Group
- Toolbar
- Tooltip
Resources
Separator
A separator element accessible to screen readers.
coss ui
Unstyled, accessible primitives for fast product UI and design systems.
Blog
Docs
Source
Releases
import { Separator } from "@/components/ui/separator";
export default function Particle() {
return (
<div className="max-w-72">
<div className="space-y-1">
<h4 className="font-medium text-sm">coss ui</h4>
<p className="text-muted-foreground text-sm">
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 @coss/separator
Usage
import { Separator } from "@/components/ui/separator"<Separator />On This Page