@studio-blocks

A collection of minimal, reusable UI blocks built with React, Tailwind CSS, and shadcn/ui.

16 components react shadcn-cli MIT

website ↗ github ↗ registry ↗ agent brief (.md) ↗

Install this registry

shadcn (npm) npx shadcn@latest add https://studio-blocks.arhamkhnz.com/r/registry.json

pnpm pnpm dlx shadcn@latest add https://studio-blocks.arhamkhnz.com/r/registry.json

bun bunx shadcn@latest add https://studio-blocks.arhamkhnz.com/r/registry.json

fetch registry curl -s https://studio-blocks.arhamkhnz.com/r/registry.json

Components

16 total

Total Revenue block

A revenue KPI card with a value, trend, and description.

npx shadcn@latest add https://studio-blocks.arhamkhnz.com/r/kpi-01.json

Lead Pipeline Value block

A lead pipeline KPI card with a monthly comparison and growth indicator.

npx shadcn@latest add https://studio-blocks.arhamkhnz.com/r/kpi-02.json

Net Worth block

A net worth KPI card with a monthly comparison and growth badge.

npx shadcn@latest add https://studio-blocks.arhamkhnz.com/r/kpi-03.json

Income sources block

An income breakdown card showing salary, freelance projects, and dividends.

npx shadcn@latest add https://studio-blocks.arhamkhnz.com/r/chart-01.json

Total Orders block

An orders KPI card with an icon and a weekly comparison.

npx shadcn@latest add https://studio-blocks.arhamkhnz.com/r/kpi-04.json

Unique Visitors block

A visitor KPI card with a previous-period comparison and growth badge.

npx shadcn@latest add https://studio-blocks.arhamkhnz.com/r/kpi-05.json

Realtime Visitors block

A visitor activity chart with a live status indicator and country breakdown.

npx shadcn@latest add https://studio-blocks.arhamkhnz.com/r/chart-02.json

API Usage block

An API usage KPI card with a request count and quota progress.

npx shadcn@latest add https://studio-blocks.arhamkhnz.com/r/kpi-06.json

Upcoming Renewals block

A subscription renewal card with a seven-day selector, weekly totals, and service logos for each renewal.

npx shadcn@latest add https://studio-blocks.arhamkhnz.com/r/list-01.json

API Availability block

An API availability card with daily uptime history, service status, and selectable daily details.

npx shadcn@latest add https://studio-blocks.arhamkhnz.com/r/chart-03.json

Workspace Sidebar block

A compact workspace sidebar with grouped navigation, active links, Keyline icons, and organization settings.

npx shadcn@latest add https://studio-blocks.arhamkhnz.com/r/sidebar-01.json

Resource Usage block

A resource usage card with semicircular capacity gauges for CPU, memory, and storage.

npx shadcn@latest add https://studio-blocks.arhamkhnz.com/r/chart-04.json

Monthly Proposal Goal block

A goal progress KPI card with green segments and a configurable target.

npx shadcn@latest add https://studio-blocks.arhamkhnz.com/r/kpi-07.json

Edge Requests block

A compact edge request card with 24-hour traffic, a period comparison, and an edge-to-edge area sparkline.

npx shadcn@latest add https://studio-blocks.arhamkhnz.com/r/chart-05.json

Create Project block

A compact project form with optional details and workspace visibility controls.

npx shadcn@latest add https://studio-blocks.arhamkhnz.com/r/form-01.json

Recent Invoices block

An invoice data table with status filtering, search, sorting, and pagination.

npx shadcn@latest add https://studio-blocks.arhamkhnz.com/r/table-01.json