Separator

Layout

A thin visual divider that separates content sections or groups into distinct horizontal or vertical zones.

Loading component...

Run the following command to add this component to your project:

$pnpm dlx static-ui add separator

Import the component directly from the package:

import { Separator } from "@static-ui/ui"

Common props available for this component:

Prop	Type	Description
orientation	"horizontal" \| "vertical"	The orientation of the separator.
className	string	Additional CSS classes to apply.

Uses `role="separator"` when decorative. Can be oriented horizontally or vertically.

AccordionVertically stacked interactive headings with reveal panels.

Aspect RatioContent-sized to a desired ratio.

CardBounded content container.

CarouselHorizontally scrolling item sets.

CollapsibleExpandable content sections.

Scroll AreaCustom styled scroll container.

TabsTabbed content panels.