The design language, reusable UI components, stylesheets, and themes shared across Invana products. It's a pnpm + Turborepo monorepo built on React, Tailwind CSS v4, and shadcn / Radix primitives.

Dependency direction: ui → styling; forms/tables/themes → ui + styling; storybook consumes everything. styling stays React-free and ui must never import from themes — don't invert these.

Packages are published to npm under the @invana/ namespace. Install whichever you need:

Or install them all at once:

pnpm add @invana/styling @invana/ui @invana/forms @invana/tables @invana/themes

react and react-dom (18 or 19) are peer dependencies. @invana/styling requires tailwindcss@^4. To use the compiled styles:

import "@invana/ui/styles.css";

And in your Tailwind entry CSS, import the design tokens (after Tailwind and your own @source globs):

@import "tailwindcss";
@import "@invana/styling/index.css";

Requires Node >= 18 (.nvmrc pins v22.15.0) and pnpm 9.

pnpm install        # install workspace dependencies
pnpm build          # build all packages (respects ^build order via Turbo)
pnpm dev            # run all dev tasks in parallel
pnpm lint           # lint all packages
pnpm check-types    # type-check the workspace
pnpm format         # Prettier across **/*.{ts,tsx,md}

Filter to a single package with pnpm --filter:

pnpm --filter @invana/ui build
pnpm --filter @invana/themes dev
pnpm --filter @invana/stoybook dev   # runs Storybook on port 6009

Note: the Storybook package name is intentionally misspelled @invana/stoybook.

Storybook aliases @invana/* to package source (packages/*/src), so it always reflects unbuilt source — no need to rebuild packages while iterating.

1. Branch off main.
2. Make your change. Place new shadcn primitives in packages/ui/src/components/ui/ and re-export them from components/ui/index.ts; higher-level compositions go in components/ui-extended/. Use the theme-aware CSS variables from @invana/styling (background, foreground, primary, muted, accent, border, …) and the cn helper for class merging — avoid hardcoded colors so all themes work.
3. Add a Storybook story for new components. Stories live in apps/storybook/stories/, one story per file, organized under ui/ (mirroring packages/ui/src/components/), form-generator/, data-tables/, themes/, and others/. Story titles mirror the folder path (e.g. "UI/UI/Button", "UI/UI Extended/NavHorizontal").
4. Run pnpm lint, pnpm check-types, and pnpm build before opening a PR.
5. Open a PR against main. Commits are not created on your behalf — review the diff and commit explicitly.

See CLAUDE.md for the full architecture and conventions reference.

Two complementary pipelines, both driven from GitHub Actions:

Pushing a v* git tag triggers release-npm.yml: it builds every packages/* package and runs pnpm -r publish to npm (with provenance), then creates a GitHub Release with auto-generated notes. workspace:* dependencies are rewritten to real versions automatically on publish.

# bump versions, then:
git tag v0.0.5
git push origin v0.0.5

Pushes to main that touch a package run its release-{ui,styling,themes}.yml workflow, which builds the package and force-pushes the artifacts (dist/, README, stripped package.json) to a releases/<package> branch. These branches provide an install-from-Git fallback (pnpm add github:invana/design-kit#releases/<package>) alongside the npm packages. Because @invana/ui embeds the compiled styles, the release-ui workflow also runs when packages/styling/** changes.

The Storybook showcase is built and deployed by storybook.yml on pushes to main.

MIT © Ravi Raja Merugu