First CH Designs

Guide

First CH Designs is a gallery that stocks good UI with source code and a reproduction prompt (AI Script) for each design. This page covers how visitors, developers, and AI agents can use it.

01Use the code directly

Every design's detail page includes a live preview and its source (React + Tailwind CSS v4). Use the copy button and paste it straight into your project.

02Install via the shadcn CLI

Each design is also published as a shadcn registry item. Run this in your project to add it along with its dependencies:

npx shadcn@latest add https://designs.first-ch.com/r/<slug>.json

03For AI agents

• Full registry (metadata + AI Script): /api/components.json

• Single item with source code (shadcn format): /r/<slug>.json

• Site overview: /llms.txt

Point an AI assistant at these URLs when asking it to build UI, and it can reference or reproduce designs from this gallery.