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
1
Initialize your project
First time only. Sets up config and installs base dependencies.
npx @kiwa-ui/cli init2
Add the component
This will install the component and any dependencies it needs.
npx @kiwa-ui/cli add separator1
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' />