Separator
Separate related content with a horizontal or vertical rule.
Installation
Import from @gaudi/design-system. Load @gaudi/design-system/global.css once and add transpilePackages: ['@gaudi/design-system'] in Next.js.
Copy an example into your project with the shadcn CLI: npx shadcn@latest add https://design.gaudi.site/r/separator-horizontal.json.
Usage
Examples
Horizontal rules
Text label
Vertical rules
API
3 props
Accessibility
Set decorative={false} only when the separator conveys meaningful structure.
Related
DirectionScopes text direction for Gaudi controls that need directional keyboard and placement behavior.AspectRatioKeep media at a stable aspect ratio as its container resizes.1 exampleAvatarProfile images, resilient initials, presence, verification, account menus and collaborator groups. The existing Avatar API and curated patterns share the same image and fallback primitives.10 examplesButtonButton renders the Gaudi action and link-button variants.7 examplesButtonGroupGroup related actions with joined borders and consistent sizing.9 examplesCardCard frames reusable content with title, subtitle, and optional children.8 examples