Installation Guide

Follow the steps below to set up and use the Hirayalab UI registry in your project. Each step is short, skimmable, and ready to copy.

Setup

Step 1: Initialize shadcn/ui

If you haven't already, initialize shadcn/ui in your Next.js project:

Terminal
npx shadcn@latest init

Configure

Step 2: Add Hirayalab UI Registry

Add the Hirayalab UI registry to your components.json file. Add the registries section if it doesn't exist:

components.json
{
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "new-york",
  "rsc": true,
  "tsx": true,
  "tailwind": {
    "config": "tailwind.config.ts",
    "css": "app/globals.css",
    "baseColor": "neutral",
    "cssVariables": true
  },
  "aliases": {
    "components": "@/components",
    "utils": "@/lib/utils"
  },
  "registries": {
    "@hirayalab-ui": "https://ui.hirayalab.co.in/r/{name}.json"
  }
}

Install

Step 3: Install Components

Use the following command to add components from the Hirayalab UI registry. Replace [component-name] with the actual component name:

npm
yarn
pnpm
bun
pnpm dlx shadcn@latest add @hirayalab-ui/battery-saver

Or use the direct URL format:

Terminal
pnpm dlx shadcn@latest add https://ui.hirayalab.co.in/r/[component-name].json

Example

Example: Installing a Component

To install the "battery-saver" component, run:

Terminal
pnpm dlx shadcn@latest add https://ui.hirayalab.co.in/r/battery-saver.json