Separator
quantumblack-design-system-registry/separatorFreeComponent
A visual divider that separates content. Supports horizontal and vertical orientation.
Install it
npx shadcn@latest add http://designsystem.quantumblack.com/r/separator.jsonSource
1'use client';23import * as SeparatorPrimitive from '@radix-ui/react-separator';4import type * as React from 'react';56import { cn } from '@/lib/utils';78function Separator({9 className,10 orientation = 'horizontal',11 decorative = true,12 ...props13}: React.ComponentProps<typeof SeparatorPrimitive.Root>) {14 return (15 <SeparatorPrimitive.Root16 data-slot="separator-root"17 decorative={decorative}18 orientation={orientation}19 className={cn(20 'bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px',21 className,22 )}23 {...props}24 />25 );26}2728export { Separator };
What it pulls in
npm packages
Other registry items
Files it writes
More from Quantumblack Design System Registry
All 47 items| Component | Registry | Kind | Access | Installs | Command |
|---|---|---|---|---|---|
| Accordionaccordion | Quantumblack Design System Registry | Components | Free | 1 dep | |
| Alertalert | Quantumblack Design System Registry | Components | Free | no deps | |
| Aspect Ratioaspect-ratio | Quantumblack Design System Registry | Components | Free | 1 dep | |
| Avataravatar | Quantumblack Design System Registry | Components | Free | 1 dep | |
| Badgebadge | Quantumblack Design System Registry | Components | Free | 1 dep | |
| Buttonbutton | Quantumblack Design System Registry | Components | Free | 1 dep | |
| Button Groupbutton-group | Quantumblack Design System Registry | Components | Free | 1 dep | |
| Calendarcalendar | Quantumblack Design System Registry | Components | Free | 2 deps |
