Overview all components

All the essential components you need to kickstart your Next.js or React app.

Built with modern libraries and best practices — so you can focus on building features, not setting up boilerplate.

I've taken care of the technical setup and selected the most common and effective tools used in modern web development. You don’t have to worry about which libraries to choose or how to structure your components — everything is ready to use:

• Tailwind CSS for fast and customizable UI styling
• Framer Motion for smooth and modern animations
• Formik + Yup for powerful and scalable form handling
• Built-in state and context management designed to work seamlessly in Next.js

Why use these components?

• 🚀 Plug & play – just copy, paste, and you're good to go
• ⚙️ Easy integration with any React or Next.js project
• 🎨 Fully customizable UI thanks to Tailwind utility classes
• 🧩 Reusable patterns to speed up your development process

Overview all components

1. Common UI

Explore our collection of essential UI components — buttons, cards, modals, and more. Each element is designed for consistency, usability, and modern aesthetics.

• View details for App Logo

  App Logo

• View details for Avatar

  Avatar

• View details for Button

  Button

• View details for Badges

  Badges

• View details for Typographies

  Typographies

• View details for Forms

  Forms

• View details for Notification

  Notification

• View details for Modal

  Modal

• View details for Card

  Card

• View details for Breadcrumb

  Breadcrumb

• View details for Pagination

  Pagination

• View details for Top Progress Bar

  Top Progress Bar

• View details for Table

  Table

• View details for Item Grid

  Item Grid

• View details for Youtube Video

  Youtube Video

2. Features UI

Discover powerful feature components that enhance user interaction and functionality. From Live Chat to advanced integrations, each tool adds value to the user experience.

• View details for Live Chat

  Live Chat

3. Sections

Sections showcase full-width components commonly used to structure pages, like Hero Banners, FAQs, and Feature blocks. Each one is designed to help you build clean, engaging, and consistent layouts.

• View details for Hero Banner

  Hero Banner

• View details for FAQs

  FAQs

4. Layouts UI

Browse essential layout components that structure your application’s interface. From headers and footers to flexible layout patterns, everything is built for scalability and clarity.

4.1 Common

• View details for Section Spacer

  Section Spacer

• View details for Container

  Container

• View details for Top Bar Navigation

  Top Bar Navigation

• View details for Side Bar Navigation

  Side Bar Navigation

4.2 Useful Layouts

• View details for Top Bar Layout

  Top Bar Layout

• View details for Side Bar Layout

  Side Bar Layout