Liquid Glass
A liquid glass effect with a dynamic background feat. MacOS Dock Icons.
Dependencies:lucide-react
Claude Style Chat Input
A chat input that looks like Claude.
What's new, Suraj?
Dependencies:buttonlucide-react
Quick Tooltip Actions
Quick tooltip actions for the user. Hover on the user icon to see the tooltip.
Dependencies:@phosphor-icons/reacttooltipbutton
ChatGPT Select Content
Select, add content from messages and add them to the input.
You can select parts of this text to add to your next message!
Dependencies:textarealucide-reactbuttondropdown-menuframer-motion@omsimos/react-highlight-popover
Google Drive Toaster
A toaster that uploads files to Google Drive.
Drive Upload Toast Demo
Click any file type below to simulate upload progress
Maximum 6 concurrent uploads • 0/6 active
Choose file type to upload:
Dependencies:lucide-react
Status Pills
A collection of status indicators for your UI.
Status Pill Components
A collection of status indicators for your UI
General Status
Priority Levels
Types
Priority Levels
Custom Icons
Dependencies:@radix-ui/react-tooltip@phosphor-icons/reactclass-variance-authority
AI Agent Avatar
A chat input that looks like Claude.
OR
![](data:image/svg+xml;utf8,<svg width="300" height="300" viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg"><rect id="bg" width="300" height="300" fill="rgb(212,29,140)" /><path d="m 150 643 Q 83 217 -343 150 Q 83 83 150 -343 Q 217 83 643 150 Q 217 217 150 643 z" fill="rgb(248,66,126)" /><path d="m 150 478 Q 300 0 -178 150 Q 300 300 150 -178 Q 0 300 478 150 Q 0 0 150 478 z" fill="rgb(7,189,129)" /><path d="m 150 333 Q 296 4 -33 150 Q 296 296 150 -33 Q 4 296 333 150 Q 4 4 150 333 z" fill="rgb(43,226,115)" /></svg>)
Dependencies:generate-avatarinputbutton