https://github.com/livepeer/design-system
Design system for Livepeer Inc Products
https://github.com/livepeer/design-system
Last synced: 3 months ago
JSON representation
Design system for Livepeer Inc Products
- Host: GitHub
- URL: https://github.com/livepeer/design-system
- Owner: livepeer
- License: mit
- Created: 2021-10-10T14:57:40.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2024-07-23T14:28:46.000Z (almost 2 years ago)
- Last Synced: 2025-08-28T17:47:29.717Z (10 months ago)
- Language: TypeScript
- Homepage: https://livepeer-design-system.vercel.app/
- Size: 4.71 MB
- Stars: 7
- Watchers: 3
- Forks: 5
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Livepeer Design System
Design system for [Livepeer](https://livepeer.org/) products.
## Documentation
Visit [https://livepeer-design-system.vercel.app/](https://livepeer-design-system.vercel.app/) to view the design system reference components.
## Usage
```bash
yarn add @livepeer/design-system
```
## Local development
### Running the docs site
```bash
yarn install
yarn dev # docs site at http://localhost:3000
```
### Testing changes in consumer apps
The design system is consumed by apps such as the [Livepeer Explorer](https://github.com/livepeer/explorer). Use [yalc](https://github.com/wclr/yalc) to test local changes against one or more consumers before publishing — it copies files into each consumer's `node_modules` rather than symlinking, which avoids the duplicate React instance / "Invalid hook call" errors you get from `pnpm link` or `yarn link`.
```bash
# one-time install
npm i -g yalc
# first-time publish from design-system (populates ~/.yalc/packages)
yarn ds:build
yalc publish
# one-time, in each consumer app
yalc add @livepeer/design-system
pnpm install # or yarn install
# in design-system, after each change
yarn ds:build && yalc push
```
`yalc publish` puts the package in your local yalc store so consumers can `yalc add` it. `yalc push` rebuilds the store entry *and* propagates the new build to every consumer that has already added it. To unlink: run `yalc remove @livepeer/design-system` in each consumer and restore the original dependency version.
For a faster dev loop, run rollup in watch mode and push manually when you want to test:
```bash
# terminal 1: rebuild on save
rollup -c -w
# terminal 2: sync to consumers
yalc push
```
> [!TIP]
> Next.js sometimes ignores changes inside `node_modules`. If HMR doesn't fire after `yalc push`, touch a source file in the consumer app or restart its dev server.