Separator

Web only — React, from @krizaka/ui/separator. Stable: its API only changes in a major version.

Why it is here. A primitive of the platform: dividers inside menus, lists and cards.

Installation

Install

npm install @krizaka/ui @krizaka/tailwind @krizaka/tokens tailwindcss

Styles

@import "tailwindcss";
@import "@krizaka/tailwind";
@import "@krizaka/ui/tailwind.css";

Import

import { Separator } from "@krizaka/ui/separator";

Examples

Props

This module has no component props: see the import and the preview above.

Accessibility

• Radix Separator: decorative by default (role="none"); decorative={false} gives role="separator" and its orientation.

Best practices

• Prefer space to lines; a separator marks a change of group.
• decorative={false} only when the separation means something to a screen-reader user.

Related components

• Dropdown menuA menu of actions opened from a trigger: items with icons, checkbox items, labels, separators, a destructive item.
• CardThe composed chassis of every card: a media with overlays, a body with a title, a description, stats and a footer.

Generated from the code of @krizaka/ui 3.8.0: its meta.ts, its examples and its types.Edit this documentation on GitHub