ScottyLabs design system https://components.scottylabs.org
  • CSS 24%
  • TypeScript 22%
  • Astro 21.8%
  • JavaScript 12.8%
  • Svelte 7.8%
  • Other 11.6%
Find a file
Repository files (latest commit first)
Filename Latest commit message Latest commit date
2026-05-20 12:27:34 -07:00
.changeset chore: initial commit 2026-05-13 17:29:16 -04:00
apps feat: add input component 2026-05-20 12:27:34 -07:00
nix feat: restructure domains under scottylabs.org 2026-05-13 17:29:43 -04:00
packages feat: add input component 2026-05-20 12:27:34 -07:00
.envrc chore: initial commit 2026-05-13 17:29:16 -04:00
.gitattributes chore: initial commit 2026-05-13 17:29:16 -04:00
.gitignore feat(tokens): transform Figma modes into DTCG $extensions 2026-05-13 17:29:18 -04:00
bun.lock chore(docs): upgrade Astro to v6 and Starlight to v0.39 2026-05-13 17:29:19 -04:00
bun.nix chore(docs): upgrade Astro to v6 and Starlight to v0.39 2026-05-13 17:29:19 -04:00
CONTRIBUTING.md chore: initial commit 2026-05-13 17:29:16 -04:00
devenv.lock chore: initial commit 2026-05-13 17:29:16 -04:00
devenv.nix feat: add input component 2026-05-20 12:27:34 -07:00
devenv.yaml chore: initial commit 2026-05-13 17:29:16 -04:00
LICENSE-APACHE-2.0 chore: initial commit 2026-05-13 17:29:16 -04:00
LICENSE-MIT chore: initial commit 2026-05-13 17:29:16 -04:00
package.json chore: initial commit 2026-05-13 17:29:16 -04:00
README.md docs: link to figma source 2026-05-13 17:46:51 -04:00
tsconfig.json chore: initial commit 2026-05-13 17:29:16 -04:00

@scottylabs/components

This monorepo is ScottyLabs' design system, providing design tokens and components for React and Svelte built from a shared Figma source.

The library is split across six packages:

  • @scottylabs/tokens generates the design tokens from Figma via Terrazzo, exposing them as CSS variables and TypeScript constants with both Light and Dark mode values
  • @scottylabs/styles contains the pre-compiled component CSS that references those tokens, using the sl- class prefix throughout
  • @scottylabs/variants holds the shared tailwind-variants configurations consumed by both framework packages
  • @scottylabs/types holds the shared TypeScript prop types so the React and Svelte public APIs stay in lockstep
  • @scottylabs/react is the React component layer, built on Radix UI primitives
  • @scottylabs/svelte is the Svelte component layer, built on Bits UI primitives

Four apps cover the publication surface:

  • apps/docs is the narrative documentation site, built with Astro Starlight
  • apps/storybook is a Storybook composition host that pulls in the framework-specific Storybooks via refs
  • apps/storybook-react and apps/storybook-svelte are those framework-specific Storybooks

The dev environment is devenv via ScottyLabs' shared module, and deployment runs through kennel with site declarations in devenv.nix. See CONTRIBUTING.md for setup.

This project is dual-licensed under MIT or Apache-2.0 at your option.