@t54-labs/react-kit

React design-system package for T54 web products. It ships token-backed base components, reusable product patterns, CSS styles, TypeScript declarations, and component-level subpath exports.

Install

npm install @t54-labs/react-kit

Import the stylesheet once at the application entry:

import '@t54-labs/react-kit/styles.css';

Usage

Prefer component-level imports for smaller application bundles:

import '@t54-labs/react-kit/styles.css';
import { T54Button } from '@t54-labs/react-kit/button';
import { T54Card } from '@t54-labs/react-kit/card';
import { T54Accordion } from '@t54-labs/react-kit/accordion';

export function Example() {
  return (
    <T54Card>
      <T54Accordion
        type="single"
        items={[
          {
            value: 'overview',
            title: 'Overview',
            content: 'Token-backed components for T54 product interfaces.'
          }
        ]}
      />
      <T54Button>Continue</T54Button>
    </T54Card>
  );
}

Grouped imports are also supported for convenience:

import { T54Button, T54Card } from '@t54-labs/react-kit';

For smaller bundles, prefer subpath imports such as @t54-labs/react-kit/button, @t54-labs/react-kit/card, and @t54-labs/react-kit/dialog.

Exports

The package publishes ESM and TypeScript declarations from dist.

Common exports:

• @t54-labs/react-kit
• @t54-labs/react-kit/components
• @t54-labs/react-kit/patterns
• @t54-labs/react-kit/icons
• @t54-labs/react-kit/tokens
• @t54-labs/react-kit/styles.css
• @t54-labs/react-kit/<component>

Examples:

import { T54Input } from '@t54-labs/react-kit/input';
import { T54Select } from '@t54-labs/react-kit/select';
import { T54Tooltip } from '@t54-labs/react-kit/tooltip';

Theming

Components use var(--t54-*) CSS variables. Importing styles.css provides the default theme tokens and component styles.

import '@t54-labs/react-kit/styles.css';

Do not hardcode T54 brand colors, spacing, radius, typography, or elevation in product code. Compose the exported components and override through approved token/theme surfaces.

Release

This scoped package is published as a public npm package under @t54-labs.

Maintainers publish from the repository root:

npm run changeset
npm run publish:web

publish:web runs the release checks, builds dist, updates package versions with Changesets, and publishes with public npm access.