Separator

A visual divider with horizontal and vertical orientations

registry/ui/separator.tsx

import type { FC, JSX } from 'hono/jsx'
import { cn } from '@/lib/utils'

type SeparatorProps = JSX.IntrinsicElements['div'] & {
  orientation?: 'horizontal' | 'vertical'
  decorative?: boolean
}

export const Separator: FC<SeparatorProps> = ({
  orientation = 'horizontal',
  decorative = true,
  class: className,
  ...props
}) => (
  <div
    data-slot="separator"
    role={decorative ? 'none' : 'separator'}
    aria-orientation={decorative ? undefined : orientation}
    data-orientation={orientation}
    class={cn(
      'bg-border shrink-0',
      orientation === 'horizontal' ? 'h-px w-full' : 'h-full w-px',
      className
    )}
    {...props}
  />
)

Installation

Initialize your project

First time only. Sets up config and installs base dependencies.

npx @kiwa-ui/cli init

Add the component

This will install the component and any dependencies it needs.

npx @kiwa-ui/cli add separator

Add the source file

Add this file to your project.

registry/ui/separator.tsx

import type { FC, JSX } from 'hono/jsx'
import { cn } from '@/lib/utils'

type SeparatorProps = JSX.IntrinsicElements['div'] & {
  orientation?: 'horizontal' | 'vertical'
  decorative?: boolean
}

export const Separator: FC<SeparatorProps> = ({
  orientation = 'horizontal',
  decorative = true,
  class: className,
  ...props
}) => (
  <div
    data-slot="separator"
    role={decorative ? 'none' : 'separator'}
    aria-orientation={decorative ? undefined : orientation}
    data-orientation={orientation}
    class={cn(
      'bg-border shrink-0',
      orientation === 'horizontal' ? 'h-px w-full' : 'h-full w-px',
      className
    )}
    {...props}
  />
)

Usage

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

<Separator />
<Separator orientation='vertical' />