---
name: "@studio-blocks"
slug: "studio-blocks"
description: "A collection of minimal, reusable UI blocks built with React, Tailwind CSS, and shadcn/ui."
category: "Charts/data viz"
tags: ["blocks", "cards", "charts", "dashboard", "forms", "tables"]
framework: "react"
license: "MIT"
author: "arhamkhnz"
website: "https://studio-blocks.arhamkhnz.com"
github: "https://github.com/arhamkhnz/studio-blocks"
registry: "https://studio-blocks.arhamkhnz.com/r/registry.json"
pro: false
pro_url: null
github_stars: 7
component_count: 16
generated_at: "2026-10-27T06:34:08.542Z"
---

# @studio-blocks

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

## Links

- Website: https://studio-blocks.arhamkhnz.com
- GitHub: https://github.com/arhamkhnz/studio-blocks
- Registry JSON: https://studio-blocks.arhamkhnz.com/r/registry.json
- Directory page: https://sh4dcn.netlify.app/registry/studio-blocks
- This file: https://sh4dcn.netlify.app/md/studio-blocks.md

## Install

```sh
# add the whole registry (shadcn CLI)
npx shadcn@latest add https://studio-blocks.arhamkhnz.com/r/registry.json
pnpm dlx shadcn@latest add https://studio-blocks.arhamkhnz.com/r/registry.json
bunx shadcn@latest add https://studio-blocks.arhamkhnz.com/r/registry.json
# clone the source repo
git clone https://github.com/arhamkhnz/studio-blocks.git
# fetch the raw registry index
curl -s https://studio-blocks.arhamkhnz.com/r/registry.json
```

## Components (16)

| name | type | description | install |
| --- | --- | --- | --- |
| kpi-01 | registry:block | A revenue KPI card with a value, trend, and description. | `npx shadcn@latest add https://studio-blocks.arhamkhnz.com/r/kpi-01.json` |
| kpi-02 | registry: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` |
| kpi-03 | registry: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` |
| chart-01 | registry:block | An income breakdown card showing salary, freelance projects, and dividends. | `npx shadcn@latest add https://studio-blocks.arhamkhnz.com/r/chart-01.json` |
| kpi-04 | registry: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` |
| kpi-05 | registry: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` |
| chart-02 | registry: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` |
| kpi-06 | registry: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` |
| list-01 | registry: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` |
| chart-03 | registry: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` |
| sidebar-01 | registry: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` |
| chart-04 | registry: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` |
| kpi-07 | registry: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` |
| chart-05 | registry: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` |
| form-01 | registry: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` |
| table-01 | registry: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` |

## For AI agents

```text
You are adding components from @studio-blocks to a shadcn-compatible project.
1. Read this file (https://sh4dcn.netlify.app/md/studio-blocks.md) for the component list.
2. Fetch the machine-readable index: https://studio-blocks.arhamkhnz.com/r/registry.json
3. Install a single component with its install command from the table above.
4. Full structured record: https://sh4dcn.netlify.app/json (library slug: studio-blocks).
```