DocumentationBasic ComponentsOverview

Basic Components

Essential UI components with smooth animations built with TailwindCSS and Framer Motion. These components provide the foundation for building beautiful, interactive user interfaces.

Basic Toast
reacttailwindcss
A versatile toast notification system with smooth animations for different alert types including success, error, warning, and info messages.
motion lucide-react
View Component
Basic Dropdown
reacttailwindcss
An elegant dropdown menu with smooth animations, hover effects, and proper keyboard accessibility for enhanced user interaction.

Select a size

motion lucide-react
View Component
Basic Modal
reacttailwindcss
A polished modal dialog with backdrop blur and dynamic entrance/exit animations that improves user experience for dialog interactions.
motion lucide-react usehooks-ts
View Component
Basic Accordion
reacttailwindcss
An expandable accordion component with smooth animations that's perfect for organizing content into collapsible sections.

An accordion is a vertically stacked set of interactive headings that expand/collapse to reveal content. The animated version adds smooth transitions between states, improving user experience.

motion lucide-react
View Component
Animated Input
reacttailwindcss
A text input with a floating label and smooth animation.
motion lucide-react
View Component
Animated Progress Bar
reacttailwindcss
A progress bar with a smooth fill animation and optional label.
Progress: 40%
Custom Color

Looking for more?

Explore our advanced components and text components for more UI elements.