Droplinked UI Kit

React + TypeScript UI kit built with Vite and Chakra UI v3. The library exports components and a runtime-generated theme system for consistent tokens (colors, radii, typography) across products.

How it works

• Components live under src/components/ui and use semantic tokens instead of raw colors.
• The theme is generated at runtime by createThemeSystem() and provided via UIKitProvider.
• Library exports are centralized in src/index.ts.

Theme system

The theme system uses semantic tokens and dynamic radii to keep styling consistent while allowing custom palettes and typography.

• Semantic colors like primary.main, text.subtext, and state.success.tint10.
• Dynamic radii like dynamic.md (mapped from the selected radii option).
• Text styles generated from typography config (e.g. body2Regular, h2Bold).

Injecting the theme in another project

import { UIKitProvider, createThemeSystem } from 'droplinked-ui-kit';

const customSystem = createThemeSystem(customPalette, customTypography, 'option3');

export function AppRoot() {
  return (
    <UIKitProvider system={customSystem}>
      <App />
    </UIKitProvider>
  );
}

Default theme:

import { UIKitProvider } from 'droplinked-ui-kit';

export function AppRoot() {
  return (
    <UIKitProvider>
      <App />
    </UIKitProvider>
  );
}

Storybook

Run Storybook locally:

npm run storybook

Build static Storybook:

npm run build-storybook

Folder structure

• src/components/ui: UI components
• src/components/providers: Providers (e.g., UIKitProvider)
• src/stories: Storybook stories
• src/theme: Theme system, tokens, and variants
• docs: Documentation

Useful scripts

npm run dev
npm run build
npm run lint
npm run preview