tetra-ui Logotetra ui

Separator

Divides content with a horizontal or vertical line.

separator

Installation

npx shadcn@latest add @tetra-ui/separator

Usage

import { Separator } from "@/components/ui/separator";
<Separator />

Orientation

Use orientation="vertical" for inline dividers between items in a row:

<Stack direction="row" gap="md">
  <Text>Blog</Text>
  <Separator orientation="vertical" />
  <Text>About</Text>
  <Separator orientation="vertical" />
  <Text>Contact</Text>
</Stack>

Thickness

The default is a hairline separator. Use thickness="thick" for a more prominent divider:

<Separator thickness="thick" />
<Separator orientation="vertical" thickness="thick" />

Select

A component that allows users to select a value from a list of options.

Skeleton

A component to display placeholder content while in a loading state.

On this page

InstallationUsageOrientationThickness