Divider
Basic Horizontal Dividers
Simple horizontal dividers to separate content sections.
Content above the divider
Content below the divider
Section 1
This is the first section with some content to demonstrate the divider.
Section 2
This is the second section separated by a horizontal divider.
Dividers with Text
Dividers with text labels for better context.
Choose your preferred login method:
Free Plan
Basic features included
Pro Plan
All features included
Recent Activity
• Updated profile information
• Completed onboarding
• Created new project
• Invited team members
Vertical Dividers
Vertical dividers for inline content separation.
Custom Styled Dividers
Dividers with custom colors and styling.
Success section
Operation completed successfully
Warning section
Please review the following items
Error section
An error occurred during processing
Thick divider
Content with thick separator
Dashed divider
Content with dashed separator
Dotted divider
Content with dotted separator
Dividers with Icons
Dividers enhanced with icons for visual appeal.
Customer Reviews
Amazing product! Highly recommended.
Favorite Items
Items you've marked as favorites
Wishlist
Items you want to buy later
Account Settings
• Profile information
• Privacy settings
• Notification preferences
Form Section Dividers
Dividers to organize form sections clearly.
User Registration
Navigation Dividers
Dividers in navigation menus and breadcrumbs.
Content Layout Dividers
Dividers for organizing complex content layouts.
Article Title
March 15, 2024This is the article excerpt that gives readers a preview of the content...
Main Content
This is the main content area with detailed information and primary content.
Additional content continues here with more detailed information.
Sidebar
Related Article 1
Related Article 2
Related Article 3
Spacing Examples
Different spacing options for dividers.
Tight spacing
Content above
Content below
Normal spacing
Content above
Content below
Loose spacing
Content above
Content below
| Name | Type | Default | Details |
|---|---|---|---|
| children | React.ReactNode | Optional | Content to display in the divider. |
| childrenClassName | string | ' ' | You can customise children by passing tailwind classes. |
| separatorClassName | string | ' ' | You can customise separator by passing tailwind classes. |