Separator

Visual separator based on primitives

Fict shadcnThe Foundation for your Design System

A set of beautifully designed Fict components that you can customize, extend, and build on.

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

...

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

export default function SeparatorDemoExample() { return <div class="grid w-96 gap-4"><div><strong>Fict shadcn</strong><p class="text-sm text-muted-foreground">The Foundation for your Design System</p></div><Separator /><p class="text-sm">A set of beautifully designed Fict components that you can customize, extend, and build on.</p></div> }

Installation

npx @fictjs/shadcn@latest add separator

Install the runtime dependencies:

npm install @fictjs/radix-ui

Copy the Fict shadcn component into your project.

Source

components/ui/separator.tsx

src/components/ui/separator.tsx

import { Separator as SeparatorPrimitive } from '@fictjs/radix-ui'

import { cn } from '@/lib/cn'

type SeparatorProps = {
  class?: string
  orientation?: 'horizontal' | 'vertical'
  decorative?: boolean
  [key: string]: unknown
}

export function Separator(props: SeparatorProps) {
  const { class: className, orientation = 'horizontal', decorative = true, ...rest } = props
  return (
    <SeparatorPrimitive.Root
      decorative={decorative}
      orientation={orientation}
      class={cn('shrink-0 bg-border', orientation === 'horizontal' ? 'h-px w-full' : 'h-full w-px', className)}
      {...rest}
    />
  )
}

Usage

Examples

Vertical

BlogDocsSource

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

...

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

export default function SeparatorVerticalExample() { return <div class="flex h-5 items-center gap-4"><span>Blog</span><Separator orientation="vertical" /><span>Docs</span><Separator orientation="vertical" /><span>Source</span></div> }

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

...

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

const entries = [['Settings', 'Manage preferences'], ['Account', 'Profile & security'], ['Help', 'Support & docs']]
export default function SeparatorMenuExample() { return <div class="flex items-center gap-4">{entries.map((entry, index) => <>{index ? <Separator orientation="vertical" class="h-10" /> : null}<div><strong>{entry[0]}</strong><small class="block text-muted-foreground">{entry[1]}</small></div></>)}</div> }

List

Item 1: Value 1

Item 2: Value 2

Item 3: Value 3

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

...

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

const entries = [['Item 1', 'Value 1'], ['Item 2', 'Value 2'], ['Item 3', 'Value 3']]
export default function SeparatorListExample() { return <div class="grid w-72 gap-3">{entries.map((entry, index) => <>{index ? <Separator /> : null}<dl class="flex justify-between"><dt>{entry[0]}</dt><dd>{entry[1]}</dd></dl></>)}</div> }

Rtl

Fict shadcnالأساس لنظام التصميم الخاص بك

مجموعة من المكونات المصممة بشكل جميل يمكنك تخصيصها وتوسيعها والبناء عليها.

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

...

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

const translations = { ar: ['الأساس لنظام التصميم الخاص بك', 'مجموعة من المكونات المصممة بشكل جميل يمكنك تخصيصها وتوسيعها والبناء عليها.'], he: ['הבסיס למערכת העיצוב שלך', 'סט של רכיבים מעוצבים בצורה יפה שאתה יכול להתאים אישית, להרחיב ולבנות עליהם.'], en: ['The Foundation for your Design System', 'A set of beautifully designed Fict components that you can customize, extend, and build on.'] } as const
export default function SeparatorRtlExample() { let language = $state<keyof typeof translations>('ar'); const direction = () => language === 'en' ? 'ltr' : 'rtl'; return <div class="grid gap-4"><select value={language} onChange={event => { language = event.currentTarget.value as keyof typeof translations }}><option value="ar">Arabic (العربية)</option><option value="he">Hebrew (עברית)</option><option value="en">English</option></select><div class="grid w-96 gap-4" dir={direction()}><div><strong>Fict shadcn</strong><p>{translations[language][0]}</p></div><Separator /><p>{translations[language][1]}</p></div></div> }

Select Sheet