suiss/ui
  • Docs
  • Components
  • Patterns
  • Interactions
  • Charts
  • Blocks
  • AI
GitHubCreate
DocsComponentsPatternsInteractionsChartsBlocksAICreate
Components84
  • Overview
  • Accordion
  • Alert
  • Alert Dialog
  • Alert Sheet
  • Amount Input
  • Aspect Ratio
  • Attachment
  • Avatar
  • Badge
  • Bottom Bar
  • Breadcrumb
  • Bubble
  • Button
  • Button Group
  • Calendar
  • Card
  • Carousel
  • Chart
  • Checkbox
  • Chip
  • Code Block
  • Collapsible
  • Combobox
  • Command
  • Context Menu
  • Dialog
  • Direction
  • Drawer
  • Dropdown Menu
  • Empty
  • FAB
  • Field
  • Fullscreen Menu
  • Haptics
  • Header
  • Hover Card
  • Icon
  • Input
  • Input Accessory Bar
  • Input Group
  • Input OTP
  • Item
  • Kbd
  • Keyboard Scroll View
  • Keypad
  • Label
  • Marker
  • Menubar
  • Message
  • Message Scroller
  • Native Select
  • Navigation Menu
  • Page Indicator
  • Pagination
  • Pin Pad
  • Popover
  • Progress
  • QR Scanner
  • Questionnaire
  • Radio Group
  • Resizable
  • Screen
  • Scroll Area
  • Select
  • Separator
  • Sheet
  • Sidebar
  • Signature Pad
  • Skeleton
  • Slider
  • Spinner
  • Switch
  • Tab Bar
  • Table
  • Tabs
  • Text
  • Textarea
  • Toast
  • Toggle
  • Toggle Group
  • Tooltip
  • Trace
  • Wheel Picker
  • Widget

suiss/ui · Component

Separator

A thin line that visually divides content, horizontally or vertically.

Separator is an open-source component from suiss/ui for React, React Native, SwiftUI and Jetpack Compose. The @esuiss/ui CLI copies its source into your project, so you own the code.

import { Separator } from "@/components/ui/separator"

