Documentation

TypeScript Support

Designers is built with TypeScript at its core. All tokens, components, and hooks are fully typed, providing autocomplete, IntelliSense, and compile-time safety. TypeScript unlocks the best experience, including type-safe token access, prop types, and custom token extension.

Why TypeScript?

  • All tokens and APIs are strongly typed
  • Instant autocomplete and IntelliSense in your editor
  • Type errors help you catch mistakes early
  • Works with strict TypeScript settings (strict: true)
  • Supports monorepos and custom token types
Tip: You can import types like DsTokens for advanced type-safe usage and custom token extension.

Basic Usage Example

import { ds, type DsTokens } from 'designers';

// Type-safe usage
const color: DsTokens['colors']['blue'][600] = ds.colors.blue[600];

// Autocomplete for tokens
const padding = ds.spacing[4];

Advanced TypeScript Usage

You can extend token types for custom tokens, or use DsTokens for type-safe access throughout your app:

import { ds, type DsTokens } from 'designers';

// Custom function using token types
function getPrimaryColor(tokens: DsTokens) {
  return tokens.colors.blue[600];
}

// Extending tokens (in designers.config.json)
// {
//   "colors": {
//     "brand": { "main": "#123456" }
//   }
// }
// Usage:
const brand: DsTokens['colors']['brand']['main'] = ds.colors.brand.main;

TypeScript Tips

  • Use type DsTokens for type-safe token access and custom helpers
  • All components have full prop types and JSDoc documentation
  • Works with strict: true and in monorepos
  • Hover over any token or component in your editor to see its type and docs
Pro Tip: Use TypeScript generics and utility types to build type-safe design utilities and helpers.

Real-World Example

import { ds, type DsTokens } from 'designers';

export function Banner({ message }: { message: string }) {
  return (
    <div
      style={{
        background: ds.colors.yellow[100],
        color: ds.colors.yellow[900],
        padding: ds.spacing[5],
        borderRadius: ds.radius.lg,
        fontWeight: ds.typography.fontWeight.semibold,
        fontSize: ds.typography.fontSize.lg,
      }}
    >
      {message}
    </div>
  );
}

Troubleshooting TypeScript

  • If you see type errors, ensure your designers package and config are up to date.
  • Check your tsconfig.json for correct types and paths if using a monorepo.
  • Restart your TypeScript server after adding or changing tokens.
  • For custom tokens, update your types as needed for full type safety.

What's Next?

Quick StartConfigurationDesign Tokens