@kodexalabs/kdx-kit

Unified Design System SDK for Kodexalabs projects. Consolidates design tokens, UI components, branding assets, and utilities into a single, cohesive package.

🎯 What's Included

• Design Tokens - Colors, typography, spacing, motion, and more (formerly @kodexalabs/asd-tokens)
• UI Components - React components built with strict monochrome design principles
• Branding Assets - KLogo, KLoadingGrid, and brand utilities
• Tailwind Plugin - Seamless integration with Tailwind CSS
• TypeScript Support - Full type definitions included

📦 Installation

npm install @kodexalabs/kdx-kit

Peer Dependencies:

npm install react react-dom tailwindcss

🚀 Quick Start

Using Design Tokens

import { colors, typography, spacing } from '@kodexalabs/kdx-kit';

// Access token values
const primaryColor = colors.brand.background.hsl; // hsl(0 0% 0%)
const headingFont = typography.fontFamily.heading; // 'Plus Jakarta Sans'
const baseSpacing = spacing[4]; // 1rem

Using Components

import { Button, Card, ThemeProvider } from '@kodexalabs/kdx-kit';

function App() {
  return (
    <ThemeProvider>
      <Card>
        <Button variant="default">Click Me</Button>
      </Card>
    </ThemeProvider>
  );
}

Using Branding Assets

import { KLogo, KLoadingGrid } from '@kodexalabs/kdx-kit/branding';

function Header() {
  return <KLogo size={32} variant="dark" />;
}

Tailwind CSS Integration

// tailwind.config.js
import kodexaTokens from '@kodexalabs/kdx-kit/tailwind';

export default {
  content: ['./src/**/*.{js,jsx,ts,tsx}'],
  plugins: [kodexaTokens],
};

Now use design tokens in your classes:

<div className="bg-brand-background text-brand-foreground">
  Styled with KDX tokens
</div>

📖 API Reference

Subpath Exports

// Main entry (all exports)
import { Button, colors, KLogo } from '@kodexalabs/kdx-kit';

// Tokens only
import { designTokens, colors } from '@kodexalabs/kdx-kit/tokens';

// Components only
import { Button, Card } from '@kodexalabs/kdx-kit/components';

// Branding only
import { KLogo, KLoadingGrid } from '@kodexalabs/kdx-kit/branding';

// Tailwind plugin
import kodexaTokens from '@kodexalabs/kdx-kit/tailwind';

Available Components

• Button - Versatile button component with variants
• Card - Card container with header, content, footer
• ThemeProvider - Theme context provider
• AssistantUI - Assistant interface component

Design Token Categories

• colors - Brand colors, semantic colors, UI colors, grayscale
• typography - Font families, sizes, weights, line heights
• spacing - Consistent spacing scale (0-96)
• radius - Border radius values
• shadow - Box shadow definitions
• motion - Animation timing and easing
• layout - Breakpoints and container widths
• borderWidth - Border width scale
• zIndex - Z-index layering system

🎨 Design Philosophy

Strict Monochrome - KDX-Kit follows a pure black-and-white design system:

• Background: #000000 (pure black)
• Foreground: #ffffff (pure white)
• Surface: hsl(0 0% 7%)
• Border: hsl(0 0% 23%)

No accent colors - All UI states use contrast, borders, and opacity instead of color.

🔄 Migration Guide

Migrating from split packages (@kodexalabs/asd-tokens + @kdx-kit/ui)?

Before:

import { colors } from '@kodexalabs/asd-tokens';
import { Button } from '@kdx-kit/ui';

After:

import { colors, Button } from '@kodexalabs/kdx-kit';

See full migration guide: migrate-to-kdx-kit.md

📚 Documentation

• Target Architecture
• Publishing Roadmap
• Architecture Rules

🛠️ Requirements

• Node.js: >=18.0.0
• React: ^18.0.0
• TypeScript: ^5.0.0 (recommended)

📄 License

MIT © KodexaLabs

🤝 Contributing

This package consolidates the Kodexalabs design system. For issues or contributions, please visit the GitHub repository.

📦 Package Info

• Version: 1.0.0
• Bundle Size: ~24 KB (gzipped)
• TypeScript: Full type definitions included
• Tree-shakeable: ESM and CJS builds
• React: Server Components compatible ("use client" directives included)