Separator

A horizontal or vertical line that visually separates content, useful for creating visual hierarchy and grouping related items.

...

How to Import

Add this import to your component file

app/page.tsx

1import { Separator } from '@/components/lightswind/separator';

Props

Properties and options for customizing this component

Name	Type	Default	Description	Required

orientation	"horizontal" \| "vertical"	"horizontal"	The orientation of the separator.	Optional
decorative	boolean	true	Whether the separator is decorative or functional.	Optional
thickness	"thin" \| "default" \| "thick"	"default"	The thickness of the separator.	Optional
lineStyle	"solid" \| "dashed" \| "dotted"	"solid"	The style of the separator line.	Optional
variant	"default" \| "muted" \| "accent" \| "primary"	"default"	The color variant of the separator.	Optional

Basic Usage

Here’s a simple example of how to use this component

app/page.tsx

1import { Separator } from '@/components/lightswind/separator';
2
3export function SeparatorDemo() {
4  return (
5    <div>
6      <div className="space-y-1">
7        <h4 className="text-sm font-medium leading-none">Radix Primitives</h4>
8        <p className="text-sm text-muted-foreground">
9          An open-source UI component library.
10        </p>
11      </div>
12      <Separator className="my-4" />
13      <div className="flex h-5 items-center space-x-4 text-sm">
14        <div>Blog</div>
15        <Separator orientation="vertical" />
16        <div>Docs</div>
17        <Separator orientation="vertical" />
18        <div>Source</div>
19      </div>
20    </div>
21  );
22}

Previousscroll-area

Nexttabs

A product byＭＵＨＩＬＡＮ and Team❤️.

Separator

A horizontal or vertical line that visually separates content, useful for creating visual hierarchy and grouping related items.

...

How to Import

Add this import to your component file

app/page.tsx

1import { Separator } from '@/components/lightswind/separator';

Props

Properties and options for customizing this component

Name	Type	Default	Description	Required

orientation	"horizontal" \| "vertical"	"horizontal"	The orientation of the separator.	Optional
decorative	boolean	true	Whether the separator is decorative or functional.	Optional
thickness	"thin" \| "default" \| "thick"	"default"	The thickness of the separator.	Optional
lineStyle	"solid" \| "dashed" \| "dotted"	"solid"	The style of the separator line.	Optional
variant	"default" \| "muted" \| "accent" \| "primary"	"default"	The color variant of the separator.	Optional

Basic Usage

Here’s a simple example of how to use this component

app/page.tsx

1import { Separator } from '@/components/lightswind/separator';
2
3export function SeparatorDemo() {
4  return (
5    <div>
6      <div className="space-y-1">
7        <h4 className="text-sm font-medium leading-none">Radix Primitives</h4>
8        <p className="text-sm text-muted-foreground">
9          An open-source UI component library.
10        </p>
11      </div>
12      <Separator className="my-4" />
13      <div className="flex h-5 items-center space-x-4 text-sm">
14        <div>Blog</div>
15        <Separator orientation="vertical" />
16        <div>Docs</div>
17        <Separator orientation="vertical" />
18        <div>Source</div>
19      </div>
20    </div>
21  );
22}

Previousscroll-area

Nexttabs

A product byＭＵＨＩＬＡＮ and Team❤️.

Separator

How to Import

Props

Basic Usage

On This Page

Contribute

Separator

How to Import

Props

Basic Usage

On This Page

Contribute

React Separator Component - Lightswind UI

Key Details of React Separator

Separator

How to Import

Props

Basic Usage

On This Page

Contribute

Separator

How to Import

Props

Basic Usage

On This Page

Contribute