orientation- Type
"horizontal" | "vertical"- Default
"horizontal"- Description
- Direction of the separator.
Components / Layout
Separator
பிரிப்பான்
Separators are thin horizontal or vertical rules used to visually divide content. They communicate structure without adding whitespace alone.
பிரிப்பான்கள் உள்ளடக்கத்தை காட்சி ரீதியாக பிரிக்க பயன்படும் மெல்லிய கோடுகள்.
Horizontal separator
Component preview
Profile section dividerசுயவிவர பகுதி பிரிப்பான்Vertical separator
Component preview
Inline stat dividersநேர்கோட்டு புள்ளிவிவர பிரிப்பான்Structure
Anatomy
1 part documented for implementation and review.
1
Separator
பிரிப்பான்required<div>Thin 1px divider with role=separator. Horizontal by default (h-px w-full). Supports vertical orientation (w-px h-full) for side-by-side layouts. Uses bg-border color token.
API
Props
decorative- Type
boolean- Default
true- Description
- When true, hidden from assistive technologies (role=none).
| Prop | Type | Default | Description |
|---|---|---|---|
orientation | "horizontal" | "vertical" | "horizontal" | Direction of the separator. |
decorative | boolean | true | When true, hidden from assistive technologies (role=none). |
Best practices
Use Separator to divide semantically distinct sections
அர்த்தத்தில் வேறுபட்ட பகுதிகளை பிரிக்க Separator பயன்படுத்தவும்
A Separator communicates a meaningful break between sections — like personal info and address — where whitespace alone would be ambiguous.
Separator தனிப்பட்ட தகவல் மற்றும் முகவரி போன்ற பகுதிகளுக்கிடையே அர்த்தமுள்ள இடைவெளியை தெரிவிக்கிறது — இடைவெளி மட்டுமே போதாத இடங்களில்.
Don't overuse Separators as decoration
அலங்காரமாக Separator-ஐ அதிகமாக பயன்படுத்தாதே
Adding a Separator after every item, or using them purely for visual decoration, creates clutter — whitespace and font-weight differences are often sufficient.
ஒவ்வொரு உருப்படிக்கும் பிறகு Separator சேர்ப்பது அல்லது அலங்காரத்திற்காக மட்டும் பயன்படுத்துவது குழப்பத்தை உருவாக்குகிறது.
Use vertical Separator between inline stats
நேர்கோட்டு புள்ளிவிவரங்களுக்கிடையே செங்குத்து Separator பயன்படுத்தவும்
Vertical separators with an explicit height (h-8 or h-10) work well to divide side-by-side statistics in a stat bar or header.
வெளிப்படையான உயரத்துடன் (h-8 அல்லது h-10) செங்குத்து பிரிப்பான்கள் ஒரு புள்ளிவிவர பட்டியில் பக்கத்தில் உள்ள புள்ளிவிவரங்களை பிரிக்க நன்றாக செயல்படுகின்றன.
Don't use Separator to replace proper layout spacing
சரியான தளவமைப்பு இடைவெளியை மாற்றுவதற்கு Separator பயன்படுத்தாதே
Between unrelated sections of a page, use margin/padding or section tags — reserve Separator for logically grouped content within a single card or panel.
பக்கத்தின் தொடர்பில்லாத பகுதிகளுக்கிடையே margin/padding அல்லது section குறிச்சொற்களை பயன்படுத்தவும் — Separator ஒரே அட்டை அல்லது பலகத்தில் தர்க்கரீதியாக தொகுக்கப்பட்ட உள்ளடக்கத்திற்காக ஒதுக்கி வைக்கவும்.