Glass Separator
washiveil/glass-separatorFreeComponent
Hairline separator on the soft border register, built on Radix Separator.
Install it
npx shadcn@latest add https://washiveil.alexchih.com/r/glass-separator.jsonSource
1'use client'23import * as React from 'react'4import { Separator as SeparatorPrimitive } from 'radix-ui'56import { cn } from '@/lib/utils'78const GlassSeparator = React.forwardRef<9 React.ComponentRef<typeof SeparatorPrimitive.Root>,10 React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>11>(({ className, orientation = 'horizontal', decorative = true, ...props }, ref) => (12 <SeparatorPrimitive.Root13 ref={ref}14 decorative={decorative}15 orientation={orientation}16 className={cn(17 'shrink-0 bg-border',18 orientation === 'horizontal' ? 'h-px w-full' : 'h-full w-px',19 className,20 )}21 {...props}22 />23))24GlassSeparator.displayName = SeparatorPrimitive.Root.displayName2526export { GlassSeparator }
What it pulls in
npm packages
Other registry items
Files it writes
More from washiveil
All 58 items| Component | Registry | Kind | Access | Installs | Command |
|---|---|---|---|---|---|
| Ambient Fieldambient-field | washiveil | Components | Free | no deps | |
| Chipchip | washiveil | Components | Free | 1 dep | |
| Code Badgecode-badge | washiveil | Components | Free | no deps | |
| Glass Accordionglass-accordion | washiveil | Components | Free | 2 deps | |
| Glass Alertglass-alert | washiveil | Components | Free | 1 dep | |
| Glass Alert Dialogglass-alert-dialog | washiveil | Components | Free | 1 dep | |
| Glass Aspect Ratioglass-aspect-ratio | washiveil | Components | Free | 1 dep | |
| Glass Avatarglass-avatar | washiveil | Components | Free | 1 dep |
