Installation

Start with the shared CSS contract.

Packages are public on GitHub Packages, which still requires registry authentication for npm clients.

Authenticate npm

Create a classic GitHub token with read:packages, then keep the token in your user-level configuration or environment—not in the repository.

@cofob:registry=https://npm.pkg.github.com
//npm.pkg.github.com/:_authToken=${GITHUB_PACKAGES_TOKEN}

Native CSS and controllers

npm install @cofob/design-system-css lucide

import "@cofob/design-system-css/index.css";
import { initDesignSystem } from "@cofob/design-system-css";

initDesignSystem(document);

React

npm install @cofob/design-system-react @cofob/design-system-css lucide-react

import "@cofob/design-system-css/index.css";
import { Button, ThemeProvider } from "@cofob/design-system-react";

Svelte and SvelteKit

npm install @cofob/design-system-svelte @cofob/design-system-css @lucide/svelte

<script>
  import "@cofob/design-system-css/index.css";
  import { Button, ThemeProvider } from "@cofob/design-system-svelte";
</script>

Granular CSS

@import "@cofob/design-system-css/tokens.css";
@import "@cofob/design-system-css/fonts.css";
@import "@cofob/design-system-css/base.css";
@import "@cofob/design-system-css/components.css";

CSS is included explicitly

The packages publish complete standards-based CSS and a PostCSS authoring entry. Import the full stylesheet or the granular entries once at the application boundary.