Separator

A 1px rule in Colors/border/subtle between groups of content.

Figma: 10 / Components / Separator

Fundraiser page

Landing

Success page

Usage

Source: src/components/ui/separator.tsx

import { Separator } from '@/components/ui/separator'

<Separator />

When to reach for it, and when to use something else.

Use it for

Dividing sections inside a drawer or card.

Separating the title and footer of a kanban card.

Avoid

Separators between every row of a list; rows carry their own dividers.

Prop	Type	Default	Description
orientation	'horizontal' \| 'vertical'	'horizontal'	Direction of the rule.