XD :UI Library
AI / Generic React UI Components

My personal set of small UI components for my projects.

Built with onShadcn/UI

We'll be adding more components as I go.

Star this repo All Components

Glass Audio Recorder

A beautiful glass morphism audio recording interface with waveform visualization

Listening

Speak freely, we'll make sense of it after.

1:32

Dependencies:lucide-react@phosphor-icons/reactbutton

Motion Grid States

New motion grid component to replace traditional loaders

Dependencies:framer-motion

Liquid Glass

A liquid glass effect with a dynamic background feat. MacOS Dock Icons.

Claude

Finder

Chatgpt

Maps

Safari

Steam

How can i help you today?

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.

ChatGPT Select Content

Select, add content from messages and add them to the input.

Hi there! Can you tell me about Next.js 15?

Next.js 15 introduces several exciting features like improved server components, optimized image handling, and experimental support for React Compiler. It aims to enhance developer experience and application performance. You can select parts of this text to add to your next message!

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

Pending

In Progress

Completed

Failed

Active

Inactive

Warning

Priority Levels

High Priority

Medium Priority

Low Priority

Types

Urgent

Normal

Info

Priority Levels

ACActive

Pending

HIHigh Priority

Custom Icons

Completed

Warning

Dependencies:@radix-ui/react-tooltip@phosphor-icons/reactclass-variance-authority

AI Agent Avatar

A chat input that looks like Claude.

OR

Dependencies:generate-avatarinputbutton

Contact

Hosted onVercel

Ideated withbysurajgaud