https://github.com/freecodecamp/ui
freeCodeCamp's UI Component Library
https://github.com/freecodecamp/ui
Last synced: 3 days ago
JSON representation
freeCodeCamp's UI Component Library
- Host: GitHub
- URL: https://github.com/freecodecamp/ui
- Owner: freeCodeCamp
- License: bsd-3-clause
- Created: 2024-04-03T17:01:57.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2026-01-26T13:33:38.000Z (17 days ago)
- Last Synced: 2026-01-27T02:56:41.241Z (16 days ago)
- Language: TypeScript
- Homepage: https://opensource.freecodecamp.org/ui
- Size: 31.2 MB
- Stars: 58
- Watchers: 5
- Forks: 34
- Open Issues: 23
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
- Codeowners: .github/CODEOWNERS
Awesome Lists containing this project
README
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:
```bash
pnpm install @freecodecamp/ui
```
- Import the library's base stylesheet into your app:
```tsx
// 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:
```tsx
import { getThemingClass } from "@freecodecamp/ui";
const MyApp = () => {
const cls = getThemingClass();
return ;
};
```
## Docs
To see the components in action, check out the [Storybook](https://freecodecamp.github.io/ui/).