All components
Divider Text
LayoutA horizontal divider with a centred label.
or continue with
Installation
Add it with the shadcn CLI:
$
pnpm dlx shadcn@latest add https://nawalkattel.com.np/r/divider-text.jsonOr install manually
1. Install dependencies
pnpm add clsx tailwind-merge2. Copy the component source into
components/library/divider-text.tsx
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | - | Label shown between the rules. |
Accessibility
- Rules are decorative spans; the label is real text.
- Flexes to any width without the label wrapping oddly.
- No animation, so nothing to disable for reduced motion.
Dependencies
clsxtailwind-merge