Getting Started
Components
Special Effects
Animations
Text Animations
Backgrounds
A flexible horizontal separator for dividing content with solid or gradient lines and optional centered labels.
Installation
pnpm dlx shadcn-svelte@latest add http://sveltekit-prerender/r/separator.json
Copy the Source Code
Copy and paste the following code into your project:
index.ts
separator.svelte
Folder Structure
Folder Structure
Usage
Examples
Gradient
A softly fading gradient separator.
Label
A separator with a centered text label.
Section
Gradient with Label
A gradient separator framing a centered text label.
Section
Pill Label
A separator with a bordered pill-shaped label.
Section
Dashed Pill Label
A separator with a dashed pill-shaped label.
Section
Icon Label
A gradient separator with a centered icon treatment.
Sign-up Form
Use a labeled separator to distinguish email registration from social sign-up options.
Props
Separator
A horizontal divider with optional gradient styling and centered snippet content.
| Name | Type | Default | Description |
|---|---|---|---|
class | string | | Additional CSS classes applied to the separator line |
gradient | boolean | false | Whether to render the separator line with a fading gradient |
children | Snippet | | Optional content rendered as a centered label between the separator lines |
textClass | string | "" | Additional CSS classes applied to the centered label wrapper |