Separator
glasswave/separatorFreeComponent
Visually or semantically separates content.
Live preview
live · rendered by the registry
Rendered by glasswave on their own page — this is the component running, not a screenshot of it.Install it
npx shadcn@latest add https://glasswave.denizisik.com/r/separator.jsonSource
1"use client";23import * as SeparatorPrimitive from "@radix-ui/react-separator";4import * as React from "react";56import { cn } from "@/lib/utils";78const Separator = React.forwardRef<9 React.ElementRef<typeof SeparatorPrimitive.Root>,10 React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>11>(12 (13 { className, orientation = "horizontal", decorative = true, ...props },14 ref,15 ) => (16 <SeparatorPrimitive.Root17 ref={ref}18 decorative={decorative}19 orientation={orientation}20 className={cn(21 "shrink-0 bg-gray-200 dark:bg-white/10",22 orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",23 className,24 )}25 {...props}26 />27 ),28);29Separator.displayName = SeparatorPrimitive.Root.displayName;3031export { Separator };
What it pulls in
npm packages
Files it writes
More from glasswave
All 60 items| Component | Registry | Kind | Access | Installs | Command |
|---|---|---|---|---|---|
| Accordionaccordion | glasswave | Components | Free | 2 deps | |
| Alertalert | glasswave | Components | Free | 1 dep | |
| Alert Dialogalert-dialog | glasswave | Components | Free | 1 dep | |
| Aspect Ratioaspect-ratio | glasswave | Components | Free | 1 dep | |
| Avataravatar | glasswave | Components | Free | 1 dep | |
| Badgebadge | glasswave | Components | Free | 1 dep | |
| Breadcrumbbreadcrumb | glasswave | Components | Free | 2 deps | |
| Buttonbutton | glasswave | Components | Free | 2 deps |
