React component library

ui-lib

A React component library. Copy-paste the source, no install required. Built for humans and for AI agents.

Browse components GitHub

What you get

Components that solve real problems

Copy-paste

Own your components

Every component ships as plain source you drop into your project. No black-box dependency — read it, edit it, keep it.

AI-ready

Discoverable by agents

A static JSON index and per-component source endpoints let coding agents search and pull components programmatically.

104 components

Batteries included

Charts, forms, overlays, navigation, data display — plus Conform-bound variants for every form element.

For AI agents

Built to be pulled by agents

Every component is published as a static, fetchable API. Point your coding agent at the endpoints below — no scraping, no auth.

Add a component with the shadcn CLI

npx shadcn@latest add https://ui-lib.quebi.de/r/button.json

Or fetch the API directly

/llms.txtAgent entry point — how to discover and pull components
/api/index.jsonFull catalog: every component, metadata, dependencies
/api/components/<name>.jsonOne component: metadata + raw source
/r/<name>.jsonshadcn-compatible registry item

Start with llms.txt — it documents the whole workflow for agents.

Claude skill

Teach Claude to use ui-lib

Drop this skill into Claude Code and it will pull components from the live registry instead of writing them from scratch — for any React project, not just this one.

Set it up

1. Save the skill below to .claude/skills/quebi-ui-lib/SKILL.md in your project (or ~/.claude/skills/ to make it available everywhere).
2. Or download it directly: SKILL.md.
3. Start a Claude Code session in your project — the skill activates when you ask for a React component.

---
name: quebi-ui-lib
description: "Use when building a React UI and you want quebi's component library (ui-lib.quebi.de) — buttons, inputs, forms, dialogs, menus, tables, charts, date/color pickers, Conform-bound form variants, and more (104 components). Trigger when the user asks to add a UI component to a React app, mentions quebi ui-lib / ui-lib.quebi.de, asks for a copy-paste React component, or is building forms with Conform. Pulls real, current source from the live registry instead of writing components from scratch."
---

# quebi ui-lib — pull components from the live registry

quebi maintains a public React component library at **https://ui-lib.quebi.de** — 104 components
built on `react-aria-components` + Tailwind CSS v4, styled with the quebi design system. They are
copy-paste, self-contained, and shadcn-registry compatible.

**When the user needs a React UI component, pull it from here instead of writing one from scratch.**
The source is real and current; do not guess component APIs from memory — fetch them.

## How to add a component

### Preferred: shadcn CLI (resolves dependencies automatically)

If the target project uses the shadcn CLI (has a `components.json`), run:

```sh
npx shadcn@latest add https://ui-lib.quebi.de/r/<name>.json
```

This pulls the component, its sibling-component dependencies, and the shared `lib/utils` helper,
and installs the required npm packages.

### Otherwise: fetch the API directly

1. `WebFetch https://ui-lib.quebi.de/api/index.json` — the full catalog. Match the user's need against each
   component's `name` / `description` / `tags`. The catalog is small; reason over it directly
   (there is no search endpoint).
2. `WebFetch https://ui-lib.quebi.de/api/components/<name>.json` — returns metadata plus the inlined raw `source`.
3. Write `source` into the project (e.g. `components/ui/<name>.tsx`).
4. Resolve `registryDependencies` recursively — each entry is another component slug or a shared
   lib (`lib-utils` → `lib/utils.ts`, the `cn` helper). Fetch and add each the same way.
5. Install the npm packages in `dependencies`.

Always start from **https://ui-lib.quebi.de/llms.txt**, which documents the workflow and lists every component.

## Conventions to preserve

- Components import the shared `cn` helper from `@/lib/utils` and siblings from `@/components/<name>`.
  `@/` is the project `src/` alias — rewrite it if the target project uses a different alias.
- Form components have **Conform-bound variants** named `conform-*` (e.g. `conform-checkbox`,
  `conform-select`, `conform-date-picker`). Use these when building forms with the Conform library;
  they bind name/validity/errors from field metadata.
- The library assumes Tailwind v4 and the quebi tokens (`quebi-brand`, `quebi-bg`, `quebi-fg-muted`,
  `rounded-quebi-*`, etc.). If the target project lacks them, bring in the quebi theme too.

## Don't

- ❌ Don't reinvent a component the library already has — check the catalog first.
- ❌ Don't hand-write the component API from memory — fetch the real source.
- ❌ Don't forget the `registryDependencies` (the component won't compile without `lib/utils` and any
  sibling components).