PureKit UI logoPureKit UI

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

1

Install PureKit UI & CLI

Add PureKit UI, Tailwind plugin, and CLI to your project using your preferred package manager

1npm install @purekit-ui/react @purekit-ui/plugin @purekit-ui/cli
2

Initialize PureKit UI

Run the init command to generate tailwind.config.mjs and update your globals.css automatically.

1npx purekit init
3

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)
4

Configure Globals CSS

Update your global CSS file to include PureKit UI styles

1@import "tailwindcss";
2@config "../../tailwind.config.mjs";
5

Generate a Component

Use the CLI to scaffold a component example

1npx purekit add button
6

Start Building

Import and use components in your React application

1import Button from "@/components/purekit-ui/button/button"
2
3export function App() {
4 return (
5 <div className="p-8">
6 <Button label="Hello PureKit UI!" />
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.