# Design > Add, update, or theme UI in a project using the freeCodeCamp UIKit copy-source registry. Use when creating or editing any UI - buttons, modals, forms, tabs, badges, toasts, icons, layout - or when touching design tokens, colors, spacing, typography, or dark/light theming. - Skill: `freecodecamp-universe/design` (Agent Skill) - Install (CLI): `npx skillmds@latest add freecodecamp-universe/design` - Raw SKILL.md: https://api.skillmd.com/api/skills/freecodecamp-universe/design/raw - Safety review: pending - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Design & Media - Author: freecodecamp-universe (https://skillmd.com/u/freecodecamp-universe) - Updated: 2026-09-17 - Page: https://skillmd.com/skills/freecodecamp-universe/design --- # freeCodeCamp UIKit (copy-source registry) Components are COPIED into this project's source, shadcn-style. Nothing installs from npm. ## Adding a component 1. `GET https://design.freecodecamp.org/registry/index.json` - every item, its raw file URLs, npm deps, registry deps, and the registry version. 2. Copy `registryDependencies` first (always `theme`; sometimes shared hooks). 3. Fetch each `files[].url` verbatim and write it to `files[].target` (default `src/ui//`). 4. Import the component CSS once, globally. 5. Need props or usage? `https://design.freecodecamp.org/components/.md`. ## First-time setup in a project Follow `https://design.freecodecamp.org/registry/starter.md` - theme install, self-hosted fonts, directory layout. ## Rules - Keep CSS custom property (token) names intact - components reference them. - Recolour by editing token VALUES in `src/ui/theme/tokens.css`. Never hard-code colors in component CSS. - Dark is default; `class="light-palette"` on `` for light. - Copied source is this project's code - tailor it freely, but do not re-fetch to "update" without diffing local edits first.