UI8Kit Documentation

UI8Kit is a modern React UI library with TypeScript-first approach, utility-first styling, and polymorphic components.

📚 Documentation

Quick Start

• Overview - Library overview
• Getting Started - Installation and setup

API Reference

• Components - Complete component reference
• Core UI - Variants system and utilities
• Layouts - Layout components (Container, Stack, Grid)

Architecture

• Architecture Overview - General architecture
• Variant System - Variants system (CVA)
• Package Structure - Package structure
• TypeScript Configuration - TypeScript setup
• Build System - Build system

Development

• Development Guide - Main guide
• Basic Workflow - Step-by-step workflow
• Best Practices - Best practices
• Dark Mode - Theme implementation

Troubleshooting

• Troubleshooting - Solving common issues

🚀 Key Features

• TypeScript-first: Full type safety with autocompletion
• Utility-first: All styles available as component props
• Polymorphic components: Any HTML element via component prop
• Variants system: Consistent styling through CVA
• Dark mode: Built-in theme support
• Tree shaking: Automatic unused code removal
• Accessibility: ARIA attributes and keyboard navigation

📦 Installation

npm install @ui8kit/core

🎯 Usage Example

import { Button, Block, Container, Stack, Card } from '@ui8kit/core'
import { ThemeProvider } from './providers/theme'

function App() {
  return (
    <ThemeProvider theme={defaultTheme}>
      <Container>
        <Stack gap="lg" align="center">
          <Block py="xl" ta="center">
            <Title size="4xl">Welcome to UI8Kit</Title>
            <Text c="muted">Modern React UI Library</Text>
          </Block>

          <Card p="lg" rounded="xl">
            <Stack gap="md">
              <Text fw="bold">Getting Started</Text>
              <Button variant="primary" size="lg">
                Learn More
              </Button>
            </Stack>
          </Card>
        </Stack>
      </Container>
    </ThemeProvider>
  )
}

🏗️ Architecture

USER LEVEL               COMPOSITE LEVEL           PRIMITIVE LEVEL
┌─────────────────┐     ┌─────────────────┐     ┌─────────────────┐
│ <Button         │────▶│ components/ui/Button │────▶│ core/ui/Button    │
│   variant="primary"│     │ + buttonVariants   │     │ (no styles)     │
│   size="lg"     │     │ + spacingVariants │     │                 │
│   rounded="md"  │     │ = Beautiful API  │     │                 │
│ />              │     │                  │     │                 │
└─────────────────┘     └─────────────────┘     └─────────────────┘

📊 Performance

• Bundle size: ~15KB gzipped (full core)
• Tree shaking: Automatic unused code removal
• Zero runtime: Styles compiled to CSS
• Stable references: No unnecessary re-renders

🤝 Community

• GitHub: github.com/ui8kit/core
• Issues: For bug reports and feature requests
• Discussions: For questions and discussions

📄 License

GPL-3.0

---

Start developing with Getting Started! 🚀