DocumentationBasic ComponentsOverview

Basic Components

Essential UI components with smooth animations built with TailwindCSS and Framer Motion.

Basic Toast

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

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

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

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

A text input with a floating label and smooth animation.

motion lucide-react
View Component

Animated Progress Bar

A progress bar with a smooth fill animation and optional label.

Progress: 40%
Custom Color

Looking for more?

Explore our other component groups for more UI elements.

Basic Components | SmoothUI