GitHub
Copy-pasteStyled

Separator

Create borders between components

Separator draws an accessible horizontal or vertical boundary between groups of content.

Features

  • Horizontal and vertical orientation

  • Web separator role and aria-orientation

Installation

Separator is already installed in tamagui, or you can install it independently:

yarn add @tamagui/separator

Usage

Separator uses the borderWidth and borderColor attributes for its style, so override those when extending it.

export default () => (

  <XStack alignItems="center">

    <Paragraph>Blog</Paragraph>

    <Separator alignSelf="stretch" vertical />

    <Paragraph>Docs</Paragraph>

    <Separator alignSelf="stretch" vertical />

    <Paragraph>Source</Paragraph>

  </XStack>

)

API reference

Separator

Separator extends View, inheriting all the Tamagui standard props, plus:

Props

  • vertical

    boolean

    Shows the separator vertically.

    • Source

    v2-look Separator: theme line color over the unstyled @tamagui/ui Separator behavior (orientation + layout + the collapsed 1px rule, transparent by default). Supports the vertical variant. This is the exact source the registry ships — copy it into your app and the examples above import from your copy.

    components/tamagui/Separator.tsx
    // Styled Separator = the unstyled @tamagui/ui Separator behavior (orientation +
// layout + the collapsed 1px rule, transparent by default) + the default v2-look
// skin (theme line color). Single skin definition; the shadcn registry item is
// generated from this file.
import { type GetProps, styled } from '@tamagui/core'
import { Separator as UiSeparator } from '@tamagui/separator'

export const Separator = styled(UiSeparator, {
  displayName: 'Separator',
  borderColor: 'background-focus',
})

export type SeparatorProps = GetProps<typeof Separator>

    Dependencies

    yarn add @tamagui/core @tamagui/separator

    Expects theme tokens: background-focus.

    Need raw behavior without any skin? tamagui/unstyled re-exports the @tamagui/ui primitives (advanced).

    Previous

    Lucide Icons

    Next

    Spinner

    Edit this page on GitHub.