export default function SeparatorDemo() {
  return (
    <div className="w-72">
      <div className="flex flex-col gap-1">
        <h4 className="text-sm font-medium">Account settings</h4>
        <p className="text-muted-foreground text-sm">
          Manage your profile and preferences.
        </p>
      </div>
      <Separator orientation="horizontal" className="my-4" />
      <div className="flex h-5 items-center gap-4 text-sm">
        <span>Profile</span>
        <Separator orientation="vertical" />
        <span>Billing</span>

Separator wraps the separator primitive of the chosen base. It draws a 1px line in the border color: full width when horizontal, and stretched to the container's height when vertical.

Use it between groups of content or between inline items. Inside menus and selects, use the dedicated separator part of that component instead.

Installation

CLI

$ pnpm dlx shadcn@latest add @esuiss/separator

Works in any project with a components.json. See Installation for the one-line registry setup. Or use the suiss/ui CLI:

$ pnpm dlx @esuiss/ui@latest add separator

Manual

  1. Install the dependencies and add the cn helper:
$ pnpm add @base-ui/react
  1. Copy the source into components/ui/separator.tsx:
components/ui/separator.tsx
"use client"

import { Separator as SeparatorPrimitive } from "@base-ui/react/separator"
import { cn } from "@/lib/utils"

function Separator({
  className,
  orientation = "horizontal",
  ...props
}: SeparatorPrimitive.Props) {
  return (
    <SeparatorPrimitive
      data-slot="separator"
      orientation={orientation}
      className={cn(
        "shrink-0 bg-border data-horizontal:h-px data-horizontal:w-full data-vertical:w-px data-vertical:self-stretch",
  1. Update the import paths to match your project.

Usage

import { Separator } from "@/components/ui/separator"
<div className="w-72">
  <div className="flex flex-col gap-1">
    <h4 className="text-sm font-medium">Account settings</h4>
    <p className="text-muted-foreground text-sm">
      Manage your profile and preferences.
    </p>
  </div>
  <Separator orientation="horizontal" className="my-4" />
  <div className="flex h-5 items-center gap-4 text-sm">
    <span>Profile</span>
    <Separator orientation="vertical" />
    <span>Billing</span>
    <Separator orientation="vertical" />
    <span>Security</span>
  </div>
</div>

orientation defaults to horizontal. Set orientation="vertical" inside a flex row; the line stretches to the row's height, so give the row a height.

Examples

Horizontal

Divides two stacked lines of text.

import { Separator } from "@/components/ui/separator"

export default function SeparatorHorizontal() {
  return (
    <div className="flex w-72 flex-col gap-3 text-sm">
      <span>Recent activity</span>
      <Separator orientation="horizontal" />
      <span>Archived items</span>
    </div>
  )
}

Vertical

Divides inline links in a row.

import { Separator } from "@/components/ui/separator"

export default function SeparatorVertical() {
  return (
    <div className="flex h-6 items-center gap-4 text-sm">
      <span>Docs</span>
      <Separator orientation="vertical" />
      <span>Blog</span>
      <Separator orientation="vertical" />
      <span>Changelog</span>
    </div>
  )
}

API Reference

01

Separator

Draws the dividing line.

Also accepts the props of the primitive part it wraps.

Accessibility

  • Renders with the separator role and an aria-orientation that matches orientation.

Notes

  • Uses data-slot="separator", and the primitive's orientation attributes set its size.
  • The color comes from the bg-border token.
iOS
Separator on iOS in light modeSeparator on iOS in dark mode
import { View } from "react-native"
import { Separator } from "@/components/ui/separator"
import { Text } from "@/components/ui/text"

export function SeparatorExample() {
  return (
    <View>
      <View className="gap-1">
        <Text className="text-sm font-medium">suiss</Text>
        <Text variant="muted">An open-source UI component library.</Text>
      </View>
      <Separator className="my-4" />
      <View className="h-5 flex-row items-center gap-4">
        <Text className="text-sm">Blog</Text>
        <Separator orientation="vertical" />
        <Text className="text-sm">Docs</Text>
import EsuissUI
import SwiftUI

struct SeparatorExample: View {
  var body: some View {
    VStack(alignment: .leading, spacing: 0) {
      VStack(alignment: .leading, spacing: 4) {
        Text(verbatim: "suiss")
          .textStyle(.sm, weight: .medium)
          .foregroundStyle(EsuissColor.foreground)
        Text("An open-source UI component library.")
          .textVariant(.muted)
      }
      Separator()
        .padding(.vertical, 16)
      HStack(spacing: 16) {
import androidx.compose.foundation.gestures.Orientation
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.unit.dp
import com.esuiss.ui.components.Separator
import com.esuiss.ui.components.Text
import com.esuiss.ui.components.TextVariant
import com.esuiss.ui.theme.Typography

Separator is a View drawn as a one-pixel line. Horizontal separators fill the width of their container; vertical separators stretch to the height of a row.

Installation

$ pnpm dlx shadcn@latest add @esuiss-rn/separator

See Installation for the components.json setup. Or use the suiss/ui CLI:

$ pnpm dlx @esuiss/ui@latest add separator
$ pnpm dlx @esuiss/ui@latest add separator --platform swift
$ pnpm dlx @esuiss/ui@latest add separator --platform kotlin

Manual

  1. Install the dependencies:
npx expo install cn

  1. Add the pieces it builds on: the primitives components/primitives/separator.tsx, components/primitives/use-render.tsx.

  2. Copy the source into components/ui/separator.tsx:

uniwind/components/ui/separator.tsx
import { cn } from "cn"
import { Separator as SeparatorPrimitive } from "@/components/primitives/separator"
import { resolveClassName } from "@/components/primitives/use-render"

function Separator({
  className,
  ...props
}: React.ComponentProps<typeof SeparatorPrimitive>) {
  return (
    <SeparatorPrimitive
      className={(state) =>
        cn(
          "shrink-0 bg-border",
          state.orientation === "horizontal"
            ? "h-px w-full"
            : "w-px self-stretch",
  1. Update the import paths to match your project.
  1. Install the dependencies:
npx expo install cn

  1. Add the pieces it builds on: the primitives components/primitives/separator.tsx, components/primitives/use-render.tsx.

  2. Copy the source into components/ui/separator.tsx:

nativewind/components/ui/separator.tsx
import { cn } from "cn"
import { Separator as SeparatorPrimitive } from "@/components/primitives/separator"
import { resolveClassName } from "@/components/primitives/use-render"

function Separator({
  className,
  ...props
}: React.ComponentProps<typeof SeparatorPrimitive>) {
  return (
    <SeparatorPrimitive
      className={(state) =>
        cn(
          "shrink-0 bg-border",
          state.orientation === "horizontal"
            ? "h-px w-full"
            : "w-px self-stretch",
  1. Update the import paths to match your project.

  1. Add the pieces it builds on: the primitives components/primitives/separator.tsx, components/primitives/use-render.tsx.

  2. Copy the source into components/ui/separator.tsx:

stylesheet/components/ui/separator.tsx
import { StyleSheet } from "react-native"
import { Separator as SeparatorPrimitive } from "@/components/primitives/separator"
import { useTheme } from "@/components/ui/theme"

const styles = StyleSheet.create({
  root: { flexShrink: 0 },
  horizontal: { height: 1, width: "100%" },
  vertical: { width: 1, alignSelf: "stretch" },
})

function Separator({
  style,
  ...props
}: React.ComponentProps<typeof SeparatorPrimitive>) {
  const { colors } = useTheme()
  return (
  1. Update the import paths to match your project.

  1. Target iOS 17 or later.

  2. Copy the theme files every view uses:

swift/Theme/Theme.swift
import CoreText
import SwiftUI
import UIKit

struct RGBA: Sendable {
  let red: CGFloat
  let green: CGFloat
  let blue: CGFloat
  let alpha: CGFloat

  init(_ hex: UInt32, _ alpha: CGFloat = 1) {
    red = CGFloat((hex >> 16) & 0xFF) / 255
    green = CGFloat((hex >> 8) & 0xFF) / 255
    blue = CGFloat(hex & 0xFF) / 255
    self.alpha = alpha
  }
swift/Theme/Tokens.swift
import SwiftUI

public enum EsuissColor {
  public static let background = Color.adaptive(light: .init(0xFFFFFF), dark: .init(0x000000))
  public static let foreground = Color.adaptive(light: .init(0x1D1D1F), dark: .init(0xF5F5F7))
  public static let card = Color.adaptive(light: .init(0xFFFFFF), dark: .init(0x1D1D1F))
  public static let cardForeground = Color.adaptive(light: .init(0x1D1D1F), dark: .init(0xF5F5F7))
  public static let popover = Color.adaptive(light: .init(0xFFFFFF), dark: .init(0x1D1D1F))
  public static let popoverForeground = Color.adaptive(light: .init(0x1D1D1F), dark: .init(0xF5F5F7))
  public static let primary = Color.adaptive(light: .init(0x0071E3), dark: .init(0x2997FF))
  public static let primaryForeground = Color.adaptive(light: .init(0xFFFFFF), dark: .init(0xFFFFFF))
  public static let secondary = Color.adaptive(light: .init(0x000000, 0.04), dark: .init(0xFFFFFF, 0.1))
  public static let secondaryForeground = Color.adaptive(light: .init(0x1D1D1F), dark: .init(0xF5F5F7))
  public static let muted = Color.adaptive(light: .init(0xF5F5F7), dark: .init(0x161617))
  public static let mutedForeground = Color.adaptive(light: .init(0x6E6E73), dark: .init(0xA1A1A6))
  public static let accent = Color.adaptive(light: .init(0x000000, 0.06), dark: .init(0xFFFFFF, 0.1))
  1. Copy the source:
swift/Components/Separator.swift
import SwiftUI

public struct Separator: View {
  let orientation: Axis

  public init(_ orientation: Axis = .horizontal) {
    self.orientation = orientation
  }

  public var body: some View {
    Rectangle()
      .fill(EsuissColor.border)
      .frame(width: orientation == .vertical ? 1 : nil, height: orientation == .horizontal ? 1 : nil)
      .frame(maxWidth: orientation == .horizontal ? .infinity : nil, maxHeight: orientation == .vertical ? .infinity : nil)
      .accessibilityHidden(true)
  }
  1. Add the files to your app target.
  1. Set minSdk to 24 or higher and add the dependencies:
build.gradle.kts
implementation(platform("androidx.compose:compose-bom:2026.09.00"))
implementation("androidx.compose.foundation:foundation")
implementation("androidx.compose.ui:ui")
  1. Copy the theme files every view uses:
kotlin/theme/Theme.kt
package com.esuiss.ui.theme

import android.content.res.AssetManager
import androidx.compose.foundation.isSystemInDarkTheme
import androidx.compose.runtime.Composable
import androidx.compose.runtime.CompositionLocalProvider
import androidx.compose.runtime.Immutable
import androidx.compose.runtime.staticCompositionLocalOf
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.dropShadow
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.Shape
import androidx.compose.ui.graphics.shadow.Shadow as DropShadow
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.text.font.Font
kotlin/theme/Tokens.kt
package com.esuiss.ui.theme

import androidx.compose.runtime.Immutable
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.unit.dp

@Immutable
data class Colors(
    val background: Color,
    val foreground: Color,
    val card: Color,
    val cardForeground: Color,
    val popover: Color,
    val popoverForeground: Color,
    val primary: Color,
  1. Copy the source:
kotlin/components/Separator.kt
package com.esuiss.ui.components

import androidx.compose.foundation.background
import androidx.compose.foundation.gestures.Orientation
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxHeight
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.width
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import com.esuiss.ui.theme.EsuissTheme

@Composable
fun Separator(
  1. Update the com.esuiss.ui package names to match your project.

Usage

import { Separator } from "@/components/ui/separator"
<View>
  <View className="gap-1">
    <Text className="text-sm font-medium">esuiss</Text>
    <Text variant="muted">An open-source UI component library.</Text>
  </View>
  <Separator className="my-4" />
  <View className="h-5 flex-row items-center gap-4">
    <Text className="text-sm">Blog</Text>
    <Separator orientation="vertical" />
    <Text className="text-sm">Docs</Text>
    <Separator orientation="vertical" />
    <Text className="text-sm">Source</Text>
  </View>
</View>

Use the default horizontal orientation between stacked blocks, and orientation="vertical" between items in a row. Add spacing with className, such as my-4.

Examples

Horizontal

A horizontal separator between two lines of text.

iOS
Separator (horizontal) on iOS in light modeSeparator (horizontal) on iOS in dark mode
import { View } from "react-native"
import { Separator } from "@/components/ui/separator"
import { Text } from "@/components/ui/text"

export function SeparatorHorizontalExample() {
  return (
    <View className="gap-4">
      <Text className="text-sm">Above</Text>
      <Separator />
      <Text className="text-sm">Below</Text>
    </View>
  )
}
import EsuissUI
import SwiftUI

struct SeparatorHorizontalExample: View {
  var body: some View {
    VStack(alignment: .leading, spacing: 16) {
      SeparatorText("Above")
      Separator()
      SeparatorText("Below")
    }
    .frame(maxWidth: .infinity, alignment: .leading)
  }
}

struct SeparatorText: View {
  let title: LocalizedStringKey
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import com.esuiss.ui.components.Separator
import com.esuiss.ui.components.Text
import com.esuiss.ui.theme.Typography

@Composable
fun SeparatorHorizontal() {
    Column(Modifier.fillMaxWidth(), verticalArrangement = Arrangement.spacedBy(16.dp)) {
        Text("Above", style = Typography.sm)
        Separator()
        Text("Below", style = Typography.sm)

Vertical

A vertical separator between two items in a row.

iOS
Separator (vertical) on iOS in light modeSeparator (vertical) on iOS in dark mode
import { View } from "react-native"
import { Separator } from "@/components/ui/separator"
import { Text } from "@/components/ui/text"

export function SeparatorVerticalExample() {
  return (
    <View className="h-6 flex-row items-center gap-4">
      <Text className="text-sm">Left</Text>
      <Separator orientation="vertical" />
      <Text className="text-sm">Right</Text>
    </View>
  )
}
import EsuissUI
import SwiftUI

struct SeparatorVerticalExample: View {
  var body: some View {
    HStack(spacing: 16) {
      SeparatorText("Left")
      Separator(.vertical)
      SeparatorText("Right")
    }
    .frame(height: 24)
  }
}

struct SeparatorText: View {
  let title: LocalizedStringKey
import androidx.compose.foundation.gestures.Orientation
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.height
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import com.esuiss.ui.components.Separator
import com.esuiss.ui.components.Text
import com.esuiss.ui.theme.Typography

@Composable
fun SeparatorVerticalExample() {
    SeparatorVerticalRow(listOf("Left", "Right"), 24)
}

API Reference

01

Separator

Also accepts the props of React.ComponentProps<typeof SeparatorPrimitive>.

Accessibility

  • The separator is decorative and hidden from VoiceOver and TalkBack.

Notes

  • Uses the bg-border token.
  • Light and dark colors follow the system appearance.
NextSheetPreviousSelect

On this page

  1. 01Installation
    • CLI
    • Manual
  2. 02Usage
  3. 03Examples
    • Horizontal
    • Vertical
  4. 04API Reference
    • Separator
  5. 05Accessibility
  6. 06Notes
  7. 07Installation
    • Manual
  8. 08Usage
  9. 09Examples
    • Horizontal
    • Vertical
  10. 10API Reference
    • Separator
  11. 11Accessibility
  12. 12Notes