Getting Started

Get up and running with Kalki Design System in minutes.

Installation

Install the package from npm using your preferred package manager.

npm install kalki-design

npm install kalki-design

Setup

Import the styles in your root layout or global CSS file:

import 'kalki-design/styles.css'

import 'kalki-design/styles.css'

Your first component

Import and use components directly — no additional configuration required.

import { Button } from 'kalki-design'

export default function App() {
  return (
    <Button variant="primary" size="md">
      Get Started
    </Button>
  )
}

import { Button } from 'kalki-design'

export default function App() {
  return (
    <Button variant="primary" size="md">
      Get Started
    </Button>
  )
}

Tailwind CSS

Kalki Design uses Tailwind CSS v4 for styling. Make sure your project has Tailwind CSS configured.