# Set up freeCodeCamp components

Use a React + TypeScript project. Components are copied source; no freeCodeCamp package is required. Individual components declare any other packages they need.

1. Copy https://design.freecodecamp.org/registry/theme/tokens.css and https://design.freecodecamp.org/registry/theme/base.css into src/ui/theme/.

2. Import tokens.css and base.css from your application entry, before component CSS.

3. Download the fonts below into public/fonts/, or change the font declarations in your copied tokens.css.

- https://design.freecodecamp.org/fonts/Hack-ZeroSlash-Bold.woff2

- https://design.freecodecamp.org/fonts/Hack-ZeroSlash-BoldItalic.woff2

- https://design.freecodecamp.org/fonts/Hack-ZeroSlash-Italic.woff2

- https://design.freecodecamp.org/fonts/Hack-ZeroSlash-Regular.woff2

- https://design.freecodecamp.org/fonts/Lato-Black.woff

- https://design.freecodecamp.org/fonts/Lato-Bold.woff

- https://design.freecodecamp.org/fonts/Lato-BoldItalic.woff

- https://design.freecodecamp.org/fonts/Lato-Italic.woff

- https://design.freecodecamp.org/fonts/Lato-Light.woff

- https://design.freecodecamp.org/fonts/Lato-Regular.woff

4. Choose a component at https://design.freecodecamp.org/playground or https://design.freecodecamp.org/llms.txt. Its Markdown includes full source, an example, file destinations, shared source, and external dependencies.

5. Copy to the indicated destinations. Update relative imports if you change the layout. Import component CSS once.

Dark is the default. Add light-palette to the root element for light mode. Use CSS variables to customize the theme.

Source revision: 1914914 (2026-09-08). Keep the source license: https://design.freecodecamp.org/license.txt. Copied files do not update automatically.

Design guide: https://design.freecodecamp.org/handbook.md