SDS Design System

SDS Design System is published as sdsdesignsystemhcl. It includes foundation CSS, React UI components, design tokens, theme helpers, and shadcn-compatible registry artifacts.

Installation

npm install sdsdesignsystemhcl

React consumers also need the package peer dependencies:

npm install react react-dom

Foundation CSS

Import the package CSS from the public export. Do not import from dist directly.

import "sdsdesignsystemhcl/foundation";

This includes reset, typography, and SDS button classes:

<button class="sds_button sds_button_primary">Primary Button</button>
<button class="sds_button sds_button_outline">Outline Button</button>
<button class="sds_button sds_button_ghost sds_button_sm">Small Ghost</button>

React Usage

import "sdsdesignsystemhcl/foundation";
import { Button } from "sdsdesignsystemhcl/ui";

export function App() {
  return (
    <div>
      <Button>Primary Button</Button>
      <Button variant="outline">Outline Button</Button>
      <Button variant="ghost" size="sm">Small Ghost</Button>
    </div>
  );
}

Angular Usage

Import the foundation CSS in your global stylesheet:

@import "sdsdesignsystemhcl/foundation";

Then use the SDS classes in templates:

<button class="sds_button sds_button_primary" type="button">
  Primary Button
</button>

Static HTML Usage

With a bundler such as Vite, import the package stylesheet in your CSS entry:

@import "sdsdesignsystemhcl/foundation";

Then use the SDS classes in HTML.

Package Exports

• sdsdesignsystemhcl/foundation - CSS reset, typography, and component classes.
• sdsdesignsystemhcl/ui - React component exports.
• sdsdesignsystemhcl/tokens - design token JSON exports.
• sdsdesignsystemhcl/themes - theme CSS generation helpers.
• sdsdesignsystemhcl/registry and sdsdesignsystemhcl/registry/button - shadcn registry JSON artifacts.

shadcn Registry

The package publishes registry JSON under dist/registry. If you want to install the SDS button into a project through shadcn, use the package artifact from node_modules:

npx shadcn@latest add ./node_modules/sdsdesignsystemhcl/dist/registry/button.json

Local Development

pnpm install
pnpm build
pnpm typecheck

pnpm build compiles TypeScript, builds the shadcn registry output, copies CSS assets into dist/foundation, and writes ESM files for the React UI export.