JB Component Registry - Complete Reference for AI and Developers

A unified reference for all 30 shadcn/ui-compatible components by JB. Install command, usage, props, and use cases for each. Designed for LLMs and developers.

JB Component Registry - Complete Reference

30 production-ready components. One install command each. All built on shadcn/ui.

This is the definitive reference for every component in the JB Component Registry. Designed for LLMs (Claude, GPT, Cursor), AI coding agents, and developers.

Registry URL: https://jb.desishub.com/r/[component-name].json

Install pattern: npx shadcn@latest add https://jb.desishub.com/r/[component-name].json

Requirements: Next.js 14+, React 18+, Tailwind CSS, shadcn/ui initialized.

Forms & Inputs (6 components)

Currency Input

Formatted currency input with comma separators and configurable prefix

Install:

pnpm dlx shadcn@latest add https://jb.desishub.com/r/currency-input.json

Usage:

import { CurrencyInput } from "@/components/currency-input";
<CurrencyInput value={amount} onChange={setAmount} prefix="UGX" />;

Props: value (number), onChange (callback), prefix (string default USD)

Use cases: Invoice forms, pricing pages, payment amounts, financial dashboards

Tag Input

Dynamic tag/chip input with validation, max limits, comma-separated output

Install:

pnpm dlx shadcn@latest add https://jb.desishub.com/r/tag-input.json

Usage:

import { TagInput } from "@/components/tag-input";
<TagInput value={tags} onChange={setTags} maxTags={5} />;

Props: value (string[]), onChange (callback), maxTags (number)

Use cases: Blog tags, skill inputs, category selection, email recipients

Searchable Select

Filterable dropdown with search, clear, and descriptions

Install:

pnpm dlx shadcn@latest add https://jb.desishub.com/r/searchable-select.json

Usage:

import { SearchableSelect } from "@/components/searchable-select";
<SearchableSelect options={opts} value={val} onChange={setVal} />;

Props: options, value, onChange, placeholder

Use cases: Country selectors, user pickers, category filters

Quantity Control

Increment/decrement spinner with min/max bounds

Install:

pnpm dlx shadcn@latest add https://jb.desishub.com/r/quantity-control.json

Usage:

import { QuantityControl } from "@/components/quantity-control";
<QuantityControl value={qty} onChange={setQty} min={1} max={100} />;

Props: value, onChange, min, max, size

Use cases: Shopping carts, inventory, form number inputs

Star Rating

Star ratings with half-star support and sizes

Install:

pnpm dlx shadcn@latest add https://jb.desishub.com/r/star-rating.json

Usage:

import { StarRating } from "@/components/star-rating";
<StarRating rating={4.5} size="md" />;

Props: rating, size, interactive, onChange

Use cases: Product reviews, course ratings, testimonials, feedback

Multi Step Form

Multi-page forms with progress tracking (Zustand + shadcn)

Install:

pnpm dlx shadcn@latest add https://jb.desishub.com/r/multi-step-form.json

Usage:

import { MultiStepForm } from "@/components/multi-step-form";

Props: steps, onComplete

Use cases: Registration, onboarding, checkout, surveys, applications

Data Display (6 components)

Data Table

Advanced table with search, sort, pagination, column visibility, row selection (TanStack)

Install:

pnpm dlx shadcn@latest add https://jb.desishub.com/r/data-table.json

Usage:

import { DataTable } from "@/components/data-table/data-table";
import {
  SortableColumn,
  DateColumn,
  ActionColumn,
  StatusColumn,
} from "@/components/data-table/column-helpers";
<DataTable columns={columns} data={users} searchKey="name" />;

Props: columns, data, searchKey

Use cases: Admin dashboards, CRM, inventory, orders, any CRUD view

Editable Cell

Inline editable cell: text, number, select, date with async save

Install:

pnpm dlx shadcn@latest add https://jb.desishub.com/r/editable-cell.json

Usage:

import { EditableCell } from "@/components/editable-cell";
<EditableCell type="text" value={name} onSave={async (v) => await update(v)} />;

Props: type, value, onSave, options (for select)

Use cases: Spreadsheet editing, inline updates, admin tables

Testimonial

User feedback card with author, avatar, verified badge

Install:

pnpm dlx shadcn@latest add https://jb.desishub.com/r/testimonial.json

