Next.js
Step-by-Step configuration for Next.js
# Prerequisites
Before installing CodeKabir UI, ensure you have:
- Node.js 18.17 or later
- A Next.js 13+ project (tested with Next.js 15.2.1)
- React 18+ and React DOM 18+
# Create New Project
If you don't have a Next.js project yet, you have two options:
1.Create a new Next.js project
Start fresh with a new Next.js application configured with TypeScript and Tailwind CSS:
For detailed setup instructions, visit the official Next.js documentation
2.Clone our example project
Get started quickly with our pre-configured Next.js template:
This template includes TypeScript, Tailwind CSS, all required dependencies, and example components.
# Setup UI Config
Install Dependencies
Core Dependencies:
Icon Dependencies:
CodeKabir UI uses Remix Icons. Choose one of the following options:
Option 1: React Icons
Option 2: Dedicated Remix Icons
• React Icons: import { RiHeartFill } from "react-icons/ri"
• Remix Icons: import { RiHeartFill } from "@remixicon/react"
Dev Dependencies:
Configure Tailwind CSS
Update your tailwind.config.ts file with CodeKabir UI configuration:
Setup Utility Functions
Create the essential utility function for merging CSS classes. Create src/lib/utils.ts:
This utility function combines clsx for conditional classes and tailwind-merge for proper Tailwind class deduplication.
Configure Inter Font
CodeKabir UI uses Inter font for optimal readability. Update your src/app/layout.tsx:
Setup Dark Mode (Optional)
CodeKabir UI includes comprehensive dark mode support. To enable it:
1. Create a theme provider component:
2. Update your layout to include the theme provider:
Add Global Styles
Add CodeKabir UI styles to your src/app/globals.css:
# Verification
Test your installation by creating a simple component. Add this to any page:
Success! If the button renders correctly with proper styling, your CodeKabir UI installation is complete.
# What's Next?
Now that CodeKabir UI is installed, you can:
- Explore the Components documentation to see all available components
- Check out Usage examples to learn best practices
- Customize the design system by modifying your Tailwind configuration
- Join our community for support and updates
If you encounter any issues during installation, check our troubleshooting guide or reach out to our community for assistance.