Getting Started
Welcome to the @purekit-ui/react library! This guide will help you integrate PureKit UI components in just a few minutes.
React 19+Next 15+Tailwind CSS 4+
Quick Start
Get started in less than 5 minutes! Follow these simple steps to add PureKit UI to your project.
1
Install PureKit UI
Add PureKit UI to your project using your preferred package manager
1npm install @purekit-ui/react @purekit-ui/plugin
2
Configure Tailwind CSS
Update your Tailwind config to include PureKit UI components
1// tailwind.config.mjs
2import { withPureKitUI } from "@purekit-ui/react";
3
4/** @type {import('tailwindcss').Config} */
5const config = {
6 darkMode: "class",
7 content: ["./src/**/*.{js,jsx,ts,tsx}"],
8 theme: {
9 extend: {},
10 },
11 plugins: [],
12}
13export default withPureKitUI(config)
3
Configure Globals CSS
Update your global CSS file to include PureKit UI styles
1@import "tailwindcss";
2@config "../tailwind.config.mjs";
4
Start Building
Import and use components in your React application
1import { Button } from "@purekit-ui/react"
2
3export function App() {
4 return (
5 <div className="p-8">
6 <Button>Hello PureKit UI!</Button>
7 </div>
8 )
9}
Why PureKit UI?
Lightning Fast
Optimized for performance with tree-shaking and minimal bundle size.
TypeScript First
Built with TypeScript for better developer experience and type safety.
Fully Customizable
Easily customize components with CSS variables and Tailwind CSS.
Developer Friendly
Clean APIs, comprehensive documentation, and excellent IDE support.