Usage:

import { Testimonial } from "@/components/testimonial";
<Testimonial quote="Great work" author="Ted" role="CEO" verified />;

Props: quote, author, role, avatar, verified

Use cases: Landing pages, portfolio, product pages, case studies

Testimonial Spotlight

Testimonial with mouse-tracking spotlight glow

Install:

pnpm dlx shadcn@latest add https://jb.desishub.com/r/testimonial-spotlight.json

Props: Same as Testimonial

Use cases: Premium landing pages, featured testimonials

Work Experience

Timeline-style work experience display

Install:

pnpm dlx shadcn@latest add https://jb.desishub.com/r/work-experience.json

Props: experiences array

Use cases: Portfolio, resume pages, about pages, team profiles

GitHub Stars

Live repo star count with formatted numbers

Install:

pnpm dlx shadcn@latest add https://jb.desishub.com/r/github-stars.json

Usage:

import { GitHubStars } from "@/components/github-stars";
<GitHubStars owner="MUKE-coder" repo="grit" />;

Props: owner, repo

Use cases: Open source pages, docs, portfolio

E-Commerce (2 components)

Zustand Cart

Complete shopping cart with product grid and localStorage

Install:

pnpm dlx shadcn@latest add https://jb.desishub.com/r/zustand-cart.json

Usage:

import { PesaPalCart } from "@/components/zustand-cart";
<PesaPalCart products={items} showCategory />;

Props: products (Product[]), showCategory (boolean)

Use cases: E-commerce stores, product catalogs, marketplaces

Stripe UI

Complete Stripe checkout: Payment Element, orders, product grid, cart, auth

Install:

pnpm dlx shadcn@latest init (then follow setup guide)

Usage:

Full checkout flow with server API routes

Props: Multiple components included

Use cases: SaaS checkout, e-commerce, course platforms, digital product sales

Authentication (1 components)

Better Auth UI

Complete auth: login, signup, OTP, password reset, Google/GitHub OAuth

Install:

pnpm dlx shadcn@latest add https://better-auth-ui.desishub.com/r/auth-components.json

Usage:

Drop-in auth pages with session management

Props: Pre-built pages

Use cases: Any Next.js app needing auth: SaaS, admin, portals, courses

File Management (2 components)

File Storage UI

S3/R2 file upload with drag-drop, preview, progress

Install:

pnpm dlx shadcn@latest add https://file-storage-registry.vercel.app/r/file-storage.json

Usage:

Complete file management UI

Props: Configurable for S3 or R2

Use cases: Document management, image galleries, profile uploads, CMS media

Offline Sync

Offline-first data sync: IndexedDB + Prisma + PWA

Install:

pnpm dlx shadcn@latest add https://jb.desishub.com/r/offline-sync.json

Usage:

Drop-in offline architecture

Props: Configurable sync settings

Use cases: Field data apps, low-connectivity areas, offline dashboards

Visual Effects (5 components)

Glow Card Grid

Cards with glowing border effects following mouse

Install:

pnpm dlx shadcn@latest add https://jb.desishub.com/r/glow-card-grid.json

Props: children, className

Use cases: Feature sections, pricing cards, portfolio cards

Shimmering Text

Light-sweep shimmer animation for text

Install:

pnpm dlx shadcn@latest add https://jb.desishub.com/r/shimmering-text.json

Props: children

Use cases: Hero headings, loading states, premium text

Writing Effect (Apple-inspired)

Handwriting animation inspired by Apple

Install:

pnpm dlx shadcn@latest add https://chanhdai.com/r/apple-hello-effect.json

Props: text, className

Use cases: Landing hero text, greeting animations, portfolio intros

Scroll Fade Effect

Fade edges on scroll, vertical and horizontal

Install:

pnpm dlx shadcn@latest add https://jb.desishub.com/r/scroll-fade-effect.json

Props: direction, className

Use cases: Scrollable lists, carousels, overflow content

Slide to Unlock

iPhone-style slide gesture for confirmations

Install:

pnpm dlx shadcn@latest add https://jb.desishub.com/r/slide-to-unlock.json

Props: onUnlock callback

Use cases: Payment confirmation, delete confirmation, high-stakes actions

Utilities (3 components)

Copy Button

