v0.1 · 13 items

dharmjeet/ui

The dharmjeet.com look as shadcn components you own. Neon on black glass, mono labels and terminal windows, installed as code you can read and change.

Browse components Get in touch

Install

Add the registry to components.json once, then add the theme and whatever you need.

~/components.json

{
  "registries": {
    "@dharmjeet": "https://dharmjeet.com/r/{name}.json"
  }
}

npx shadcn@latest add @dharmjeet/theme

npx shadcn@latest add @dharmjeet/button

Every component pulls in the theme and cn() on its own, so adding one is enough to get the look.

Components

13 pieces, from the tokens up.

Theme

theme

The dharmjeet.com terminal look: neon green, cyan, purple and pink on near-black glass. Dark only.

npx shadcn@latest add @dharmjeet/theme

Utils

lib

cn(), the class merger every component uses.

npx shadcn@latest add @dharmjeet/utils

Button

Solid neon green for the main action, cyan outline beside it, plus secondary, ghost, destructive and link.

npx shadcn@latest add @dharmjeet/button

Badge

A small mono pill in one of the neon tones.

greencyanpurplepinkneutral

npx shadcn@latest add @dharmjeet/badge

Tag

The square mono chip for tech stacks and topics.

TanStack StartReactNext.jsTypeScript

npx shadcn@latest add @dharmjeet/tag

Live dot

A pinging dot for current and live states.

LiveBuildingIdle

npx shadcn@latest add @dharmjeet/live-dot

Status badge

The hero pill: a live dot and a short status, like System Online.

System OnlineCurrently Working

npx shadcn@latest add @dharmjeet/status-badge

Card

Black glass with a hairline border and a green hover glow when interactive.

Full-Stack Web Apps

End-to-end products, from database schema to polished UI.

ReactPostgreSQL

npx shadcn@latest add @dharmjeet/card

Terminal window

A card with window dots and a path in the title bar.

~/about-me

const developer = {

name: "Dharmjeet",

}

npx shadcn@latest add @dharmjeet/terminal-window

Gradient text

The green to cyan to purple text fill, for a word or two.

Build. Innovate. Scale.

npx shadcn@latest add @dharmjeet/gradient-text

Section heading

A centered gradient heading with the short green bar under it.

Get In Touch

Have a project in mind?

npx shadcn@latest add @dharmjeet/section-heading

Input

A dark glass mono text field with a green focus ring.

npx shadcn@latest add @dharmjeet/input

Command

A one-line shell command with a $ prompt and a copy button.

npm run registry:build

npx shadcn@latest add @dharmjeet/command