Chisom UI

A custom component registry for building beautiful, accessible user interfaces with Next.js and Tailwind CSS.

Quick Install

Add any component with one command:

npx shadcn@latest add @chisom-ui/multi-tag-input

Setup Instructions

Get started with Chisom UI in minutes

Prerequisites

Make sure you have the following before getting started:

Next.js 13+ project
Tailwind CSS configured
shadcn/ui initialized

Setup shadcn/ui (if not already done)

If you haven't set up shadcn/ui in your project yet, run:

npx shadcn@latest init

Follow the prompts to configure your project. Choose your style, colors, and other preferences.

Configure Custom Registry

Add the Chisom UI registry to your components.json file:

{
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "default",
  "rsc": true,
  "tsx": true,
  "tailwind": {
    "config": "tailwind.config.js",
    "css": "app/globals.css",
    "baseColor": "slate",
    "cssVariables": true,
    "prefix": ""
  },
  "aliases": {
    "components": "@/components",
    "utils": "@/lib/utils"
  },
  "registries": {
    "@chisom-ui": "https://chisom-ui.netlify.app/r/{name}.json"
  }
}

Note: Replace the registry URL with your actual deployment URL.

Install Registry Dependencies

Install the required dependencies for Chisom UI components:

npm:

npm install class-variance-authority iconsax-react

yarn:

yarn add class-variance-authority iconsax-react

pnpm:

pnpm add class-variance-authority iconsax-react

Add Components

Now you can add any component from the Chisom UI registry:

Add a single component: