Separator

Installation#

1. Install the dependencies

   npm install cn radix-ui

2. Copy the source into your project

   components/ui/separator.tsx

   "use client"import * as React from "react"import { cn } from "cn"import { Separator as SeparatorPrimitive } from "radix-ui"function Separator({  className,  orientation = "horizontal",  decorative = true,  ...props}: React.ComponentProps<typeof SeparatorPrimitive.Root>) {  return (    <SeparatorPrimitive.Root      data-slot="separator"      decorative={decorative}      orientation={orientation}      className={cn(        "shrink-0 bg-border data-horizontal:h-px data-horizontal:w-full data-vertical:w-px data-vertical:self-stretch",        className      )}      {...props}    />  )}export { Separator }

3. Make sure the foundation is in place

   Components read their colors, radius and surfaces from the tokens in app/globals.css. See Theming.

Usage#

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

Examples#