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;

Framework Support

Aki UI works universally across all React-based frameworks with the same simple import. No adapters needed!

Universal Usage (All Frameworks)

Use the same import across React, Next.js, Remix, Gatsby, Vite, and more:

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

export default function MyComponent() {
  return (
    <div>
      <Badge variant="primary">Universal</Badge>
      <Button onClick={() => alert('Works everywhere!')}>Click me</Button>
      <Card>
        <p>Same code works in all React frameworks!</p>
      </Card>
    </div>
  )
}

✨ Universal Support: No more framework-specific imports or adapters. One simple import works everywhere!

Framework-Specific Examples

Next.js (App Router)

'use client' // Only for interactive components

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

export default function Page() {
  return (
    <Card>
      <Button>Next.js Component</Button>
    </Card>
  )
}

Remix

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

export default function RemixRoute() {
  return (
    <Card>
      <Button>Remix Component</Button>
    </Card>
  )
}

Gatsby

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

const GatsbyPage = () => (
  <Card>
    <Button>Gatsby Component</Button>
  </Card>
)

export default GatsbyPage

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 →