Separator

Visually or semantically separates content.

Preview

Radix Primitives

An open-source UI component library.

Blog

Docs

Source

Code

import Separator from '@dinui/react/separator'

export default function SeparatorDemo() {
  return (
    <div>
      <div className="space-y-1">
        <h4 className="text-sm font-medium leading-none">Radix Primitives</h4>
        <p className="text-sm text-fg-weaker">An open-source UI component library.</p>
      </div>
      <Separator className="my-4" />
      <div className="flex h-5 items-center space-x-4 text-sm">
        <div>Blog</div>
        <Separator orientation="vertical" />
        <div>Docs</div>
        <Separator orientation="vertical" />
        <div>Source</div>
      </div>
    </div>
  )
}

Installation

Default

1. Follow Installation Guide

   To enable DinUI functionality in your project, you will need to properly set up Tailwind and install the necessary dependencies.

2. All done

   You now can start using this component in your project.

CLI

1. Follow Installation Guide

   To enable DinUI functionality in your project, you will need to properly set up Tailwind and install the necessary dependencies.

2. Run the following command in your project

   npm

   npx @dinui/cli@latest add separator

   yarn

   yarn dlx @dinui/cli@latest add separator

   pnpm

   pnpm dlx @dinui/cli@latest add separator

   bun

   bunx @dinui/cli@latest add separator

3. Update the import paths to match your project setup

4. All done

   You now can start using this component in your project.

Manual

1. Follow Installation Guide

   To enable DinUI functionality in your project, you will need to properly set up Tailwind and install the necessary dependencies.

2. Install dependencies

   npm

   npm install @radix-ui/react-separator tailwind-variants

   yarn

   yarn add @radix-ui/react-separator tailwind-variants

   pnpm

   pnpm add @radix-ui/react-separator tailwind-variants

   bun

   bun add @radix-ui/react-separator tailwind-variants

3. Copy and paste the following code into your project

   'use client'
   
   import * as SeparatorPrimitive from '@radix-ui/react-separator'
   import { forwardRef } from 'react'
   import { tv } from 'tailwind-variants'
   
   const separator = tv({
     slots: {
       root: 'shrink-0 bg-border',
     },
     variants: {
       variant: {
         default: {},
         weak: {
           root: 'opacity-50',
         },
       },
       orientation: {
         vertical: {
           root: 'min-h-full w-[0.0625rem]',
         },
         horizontal: {
           root: 'h-[0.0625rem] min-w-full',
         },
       },
     },
     defaultVariants: {
       variant: 'default',
       orientation: 'horizontal',
     },
   })
   
   const Separator = forwardRef<
     React.ElementRef<typeof SeparatorPrimitive.Root>,
     React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
   >((props, ref) => {
     const { root } = separator({ orientation: props.orientation })
   
     return (
       <SeparatorPrimitive.Root
         decorative
         orientation={'horizontal'}
         {...props}
         ref={ref}
         className={root({
           className: props.className,
         })}
       />
     )
   })
   Separator.displayName = SeparatorPrimitive.Root.displayName
   
   export default Separator
   export { separator, SeparatorPrimitive }

4. Update the import paths to match your project setup

5. All done

   You now can start using this component in your project.