Ursa

Ursa is a multi-purpose monorepo for building a themeable React component library and design system powered by Emotion.js, bundling NPM packages, VS Code extensions, CLI tools, and websites in one repository.

What is Ursa?

Ursa is a JavaScript monorepo structured around a React component library that implements a themeable design system using Emotion.js for CSS-in-JS styling. It uses Yarn workspaces to manage multiple package types — NPM packages, VS Code extensions, CLI tools, and websites — although some of these packages are not yet built and are in the pipeline. The primary deliverable is the React component library, which is configured for TypeScript and published through changesets.

Key Features

• Monorepo layout — Single repository using Yarn workspaces, so yarn build installs dependencies and builds all packages at once.
• Themeable design system — React components styled with Emotion.js, enabling theming through design tokens and CSS variables.
• TypeScript tooling — Type checking via yarn ts-check and type-only builds via yarn build:types are built-in.
• Changeset-based releases — yarn changeset creates an intention-to-publish record, supporting versioning and changelogs for NPM packages.
• Quality commands — Testing all workspaces (yarn test), Prettier formatting (yarn format), and cache cleaning (yarn clean and yarn clean:all) are available.
• Planned extensions — The monorepo is designed to also ship VS Code extensions, CLI tools, and websites alongside the component library.

Who is it for?

Ursa is for frontend teams and open-source maintainers who want to create and publish a themeable React component library. Developers starting a multi-package monorepo can use the Yarn workspaces setup as a foundation. Contributors to design systems who prefer Emotion.js for styling will find the project's theming approach directly applicable.

What can you do with Ursa?

• Design system maintainers: Build a themeable component library with Emotion.js and publish components as NPM packages using changesets.
• Frontend engineers: Use the React components in applications, including Next.js projects, and customize themes via design tokens.
• Monorepo adopters: Reuse the workspace configuration, test setup, and Prettier formatting for other JavaScript projects.

How does Ursa work?

Run yarn to install dependencies and yarn build to compile every workspace. For development, yarn changeset prepares a release, yarn ts-check verifies types, yarn test runs all tests, and yarn format applies Prettier. The commands yarn clean and yarn clean:all remove caches and build outputs.