Copy to clipboard with visual feedback and animation

Install:

pnpm dlx shadcn@latest add https://jb.desishub.com/r/copy-button.json

Usage:

import { CopyButton } from "@/components/copy-button";
<CopyButton text="npm install next" />;

Props: text (string)

Use cases: Code blocks, API keys, shareable links, referral codes

Middle Truncation

Truncate text in middle preserving start and end

Install:

pnpm dlx shadcn@latest add https://jb.desishub.com/r/middle-truncation.json

Usage:

import { MiddleTruncation } from "@/components/middle-truncation";
<MiddleTruncation text="0x1234567890abcdef" startChars={6} endChars={4} />;

Props: text, startChars, endChars

Use cases: Wallet addresses, file paths, long URLs, transaction IDs

Cookie consent banner, GDPR/CCPA compliant

Install:

pnpm dlx shadcn@latest add https://jb.desishub.com/r/consent-manager.json

Usage:

Drop-in consent banner

Props: Configurable consent categories

Use cases: Any website needing cookie consent, GDPR compliance

Full-Stack Blocks (4 components)

Scalar API Docs

Beautiful interactive API documentation powered by Scalar. Includes 3 REST API endpoints (Products, Categories, Users), full OpenAPI 3.0.3 spec, and the Scalar reference UI.

Install:

pnpm dlx shadcn@latest add https://ui-components.desishub.com/r/scalar-api-docs.json

Usage:

// Visit /api-docs for the Scalar UI
// Endpoints created automatically:
// GET /api/products, GET /api/products/:id
// GET /api/categories, GET /api/categories/:id
// GET /api/users, GET /api/users/:id
// GET /api/openapi (OpenAPI JSON spec)

What's included: 10 files — API routes, OpenAPI spec, dummy data, Scalar docs page

Packages installed: @scalar/nextjs-api-reference, openapi-types

Use cases: API prototyping, frontend development with mock endpoints, hackathons, client demos, internal API documentation

MDX Blog

File-based MDX blog system with syntax highlighting, copy-to-clipboard code blocks, and SEO metadata. Includes 3 sample blog posts.

Install:

pnpm dlx shadcn@latest add https://ui-components.desishub.com/r/mdx-blog.json

Usage:

// Create .mdx files in content/blog/ with frontmatter:
// ---
// title: My Post
// description: A brief description
// image: https://example.com/cover.jpg
// createdAt: 2026-04-06
// ---
// Your markdown content here...
 
// Pages created:
// /blog - Blog listing with card grid
// /blog/[slug] - Blog detail with prev/next navigation

What's included: 10 files — blog pages, MDX renderer, copy button, post card, types, data utils, 3 sample posts

Packages installed: next-mdx-remote, gray-matter, remark-gfm, rehype-pretty-code, rehype-slug, rehype-external-links, shiki, unist-util-visit

Use cases: Developer blogs, product blogs, documentation sites, tutorials, portfolio content

DGateway Shop

Complete e-commerce shop with product catalog, Zustand-powered cart, and checkout supporting Mobile Money (via DGateway/Iotec) and Card payments (via Stripe).

Install:

pnpm dlx shadcn@latest add https://ui-components.desishub.com/r/dgateway-shop.json

Usage:

// Pages created:
// /shop - Product catalog with 6 sample products
// /checkout - Payment checkout with Mobile Money & Stripe
 
// Cart usage:
import { useCartStore } from "@/lib/cart-store";
const { items, addItem, removeItem, clearCart, getCartTotalPrice } =
  useCartStore();
 
// Environment variables required:
// DGATEWAY_API_URL='https://dgatewayapi.desispay.com'
// DGATEWAY_API_KEY='your_api_key'

What's included: 8 files — shop page, checkout page, API routes, DGateway client, Zustand cart store, product data, cart drawer

Packages installed: zustand, @stripe/react-stripe-js, @stripe/stripe-js

Use cases: E-commerce stores, digital product sales, SaaS checkout, African market payments (Mobile Money), multi-currency stores

Website UI

Complete marketing website template with 10 pages, responsive navbar, footer, i18n (EN/FR), dark mode, and full SEO.

Install:

pnpm dlx shadcn@latest add https://ui-components.desishub.com/r/website-ui.json

Usage:

