# Rule

A hairline separator with a meaningful optional label.

- Family: Foundation, imported from `mizu-ui` or `mizu-ui/ui`
- Docs: https://mizu.user64bit.world/components/rule
- Source: https://github.com/0xuser64bit/mizu/blob/main/packages/mizu/src/ui/Rule.tsx

## Usage

```tsx
import { Rule } from "mizu-ui";

export function Example() {
  return <Rule label="Next chapter" />;
}
```

## Copy it with the shadcn CLI

```sh
npx shadcn@latest init 0xuser64bit/mizu/preset # once, where there is no components.json
npx shadcn@latest add 0xuser64bit/mizu/rule
```

## Props

- `label`: `string`. Optional visible separator text.
- `node`: `boolean` (default `true`). Show the diamond.
- `tone`: `"line" | "line-bright" | "accent"` (default `"line"`). Line color.

## Accessibility

A horizontal separator. The label is also exposed as its accessible name.

## Motion

Static geometry.