Installation

Get started with Aki UI by installing it in your React project.

Prerequisites

Before installing Aki UI, make sure you have the following:

  • • React 18+: Aki UI is built for modern React
  • • TypeScript (recommended): Full type safety support
  • • Tailwind CSS: Required for styling (optional with CSS imports)

Package Installation

NPM

npm install @akitectio/aki-ui

Yarn

yarn add @akitectio/aki-ui

PNPM

pnpm add @akitectio/aki-ui

Setup with Tailwind CSS

Aki UI is designed to work seamlessly with Tailwind CSS. Here's how to set it up:

1. Install Tailwind CSS

npm install -D tailwindcss postcss autoprefixer

2. Initialize Tailwind

npx tailwindcss init -p

3. Configure your tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './src/**/*.{js,ts,jsx,tsx,mdx}',
    './node_modules/@akitectio/aki-ui/**/*.{js,ts,jsx,tsx}',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

4. Add Tailwind directives to your CSS

@tailwind base;
@tailwind components;
@tailwind utilities;

Using with Next.js

Aki UI works seamlessly with Next.js (both App Router and Pages Router). You can use components directly in client components:

Option 1: Direct Import (Recommended)

Simply import components directly from the package and use them in client components:

'use client'

import { Button, Card, Badge } from '@akitectio/aki-ui'

export default function MyComponent() {
  return (
    <div>
      <Badge variant="primary">New</Badge>
      <Button onClick={() => alert('Hello!')}>Click me</Button>
      <Card>
        <p>This is a card</p>
      </Card>
    </div>
  )
}

Option 2: Using the Next.js Adapter

For specific Next.js optimizations, you can use the adapter that ensures proper client/server boundaries:

'use client'

import { Button, Card, Badge } from '@akitectio/aki-ui/adapters/nextjs'

export default function MyComponent() {
  return (
    <div>
      <Badge variant="primary">New</Badge>
      <Button onClick={() => alert('Hello!')}>Click me</Button>
      <Card>
        <p>This is a card</p>
      </Card>
    </div>
  )
}

Note: Using client wrappers (e.g., ClientButton, ClientDrawer) is deprecated. Always use direct imports as shown above.

Basic Usage

Once installed, you can start using Aki UI components in your React application:

import { Button, Card, Input } from '@akitectio/aki-ui'

function MyComponent() {
  return (
    <Card className="p-6 max-w-md mx-auto">
      <h2 className="text-xl font-bold mb-4">Welcome to Aki UI</h2>
      <div className="space-y-4">
        <Input 
          placeholder="Enter your email" 
          type="email"
        />
        <Button size="lg" className="w-full">
          Get Started
        </Button>
      </div>
    </Card>
  )
}

Tree Shaking

Aki UI supports tree shaking out of the box. You can import only the components you need:

Named imports (recommended)

// This will only bundle the Button component
import { Button } from '@akitectio/aki-ui'

Direct imports

// Alternative approach for smaller bundles
import { Button } from '@akitectio/aki-ui/Button'

TypeScript Configuration

For the best TypeScript experience, make sure your tsconfig.json includes:

{
  "compilerOptions": {
    "strict": true,
    "jsx": "react-jsx",
    "moduleResolution": "node",
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true
  }
}

Next Steps

🎨 Customize Theming

Learn how to customize colors, fonts, and other design tokens.

View Theming Guide →

📚 Browse Components

Explore all available components and their APIs.

Browse Components →