Divider

Preview

Above

Below

Show code Copy

Installation

The divider ships for all three targets. Pick the tab for your project — the CLI detects which you are on and serves the matching implementation.

React

npx @nana-tec/ui add divider

Lands as src/components/ui/divider/divider.tsx, styled with Tailwind classes that resolve to the design tokens. Requires Tailwind v4.

Svelte

npx @nana-tec/ui add divider

Lands in src/lib/components/ui/divider/ as Divider.svelte, styled with Tailwind classes that resolve to the design tokens. Requires Tailwind v4.

Web Components

Install the package for a versioned dependency:

npm install @nana-tec/ui-components

Or copy the source in and own it:

npx @nana-tec/ui add divider

Usage

React

import { Divider } from "@/components/ui/divider";

export function Example() {
  return (
    <>
      <Divider />
      <Divider label="or" />
      <Divider variant="dashed" thickness="medium" />
    </>
  );
}

With a label it renders a rule either side of the text; without one it is a single rule. decorative drops the separator role for a divider that is purely visual. orientation="vertical" stretches to its flex parent, so it needs a sized row around it.

Svelte

<script lang="ts">
  import { Divider } from '$lib/components/ui/divider';
</script>

<Divider />
<Divider label="or" />
<Divider variant="dashed" thickness="medium" />

The label can also be a snippet for richer content:

<Divider>
  <Badge size="sm">New</Badge>
</Divider>

decorative drops the separator role for a divider that is purely visual.

Web Components

import "@nana-tec/ui-components/divider";

<div style="width:100%">
  <p style="margin:0">Above</p>
  <nana-divider></nana-divider>
  <p style="margin:0">Below</p>
</div>

Note

The live previews on this page render the Web Components build, because that is what runs in a page without a framework runtime. The variants, sizes and states are identical across all three, so what you see is what you get in React and Svelte too.

Classes you pass to the React and Svelte components are merged with tailwind-merge, so an override wins rather than fighting. See Using Tailwind.

Variants

Show code Copy

With a label

OR

Show code Copy

Vertical

Left Right

Show code Copy

API

The React and Svelte props, read from the components’ own types:

React

Divider

Prop	Type	Default
orientation	DividerOrientation	'horizontal'
variant	DividerVariant	'solid'
thickness	DividerThickness	'thin'
label	ReactNode	—
inset	boolean	false
decorative	boolean	false
children	ReactNode	—

Also accepts Omit<HTMLAttributes<HTMLDivElement>, 'children'>.

Svelte

Divider

Prop	Type	Default
orientation	DividerOrientation	'horizontal'
variant	DividerVariant	'solid'
thickness	DividerThickness	'thin'
label	string	—
inset	boolean	false
decorative	boolean	false
children	Snippet	—

Also accepts Omit<HTMLAttributes<HTMLDivElement>, 'class'>.

The attribute names, events and CSS hooks below are the Web Components reference.

Properties

Property	Attribute	Type	Default	Description
decorative	decorative	boolean	false	Purely visual — removes the separator role from the a11y tree
inset	inset	boolean	false	Pull the rule in from the edges
label	label	string | undefined	—	Convenience text label (equivalent to slotting text)
orientation	orientation	DividerOrientation	'horizontal'	Line direction
thickness	thickness	DividerThickness	'thin'	Line thickness
variant	variant	DividerVariant	'solid'	Line style

Slots

Slot	Description
(default)	Optional label content (text or an icon) centred in the rule

CSS parts

Part	Description
::part(line)	The rule(s)
::part(label)	The label wrapper

CSS custom properties

Property	Description
--nana-divider-color	Line colour
--nana-divider-thickness	Line thickness (overrides the thickness attribute)
--nana-divider-gradient	Gradient (gradient variant)
--nana-divider-label-color	Colour of the slotted label text

Slots

Slot	Description
(default)	Optional label content (text or an icon) centred in the rule

CSS Variables

Variable	Description
--nana-divider-color	Line colour
--nana-divider-thickness	Line thickness (overrides the thickness attribute)
--nana-divider-gradient	Gradient (gradient variant)

CSS Parts

Part	Description
line	The rule(s) — two <hr> elements when a label is present
label	The label wrapper

Related components

• Card
• Details
• Dialog
• Drawer
• Popup

Storybook

Explore Divider interactively Every state, prop, and edge case — with live controls — in Storybook.

View in Storybook