Building UI Components

In our previous lesson, we talked about how to quickly configure NextDevKit's built-in UI components. While NextDevKit includes many UI components, it can't meet everyone's needs. You can build other UI components based on your requirements. Today, let's discuss how I usually build the UI components I need quickly.

Shadcn UI Components

NextDevKit uses Shadcn UI to build the base component library, such as button, alert, card, input, select, table, etc. In the src/components/ui directory, you can find all Shadcn UI components.

However, NextDevKit doesn't install all Shadcn UI components. This is based on bundle size considerations and maintains the good engineering practice of importing on demand.

🚀 How to Add Shadcn UI Components in NextDevKit

Since NextDevKit has already configured the basic Shadcn UI setup, you just need to add the components you need based on your requirements.

# Add a single component
npx shadcn@latest add button

# Add multiple common components at once
npx shadcn@latest add card dialog sheet table dropdown-menu

Using Components in Your Project

import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"

🧱 Built-in Components

In addition to Shadcn UI's basic components, NextDevKit also provides rich built-in components covering all aspects of SaaS applications:

🔐 Authentication Components (`/auth/`)

Complete user authentication flow components:

login-form - Login form
signup-form - Sign-up form
forgot-password-form - Forgot password form
reset-password-form - Reset password form
social-signin - Social login button group

📊 Dashboard Components (`/dashboard/`)

Essential layout components for admin panel:

dashboard-header - Dashboard top navigation
dashboard-sidebar-menu - Sidebar menu
dashboard-sidebar-user - User information display
sidebar - Collapsible sidebar

🎯 Marketing Components (`/marketing/`)

Professional components for building marketing pages:

Homepage Components: hero-section, feature-section
Business Components: pricing, testimonials
Interactive Components: contact-form, faq
Content Components: changelog, affiliate

⚙️ Settings Components (`/settings/`)

Complete component suite for user settings pages:

Account Management: Avatar change, name/email change, language switch, account deletion
Security Settings: Password change, social account binding
Subscription Management: Payment method management, email subscription settings

🌐 Shared Components (`/shared/`)

Common components used across pages:

Layout Components: header, footer
Feature Components: theme-switcher, locale-switcher
Form Components: newsletter-subscriber, cookie-consent
Business Components: user-avatar, providers

🎨 Icon Components (`/icons/`)

Carefully designed icon collection:

Social Media Icons: github, google, discord, x, linkedin and more
Brand Icons: logo, not-found

💡 Example Components (`/examples/`)

Example components showcasing advanced features:

AI Features: Chat interface, image generation, voice input
Dashboard Examples: Data statistics, user cards, settings forms and 11 other practical examples

📝 Specialized Components

Admin Components (/admin/): User management tables
Blog Components (/blog/): MDX support, table of contents generation, back to top
Documentation Components (/docs/): Technical documentation

These built-in components have been carefully designed and tested, are responsive and internationalized, and are very mobile-friendly. You can use them directly in your project to greatly speed up development!

Official Resources:

ui.shadcn.com - Shadcn UI official website Provides the most authoritative component documentation, installation guides, and complete example code, including API documentation for all components

🌟 Excellent Component Libraries in the Community

Besides Shadcn UI's basic component library, the community has many excellent component libraries and resources that are compatible with Shadcn UI. These can help you quickly build modern UIs. Below are some reference component libraries I commonly use, and NextDevKit is also built based on these open-source free component libraries:

🎨 Free Component Libraries

Animation and Interactive Components:

Aceternity UI - Modern React component library providing beautiful animation effects and interactive components, built on Tailwind CSS
Magic UI - Component library focused on animation effects, providing various cool animation components and effects
Animata - Professional animation component collection providing rich animation effects and interactive experiences
Animate UI - Lightweight animation component library, easy to integrate and customize

Comprehensive Component Libraries:

21st.dev - Modern React component collection providing high-quality UI components and design patterns
Origin UI - Simple and elegant UI component library providing complete design system
Cult UI - Component library with unique design style, suitable for creative projects
Kokonut UI - Lightweight component library focusing on usability and performance
Spectrum UI - Comprehensive component library providing various components needed for enterprise applications
Eldora UI - Modern designed component library focusing on user experience
React Bits - React component snippets and code example library for quick reuse

🔧 Professional Tool Libraries

Rich Text Editors:

Novel - Modern Notion-style editor based on Tiptap, supporting rich text editing and real-time collaboration

User Guidance Tools:

Driver.js - Lightweight user guidance library helping create product tours and user journeys

Icon Libraries:

Icon Sets - Rich icon collection providing various styles of vector icons with animated effects

📚 Resources and Collections

If you need to find more free community Shadcn UI components, you can refer to the following resources:

Awesome Shadcn UI - Carefully curated collection of Shadcn UI related resources, including components, tools, tutorials, etc.

💰 Premium Paid Components

If you need more professional components and support, you can consider the following paid options:

Shadcn Blocks - High-quality Shadcn UI pre-built blocks and templates
Shadcn UI Kit - Complete Shadcn UI component package and design system

On this page