Tailwind CSS Separator Components

Dev Design Library indexes 53 Tailwind CSS separator components from 34 open-source UI libraries, with the most coming from Shadcn Space, ReUI, sv-efferd, Cojeev UI and glasscn. Each one links to its page with the source code, a live preview where available, the library license and the install command. Every library in this list styles its components with Tailwind CSS utility classes. Separator components belong to the Layout group.

• Separatorshadcn/ui · ReactVisually or semantically separates content.
• DividerdaisyUI · CSS (Tailwind)
• SeparatorHeroUI · ReactA simple line to separate content visually.
• DividerReact Spectrum · ReactDividers bring clarity to a layout by grouping and dividing content in close proximity. They can also be used to…
• Separatorcoss ui · ReactA separator element accessible to screen readers.
• DividerTremor · React
• Horizontal separator for content sections.ReUI · ReactHorizontal separator for content sections.
• separatorIntent UI · Reactseparator
• Section DividerUntitled UI React · React
• SeparatorTailGrids · ReactA separator component to separate content.
• SeparatorVengeance UI · React
• SeparatorToolcraft · React
• SeparatorPanel UI · React NativeHorizontal or vertical rule between content, optionally labelled.
• Button Group-04 - SeparatorShadcn Space · ReactButton group with separators
• DividerBoardUI · ReactSingle, double, and filled content separators.
• DividerTremor Blocks · React
• SeparatorShadcn Dashboard · React
• SeparatorAnimations (Svelte) · SvelteA flexible horizontal separator for dividing content with solid or gradient lines and optional centered labels.
• CheckpointAI Elements (Svelte) · SvelteA compact checkpoint component that pairs a separator with icon and trigger helpers for workflow checkpoints.
• SeparatorObsidianUI · React
• dB Scaleaudiocn · ReactTick marks and labels for a decibel range, shared by meters and faders.
• SeparatorShark UI · ReactVisually separate content with a line.
• SeparatorWatermelon UI · React
• Auth dividersv-efferd · Svelte
• Glass Separatorglasscn · ReactGlass Separator with five variants: clear, frosted, subtle, liquid, and liquid-refract
• MarkerHextaUI · ReactQuiet notes between content, like date dividers and system events, with sticky dates and times that read as Today or…
• MarkerCojeev UI · ReactSeparates or annotates a sequence with a short event, status, or time label.
• RuleMetal UI · React + SwiftUIAn engraved groove between groups; graphite on dark chrome.
• SeparatorSpaceUI · ReactDraws clean horizontal or vertical dividing lines between content blocks or tools to create clear visual separation.
• SeparatorOUI · ReactReact aria components Separator with shadcn characteristics.
• SeparatorD2Studio UI · ReactVisually or semantically separates content.
• SeparatorFibo · ReactA thin rule between groups of content, across or down, with an optional label.
• DividerReactFrame · ReactA horizontal or vertical divider with solid, dashed, dotted and gradient styles, an optional label with start, center…
• Separatorark-cn · ReactA shadcn-style separator component built with Ark UI primitives.
• Vertical separator for inline elements.ReUI · ReactVertical separator for inline elements.
• Input OTP-03 - With SeparatorShadcn Space · ReactInput OTP component with separator between segments
• Dashed linesv-efferd · Svelte
• Separatorglasscn · React
• SeparatorHextaUI · ReactA hairline that divides content horizontally or vertically, with an optional label and a decorative mode for purely…
• SeparatorCojeev UI · ReactDivides adjacent content with a horizontal or vertical rule.
• Vertical separator groups related menu items.ReUI · ReactVertical separator groups related menu items.
• Select-09 - Select with separatorShadcn Space · ReactSelect component
• Full width dividersv-efferd · Svelte
• Horizontal separator between items in a list.ReUI · ReactHorizontal separator between items in a list.
• Separator 01 - DefaultShadcn Space · ReactBasic horizontal separator dividing content sections
• Mask linesv-efferd · Svelte
• Separator with centered text labelReUI · ReactSeparator with centered text label
• Separator 02 - VerticalShadcn Space · ReactVertical separators between stat columns with label and value
• Order summary with separatorsReUI · ReactOrder summary with separators
• Separator 03 - Horizontal Label PlacementShadcn Space · ReactHorizontal separators with inline start, center, and end text labels
• Separator 04 - Vertical Label PlacementShadcn Space · ReactVertical separators with top, center, and bottom text labels
• Separator 05 - DashedShadcn Space · ReactDashed horizontal separator
• Separator 06 - Gradient FadedShadcn Space · ReactGradient faded horizontal separator that fades from transparent to border color

Libraries with Tailwind CSS separator components

• Shadcn Space
• ReUI
• sv-efferd
• Cojeev UI
• glasscn

Related categories

• Separator Components
• React Separator Components
• Svelte Separator Components
• shadcn/ui Separator Components
• Tailwind CSS Layout Components
• Tailwind CSS Grid Components
• Tailwind CSS Bento Grid Components
• Tailwind CSS App Shell Components
• Tailwind CSS Stack Components
• Tailwind CSS Scroll Area Components
• Tailwind CSS Container Components
• Tailwind CSS Split Pane Components
• Tailwind CSS Window Frame Components
• Tailwind CSS Aspect Ratio Components
• Tailwind CSS Sticky Scroll Components
• Tailwind CSS Masonry Components