Getting Started

Installation Guide

Add free, accessible UI components to your React project in under 2 minutes. Zero runtime dependencies, fully typed. MIT licensed — free forever.

Step 1

Prerequisites

You need a React 18 or 19 project. If you don't have one yet, create it:

# 1. Create a React project (Vite + TypeScript)
npm create vite@latest my-app -- --template react-ts

# 2. Navigate into the project
cd my-app

# 3. Install the component library
npm install react-component-kit-ui

# 4. Start the dev server
npm run dev

Node.js 20+ required. Check with node --version.

Step 2

Install the library

Choose your preferred package manager:

npm install react-component-kit-ui

yarn add react-component-kit-ui

pnpm add react-component-kit-ui

Step 3 Required

Import the styles

Components ship plain CSS. Import the design tokens and the component styles once, at the root of your app:

// main.tsx (Vite) or app/layout.tsx (Next.js) — once per app
import 'react-component-kit-ui/global.css'; // design tokens, reset and fonts
import 'react-component-kit-ui/styles.css'; // component styles

Step 4

Import and use components

You have two import styles — import everything or import by category (recommended for better tree-shaking):

Option A: Root import (simple)

// Import components from the package root
import { GlassButton, GlassAlert, Badge } from 'react-component-kit-ui';

export function App() {
  return (
    <GlassAlert type="success" title="Welcome">
      <GlassButton>Click me</GlassButton> <Badge variant="info">New</Badge>
    </GlassAlert>
  );
}

Option B: Category imports (recommended)

// Import by category (recommended for smaller bundles)
import { GlassButton, GlowButton, LoadingButton } from 'react-component-kit-ui/buttons';
import { GlassAlert, GlassModal, Badge } from 'react-component-kit-ui/feedback';

Using Next.js App Router? Every component already ships with "use client", so you can import them from Server Components.

Quick reference

Task	Command / Import
Install library	`npm install react-component-kit-ui`
Import design tokens	`import 'react-component-kit-ui/global.css'`
Import component styles	`import 'react-component-kit-ui/styles.css'`
Browse components	Components →
Browse sections	Sections →

Ready to build?

Browse the component library and start copying components into your project.

Browse Components View Sections