Stalk UI

Component

Separator

Divides content with a horizontal or vertical rule.

Install

Run the CLI to copy the source into your project.

pnpm dlx @stalk-ui/cli add @stalk-ui/separator

Examples

Live previews render through the docs app's PandaCSS codegen.

Theme
<div style={{ width: 320 }}>
  <div style={{ color: 'var(--colors-fg-default)' }}>Stalk UI</div>
  <Separator style={{ marginBlock: 12 }} />
  <div style={{ color: 'var(--colors-fg-muted)' }}>
    An accessible, PandaCSS-native component library.
  </div>
</div>
Theme
<div
  style={{
    alignItems: 'center',
    color: 'var(--colors-fg-default)',
    display: 'flex',
    gap: 12,
    height: 20,
  }}
>
  <span>Docs</span>
  <Separator orientation="vertical" />
  <span>Storybook</span>
  <Separator orientation="vertical" />
  <span>GitHub</span>
</div>

Props

Public component props extracted from the source TypeScript types.

PropTypeRequiredDefaultDescription
`orientation``SeparatorOrientation`No--

Variants

Variant axes exposed by the underlying PandaCSS recipe or slot recipe.

VariantValues
`orientation``horizontal`, `vertical`

Registry

Files this component contributes to your registry install.

  • Manifest: `/r/separator.json`
  • Recipe: `separator`
  • Files: `src/components/ui/separator.tsx`