@framingui/core

@framingui/core

Core design system pipeline: Theme → Blueprint → Screen generation

Installation

npm install @framingui/core

Quick Start

import { loadTheme, createBlueprint, render } from '@framingui/core';

// 1. Load theme
const theme = loadTheme('calm-wellness');

// 2. Create blueprint
const blueprint = createBlueprint({
  name: 'Dashboard',
  themeId: theme.id,
  layout: 'dashboard',
  components: [
    { type: 'Heading', props: { level: 1 }, children: ['Welcome'] },
    {
      type: 'Card',
      children: [
        { type: 'Text', children: ['Your stats here'] },
        { type: 'Button', props: { variant: 'primary' }, children: ['View More'] },
      ],
    },
  ],
});

// 3. Render to JSX
const result = render(blueprint);
console.log(result.code);

Key Features

• 3-Layer Token System: Atomic → Semantic → Component architecture
• Type-Safe: Full TypeScript support with Zod validation
• OKLCH Color System: Perceptually uniform colors with WCAG validation
• Dark Mode: Built-in dark mode support
• Zero Dependencies: Only Zod for runtime validation

Documentation

See the official documentation for:

• Token System Guide
• Theme Configuration
• Blueprint API
• Screen Generation

License

MIT