This is the repository for ScottyLabs' React component library. The live documentation and component library can be found at: https://corgi.scottylabs.org.
- Install
@scottylabs/corgi - Add
@import "@scottylabs/corgi/css";to your CSS file
Example adding Corgi and example using Corgi components.
Each component lives in its own directory under lib/components
(e.g. lib/components/Button). The directory name should match the component name.
- Each component must include an
index.tsxfile that exports the component as a named export. - Each component should be re‑exported in
lib/main.ts, which serves as the entrypoint for the library.
Corgi components are designed to match the ScottyLabs design system, as documented in our Figma UI Kit.
Components should be built on top of Base UI primitives whenever possible.
For example, a Toggle component should wrap and extend the Base UI Toggle instead of re-implementing its functionality.
Each component should be styled in one of the following ways:
-
CSS Modules If the component requires complex CSS or animations, include an
index.module.cssfile in the same directory.
Storybook is used to develop and showcase components in isolation.
-
Create corresponding stories for each component in
src/stories(e.g.src/stories/Button.stories.ts). -
Run Storybook locally with:
bun run storybook.
Draft a new release and GitHub workflow will automatically publish it to NPM registry.