UIInternal UI

Getting started

Install the kit, set up the theme, render your first component.

1. Install

The kit lives in this monorepo. Depend on the workspace package:

{
  "dependencies": {
    "@general-design-company/internal-ui": "workspace:*"
  }
}

2. Theme

Import the global stylesheet once, and add the theme init script to prevent a light-mode flash. Every token on the Foundations page resolves from this CSS.

import "@general-design-company/internal-ui/global.css";
import { THEME_INIT_SCRIPT } from "@general-design-company/internal-ui/lib/themes";

// in <head>:
<script set:html={THEME_INIT_SCRIPT}></script>

3. Render

import { Button } from "@general-design-company/internal-ui/components/primitives/button";

export function Example() {
  return <Button>Save changes</Button>;
}

Rules that keep the kit honest

  • Search this site before building a component. If it exists, use it.
  • Adding a primitive to the kit? Add a specimen to its registry file in apps/ui/src/lib/registry/ in the same PR.
  • Write semantic tokens (bg-card, text-muted-foreground), never raw hues — a raw hue fails design-lint and ignores the theme.
  • Found a reusable orphan in an app? Promote it into the kit first (see App patterns), then document it here.