Skip to content

freeCodeCamp/ui

freeCodeCamp banner

freeCodeCamp's component library is a collection of reusable React components that can be used in your projects. The components are built with accessibility in mind and are designed to be easy to use and customize.

Installation

  • Run the following command to install the library:
pnpm install @freecodecamp/ui
  • Import the library's base stylesheet into your app:
// app.tsx
import "@freecodecamp/ui/dist/base.css";
import "./my-app.css"; // Your custom stylesheet should be imported after, in order to override the base.
  • Use the getThemingClass util to get a CSS class for theming, and add the class to the body element:
import { getThemingClass } from "@freecodecamp/ui";

const MyApp = () => {
	const cls = getThemingClass();

	return <body className={cls}></body>;
};

Docs

To see the components in action, check out the Storybook.

About

freeCodeCamp's UI Component Library

Resources

License

Code of conduct

Security policy

Stars

Watchers

Forks

Sponsor this project

  •  

Packages

No packages published

Contributors 21