React integration

React is distributed as source: the shadcn CLI copies the component into the application, installs its dependencies, and preserves ds-tis/css as the visual contract.

Beta with a versioned channel

The /registry/v1 channel keeps URLs predictable, but the React API may still receive compatible adjustments before stable promotion. @tis/react is not a public package.

1. Configure the namespace

Add the registry to the project’s components.json:

{
  "registries": {
    "@tis": "https://tis-experience.github.io/ds-tis/registry/v1/{name}.json"
  }
}

2. Install a component

Choose an item from the component catalog and use its install command. Button example:

npm

npx shadcn@latest add @tis/button

pnpm

pnpm dlx shadcn@latest add @tis/button

yarn

yarn dlx shadcn@latest add @tis/button

bun

bunx --bun shadcn@latest add @tis/button

3. Load the DS visual layer

Keep the DS import before every global rule:

@import "ds-tis/css";

Distribution contract

• installed source is application code and must be reviewed;
• shadcn provides composition structure and distributes this output’s source;
• Base UI supplies behavioral primitives when needed;
• HTML/CSS/JS and Ark/Zag are two other coexisting outputs, each with its own source, installation, and tests;
• cross-output comparison measures parity and never selects a winning provider;
• native elements and React composition cover simpler cases;
• DS TIS CSS, tokens, and anatomy remain canonical;
• build, keyboard, responsiveness, and Axe are validated in a React/Vite consumer.

For automated consumption, read the AI agent guide and the docs/api/consumer-context.json manifest.