Components
Divider
A versatile divider component for creating visual separation between content elements.
Installation
bunx @happlyui/cli@latest add divider
Dependencies
npm packages
tailwind-variants
Registry dependencies
These are automatically installed when you add this component.
tv
Usage
import * as Divider from "@/components/ui/divider"
<Divider.Root />
<Divider.Root variant="line-text">OR</Divider.Root>
Examples
Line (Default)
A simple horizontal line divider.
<Divider.Root />
Line with Spacing
A line divider with vertical spacing.
<Divider.Root variant="line-spacing" />
Line with Text
A divider with centered text between the lines.
OR
Continue with
<Divider.Root variant="line-text">OR</Divider.Root>
<Divider.Root variant="line-text">Continue with</Divider.Root>
Text Only
A text-only divider without lines.
Section
<Divider.Root variant="text">Section</Divider.Root>
Solid Text
Text on a solid background with uppercase styling, commonly used in modals.
OR
<Divider.Root variant="solid-text">OR</Divider.Root>
Content
A divider with centered content elements like icons or buttons.
<Divider.Root variant="content">
<Button.Root variant="neutral" mode="stroke" size="xsmall" iconOnly>
<Button.Icon as={RiAddLine} />
</Button.Root>
</Divider.Root>
API Reference
Divider.Root
The main divider component.
| Prop | Type | Default | Description |
|---|---|---|---|
variant | 'line' | 'line-spacing' | 'line-text' | 'text' | 'solid-text' | 'content' | 'line' | The visual style of the divider |
className | string | - | Additional CSS classes |
children | ReactNode | - | Content to display (for text and content variants) |