Shadow Panda
Shadow Panda
Component
Separator

Separator

Visually or semantically separates content.

shadcn/uiRadix UIAPI Reference

Radix Primitives

An open-source UI component library.

Blog
Docs
Source

Installation

Install the following dependencies

npm i @radix-ui/react-separator

Copy and paste the following code into your project

components/ui/separator/index.tsx
'use client'
 
import * as React from 'react'
import * as SeparatorPrimitive from '@radix-ui/react-separator'
import { styled } from '@shadow-panda/styled-system/jsx'
import { cx } from '@shadow-panda/styled-system/css'
import { separator } from '@shadow-panda/styled-system/recipes'
 
const BaseSeparator = React.forwardRef<
  React.ElementRef<typeof SeparatorPrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
>(({ className, orientation = 'horizontal', decorative = true, ...props }, ref) => (
  <SeparatorPrimitive.Root
    ref={ref}
    decorative={decorative}
    orientation={orientation}
    className={cx(separator({ orientation }), className)}
    {...props}
  />
))
BaseSeparator.displayName = SeparatorPrimitive.Root.displayName
 
export const Separator = styled(BaseSeparator)

Update the import paths to match your project setup

Usage

import { Separator } from '@/components/ui/separator'
<Separator />
SelectSheet