# @codecademy/brand

> Brand component library for Codecademy

Latest version **5.14.7** (published 2026-10-13) · MIT license · 0 weekly downloads

## Install

```sh
npm install @codecademy/brand
pnpm add @codecademy/brand
yarn add @codecademy/brand
bun add @codecademy/brand
```

## Health

**Score 60/100 (C)** — status: active.

Positive: has types; no vulnerabilities; recently updated; high maintenance score.

Warnings: low downloads; no esm support.

## Facts

| | |
|---|---|
| Version | 5.14.7 |
| Published | 2026-10-13 |
| First published | 2023-04-12 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 18 |
| Unpacked size | 2.6 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Codecademy Engineering |
| Maintainers | codecademy-eng |

## Links

- npm: https://www.npmjs.com/package/@codecademy/brand
- Repository: https://github.com/codecademy-engineering/mono
- Homepage: https://github.com/codecademy-engineering/mono#readme
- Issues: https://github.com/codecademy-engineering/mono/issues
- npm.io page: https://npm.io/package/@codecademy/brand

## Dependencies (18)

- [lodash](https://npm.io/package/lodash.md) ^4.18.1
- [date-fns](https://npm.io/package/date-fns.md) ^2.30.0
- [invariant](https://npm.io/package/invariant.md) ^2.2.4
- [pluralize](https://npm.io/package/pluralize.md) ^8.0.0
- [react-use](https://npm.io/package/react-use.md) 15.3.8
- [classnames](https://npm.io/package/classnames.md) ^2.3.2
- [ismobilejs](https://npm.io/package/ismobilejs.md) ^1.1.1
- [date-fns-tz](https://npm.io/package/date-fns-tz.md) ^2.0.1
- [freezeframe](https://npm.io/package/freezeframe.md) ^5.0.2
- [emojisplosion](https://npm.io/package/emojisplosion.md) ^2.6.1
- [framer-motion](https://npm.io/package/framer-motion.md) ^12.0.0
- [@splidejs/splide](https://npm.io/package/@splidejs/splide.md) 4.1.3
- [universal-cookie](https://npm.io/package/universal-cookie.md) ^8.0.1
- [react-freezeframe](https://npm.io/package/react-freezeframe.md) ^5.0.2
- [intersection-observer](https://npm.io/package/intersection-observer.md) ^0.12.0
- [@emotion/is-prop-valid](https://npm.io/package/@emotion/is-prop-valid.md) ^1.2.1
- [@splidejs/react-splide](https://npm.io/package/@splidejs/react-splide.md) ^0.7.12
- [@types/recurly__recurly-js](https://npm.io/package/@types/recurly__recurly-js.md) 4.22.0

## Recent versions

- 5.14.7 (latest) — 2026-10-13
- 6.0.0-alpha.5522c1fbe.0 (alpha-13872) — 2026-10-16
- 5.14.7-alpha.cf3182d7c.0 (alpha-13810) — 2026-10-13
- 5.14.7-alpha.6208f5b18.0 (alpha-13776) — 2026-10-09
- 5.14.6-alpha.5995f8c90.0 (alpha-13808) — 2026-10-06
- 5.14.5-alpha.4fdc5e520.0 (alpha-13713) — 2026-09-03
- 5.14.5-alpha.e9db9543e.0 (alpha-13627) — 2026-09-03
- 5.15.0-alpha.17e33fa86.0 (alpha-13428) — 2026-09-03
- 5.14.5-alpha.0e5c31b6f.0 (alpha-13600) — 2026-09-03
- 5.14.4-alpha.a0dbe7027.0 (alpha-13602) — 2026-08-31
- 5.14.3-alpha.ced9afd9e.0 (alpha-13625) — 2026-08-20
- 5.14.3-alpha.f53261a33.0 (alpha-13594) — 2026-08-20
- 5.14.2-alpha.6698113dc.0 (alpha-13604) — 2026-08-17
- 5.14.1-alpha.f5e98c174.0 (alpha-13524) — 2026-08-05
- 5.14.1-alpha.91d47ccb7.0 (alpha-13348) — 2026-08-05
- … 6085 more at https://npm.io/package/@codecademy/brand/versions

## README

# brand

Brand components across the design spectrum that exist for utility, are more experimental, or are tied to brand representation.

## Building brand

Run `yarn nx build brand` to build the brand component library.

# Storybook

To build the Brand Storybook, run `yarn nx build-storybook brand`.

To run the Brand Storybook locally, run `yarn nx storybook brand`. The Storybook instance will be spun up on local port 4400.

You can view the production Brand Storybook at [https://brand-storybook.codecademy.com/?path=/docs/brand--docs](https://brand-storybook.codecademy.com/?path=/docs/brand--docs).

## Browsing stories

In the Storybook sidebar, you will see all of our component organized according to Atomic Design standards.

Each component has its own Docs page as well as a number of stories representing a discrete component state, use case, or context. Clicking the story in the sidebar will take you to the Canvas view of that story, which will allow you to customize props for that component state in browser.

We recommend reading the [Browse Stories](https://storybook.js.org/docs/react/get-started/browse-stories) documentation from Storybook to make the best use of Canvas + other features!

## Writing stories

You can find more information about how to write stories [here](https://storybook.js.org/docs/react/writing-stories/introduction).

Eventually our stories will be colocated with their respective components, but in the meantime you can find them in the `./stories` folder.

## PR Previews

PR previews publish for every pull request - you can find the url in the output within the `Publish Storybook` Github action, under the `Run npx nx run-many --target=publish-storybook --parallel=3` step.

This is temporarily, and the web platform team is diligently working on getting Storybook preview urls in PR comments.

---
_Source: https://npm.io/package/@codecademy/brand · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._