Catppuccin Components

Separator Component

A visual separator component for dividing content sections. Perfect for creating clear visual boundaries and organizing content layouts.

Basic Separator

A simple horizontal separator.

Content above the separator

Content below the separator

Orientations

Different separator orientations for various layouts.

Horizontal

Left content

Right content

Vertical

Top content

Bottom content

Variants

Different separator styles for various use cases.

Default

Content above

Content below

Subtle

Content above

Content below

Bold

Content above

Content below

Real-world Examples

Common separator patterns used in applications.

Card Sections

User Profile

Manage your account settings and preferences

Personal Information

Update your personal details

Security

Manage your password and security settings

Notifications

Configure your notification preferences

Navigation Menu

🏠Dashboard
📊Analytics
📁Projects
⚙️Settings
❓Help

Form Sections

Contact Form

Personal Details

Contact Information

Message

List Items

Recent Files12 items
document.pdf2.3 MB
presentation.pptx5.7 MB
spreadsheet.xlsx1.2 MB

Installation

npx shadcn@latest add https://catppuccin-components.vercel.app/r/separator.json