UI Kit/Get started

Get started

This library sits on top of shadcn/ui. Keep your Next.js and shadcn setup as it is, and add the components you want from this repo.

1. Get access

Components install straight from the private GitHub repo, so you need read access to HarshitMahajan/UI. Then sign in to the GitHub CLI once on your computer.

gh auth login

2. Have a shadcn project

You need Next.js, Tailwind v4 and a components.json. If the project doesn't have shadcn yet:

bunx --bun shadcn@latest init

3. Install a component

Each component page shows its command. To see everything available:

bunx --bun shadcn@latest list HarshitMahajan/UI
bunx --bun shadcn@latest add HarshitMahajan/UI/sidebar-1

4. Use it

Our components live in components/kit/, so they sit beside your components/ui/ without replacing anything.

import { Button } from "@/components/ui/button"     // shadcn's, unchanged
import { Sidebar1 } from "@/components/kit/sidebar-1" // ours

What installing does

  • Copies the component's code into your project, so you commit it and can edit it.
  • Installs its packages with bun, because the command detects your bun.lock.
  • Adds only the tokens it needs to globals.css. Your colors and corners stay, and components follow them.

Deploying your app

Nothing changes. The code is in your app's repo after you install, so your app's build doesn't need GitHub access to this library or any new environment variable.

Getting updates

Your copy doesn't change on its own. See what's different, then replace it if you want the new version. Replacing it overwrites your edits to that file, so commit first.

bunx --bun shadcn@latest add HarshitMahajan/UI/sidebar-1 --diff
bunx --bun shadcn@latest add HarshitMahajan/UI/sidebar-1 --overwrite

Using it in CI

Only needed if CI installs components itself. Create a fine-grained token with read access to this repo's contents, and set it as GH_TOKEN.