JMCodes Blocks
  • Getting Started
Admin Suite
  • Admin Dashboard
  • Admin Organizations
  • Admin Roles
  • Admin Audit Log
  • Admin Settings
  • Admin Request Inspector
  • Admin Billing
  • Admin Api Keys
  • Admin Webhooks
  • Admin Changelog
  • Enter License Key
HomeGetting Started

Getting Started

Install production-ready UI blocks into your React project using the shadcn CLI.

Prerequisites

Blocks are designed for React projects using the shadcn/ui setup. You'll need:

  • A React project (Next.js, Vite, Remix, etc.)
  • Tailwind CSS v4 configured
  • shadcn/ui initialized (components.json in project root)
New project? Initialize shadcn first
npx shadcn@latest init

Installation

Each block page shows an install command. Copy it and run in your project directory.

Install command
bunx shadcn add @jmcodes/blocks/admin/dashboard

Project Structure

Blocks use standard shadcn import paths. The CLI maps these to your project automatically.

@/components/jmcodes/blocks/*Block files
@/components/jmcodes/ui/*Custom shared components
@/components/ui/*shadcn primitives (Button, Card, etc.)
@/hooks/*React hooks
@/lib/*Utilities (cn, etc.)

Missing primitives are installed automatically by the CLI.

Quick Start

1

Browse the blocks

Use the sidebar to explore available blocks. Each block has a live preview and the full source code.

2

Copy the install command

Each block page shows the CLI command at the top. Click to copy.

3

Run in your project

The CLI installs the block and all dependencies. Import and use immediately.

Next Steps

Admin Dashboard

Start with the main dashboard block

Enter License Key

Unlock full source code access