Glass Textarea
washiveil/glass-textareaFreeComponent
Multiline input on a translucent glass surface with a ruri focus ring.
Install it
npx shadcn@latest add https://washiveil.alexchih.com/r/glass-textarea.jsonSource
1import * as React from 'react'23import { cn } from '@/lib/utils'45const GlassTextarea = React.forwardRef<HTMLTextAreaElement, React.ComponentProps<'textarea'>>(6 ({ className, ...props }, ref) => {7 return (8 <textarea9 className={cn(10 'flex min-h-24 w-full rounded-xl border border-border bg-glass px-3.5 py-2.5 text-sm text-foreground backdrop-blur-md placeholder:text-muted-foreground transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive',11 className,12 )}13 ref={ref}14 {...props}15 />16 )17 },18)19GlassTextarea.displayName = 'GlassTextarea'2021export { GlassTextarea }
What it pulls in
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 |
