freeCodeCamp presents

Command-line Chic

A dark-first, token-driven, framework-agnostic UI kit by the freeCodeCamp team. Built for learners-by learners. Open source and free to use.

design.freecodecamp.org/llms.txt

Components ship as source - copy them into your project (or point your coding agent at the link above) and make them yours. Full setup in the install guide.

Get started →Open playgroundView on GitHub →

00 · three surfaces, one system

Pick the flavour, keep the behaviour.

  • 01 · React

    <Button variant="cta" />

    Copy-source React + TypeScript. Ark UI under the hood, React 18+ peer. You own the code.

    design.freecodecamp.org/components/button.md
import { Button } from './ui/button/Button';

  • 02 · HTML

    <button class="btn btn--cta">

    Drop-in vanilla CSS + 3 KB runtime. Download once, self-host.

    <!-- download once from
     design.freecodecamp.org/cdn/styles.min.css -->
<link rel="stylesheet" href="/styles.min.css">

  • 03 · Tailwind

    bg-cta text-fg-primary

    Preset mirrors every token; palette variants fcc-dark / fcc-light.

    // copy preset.ts + plugin.ts from
// design.freecodecamp.org/registry/tailwind.md
export default { presets: [fcc] };

Foundations

Start with the tokens.

The component layer is only honest if the token layer is. Six pillars define how surfaces read, resize, and respond.

Ready when you are

Two ways in.

Read the rules, or play with the surfaces. Either path lands you shipping in minutes.

Read the handbook →Open the playground →