---
title: "Rule"
description: "A horizontal separator with four weights and a labelled variant that centers the text. It divides sections and groups content; it does not draw boxes."
kind: component
id: C-017
registry: "rule"
docs: "https://koten.codehive.com.co/components/rule"
markdown: "https://koten.codehive.com.co/md/components/rule.md"
install: "npx shadcn@latest add https://koten.codehive.com.co/r/rule.json"
language: en
---

# Rule · 罫線

> Component C-017 in the Koten UI catalog.

A horizontal separator with four weights and a labelled variant that centers the text. It divides sections and groups content; it does not draw boxes.

> Japanese labels in this page are documentation metadata. Keep the consumer UI in the product's language and do not add Japanese decoration unless the user asks (R-031).

## Install

Install `koten-theme` first when the project does not have Koten tokens yet. Use the runner of your project.

```bash
# Node
npx shadcn@latest add https://koten.codehive.com.co/r/rule.json

# Bun
bunx shadcn@latest add https://koten.codehive.com.co/r/rule.json
```

## Files

- `@/components/ui/rule.tsx`
- `@/lib/koten/cn.ts`
- `@/lib/koten/format.ts`
- `@/lib/koten/intl.ts`
- `@/lib/koten/labels.ts`
- `@/lib/koten/provider.tsx`

## Examples

### Weights

hairline separates rows, strong divides blocks, double marks major breaks and dashed flags provisional content.

```tsx
<Rule />
<Rule variant="strong" />
<Rule variant="double" />
<Rule variant="dashed" />
```

### With a label

With label, the line splits in two and the text sits centered between both halves.

```tsx
<Rule label="Product information" />
```

## Props

| Prop | Type | Default | Notes |
| --- | --- | --- | --- |
| `variant` | `hairline \| strong \| double \| dashed` | `hairline` | Changes the weight and style of the top border; it does not change the text weight. |
| `label` | `ReactNode` | `—` | With label it renders a div with two lines; without label, a semantic <hr>. |
| `className` | `string` | `—` | For outer spacing; color and border come from the tokens. |

## Accessibility

- Without a label it renders an <hr>, which the browser exposes as a separator.
- With a label, both lines are aria-hidden and the text is read only once.
- Rule is a semantic separator: never use it to draw boxes or tables.

## Sources

- Catalog page: https://koten.codehive.com.co/components/rule
- Markdown: https://koten.codehive.com.co/md/components/rule.md
- Repository: https://github.com/codehive-colombia/koten