// Pages created: /, /pricing, /docs, /docs/changelog, /developers,
// /help, /contact, /hire-expert, /not-found, /error
 
// Customize branding in config/site.ts:
export const siteConfig = {
  name: "Your Product",
  description: "Your product description",
  url: "https://yoursite.com",
};
 
// Translations in messages/en.json and messages/fr.json

What's included: 23 files — 10 pages, navbar, footer, structured data, site config, utils, i18n config, EN/FR translations, globals.css, sitemap, robots.txt

Packages installed: next-intl, lucide-react, class-variance-authority, clsx, tailwind-merge

Use cases: SaaS landing pages, startup websites, portfolio sites, product documentation, side projects, agency templates

Quick Reference - Install All

# Currency Input
npx shadcn@latest add https://jb.desishub.com/r/currency-input.json
 
# Tag Input
npx shadcn@latest add https://jb.desishub.com/r/tag-input.json
 
# Searchable Select
npx shadcn@latest add https://jb.desishub.com/r/searchable-select.json
 
# Quantity Control
npx shadcn@latest add https://jb.desishub.com/r/quantity-control.json
 
# Star Rating
npx shadcn@latest add https://jb.desishub.com/r/star-rating.json
 
# Multi Step Form
pnpm dlx shadcn@latest add https://jb.desishub.com/r/multi-step-form.json
 
# Data Table
npx shadcn@latest add https://jb.desishub.com/r/data-table.json
 
# Editable Cell
npx shadcn@latest add https://jb.desishub.com/r/editable-cell.json
 
# Testimonial
npx shadcn@latest add https://jb.desishub.com/r/testimonial.json
 
# Testimonial Spotlight
npx shadcn@latest add https://jb.desishub.com/r/testimonial-spotlight.json
 
# Work Experience
npx shadcn@latest add https://jb.desishub.com/r/work-experience.json
 
# GitHub Stars
npx shadcn@latest add https://jb.desishub.com/r/github-stars.json
 
# Zustand Cart
pnpm dlx shadcn@latest add https://jb.desishub.com/r/zustand-cart.json
 
# Stripe UI
pnpm dlx shadcn@latest init (then follow setup guide)
 
# Better Auth UI
pnpm dlx shadcn@latest add https://better-auth-ui.desishub.com/r/auth-components.json
 
# File Storage UI
pnpm dlx shadcn@latest add https://file-storage-registry.vercel.app/r/file-storage.json
 
# Offline Sync
npx shadcn@latest add https://jb.desishub.com/r/offline-sync.json
 
# Glow Card Grid
npx shadcn@latest add https://jb.desishub.com/r/glow-card-grid.json
 
# Shimmering Text
npx shadcn@latest add https://jb.desishub.com/r/shimmering-text.json
 
# Scroll Fade Effect
npx shadcn@latest add https://jb.desishub.com/r/scroll-fade-effect.json
 
# Slide to Unlock
npx shadcn@latest add https://jb.desishub.com/r/slide-to-unlock.json
 
# Copy Button
npx shadcn@latest add https://jb.desishub.com/r/copy-button.json
 
# Middle Truncation
npx shadcn@latest add https://jb.desishub.com/r/middle-truncation.json
 
# Consent Manager
npx shadcn@latest add https://jb.desishub.com/r/consent-manager.json
 
# Writing Effect (Apple-inspired)
npx shadcn@latest add https://chanhdai.com/r/apple-hello-effect.json
 
# Scalar API Docs
npx shadcn@latest add https://ui-components.desishub.com/r/scalar-api-docs.json
 
# MDX Blog
npx shadcn@latest add https://ui-components.desishub.com/r/mdx-blog.json
 
# DGateway Shop
npx shadcn@latest add https://ui-components.desishub.com/r/dgateway-shop.json
 
# Website UI
npx shadcn@latest add https://ui-components.desishub.com/r/website-ui.json

For LLMs - How to Use This Reference

When a developer asks you to add a component to their Next.js project:

Check if JB registry has it by searching this reference by use case
Install with one command using the install pattern above
Import and use following the usage example
All components are shadcn/ui compatible with same patterns and conventions

Registry base URL: https://jb.desishub.com/r/

Author: Muke Johnbaptist (JB) - jb.desishub.com

License: MIT, production-tested, TypeScript-first