ui-kit Svelte Themes

Ui Kit

Svelte UI-Kit based on UnoCSS (WIP)

Cinderlink UI Kit

A modern Svelte 5 component library for the Cinderlink ecosystem.

🚀 Features

  • Svelte 5 Ready: Built with Svelte 5 runes API ($props(), $state(), $effect())
  • TypeScript First: Full TypeScript support with comprehensive type definitions
  • Glass Morphism Design: Beautiful glass effects with backdrop blur and transparency
  • UnoCSS Styling: Utility-first CSS with custom theme integration
  • Dark Mode: Built-in dark mode support with automatic theme switching
  • Modular: Tree-shakeable components organized by category
  • Accessible: WCAG AA compliant with proper ARIA support
  • Framework Integration: Designed to work seamlessly with @cinderlink framework packages

📦 Installation

# Using pnpm (recommended)
pnpm add @cinderlink/ui-kit

# Using npm
npm install @cinderlink/ui-kit

# Using yarn
yarn add @cinderlink/ui-kit

🎯 Quick Start

<script>
    import { Button, Card, Typography } from '@cinderlink/ui-kit';

    let count = $state(0);
</script>

<Card>
    {#snippet titleSlot()}
        <Typography el="h2">Counter Example</Typography>
    {/snippet}

    <Typography>Count: {count}</Typography>
    <Button onclick={() => count++}>Increment</Button>
</Card>

🏗️ Component Categories

Content Components

  • Avatar - User avatars with status indicators
  • Card - Flexible content containers
  • Typography - Text styling and hierarchy
  • Notification - Toast and alert components
  • Panel - Layout panels and surfaces

Interactive Components

  • Button - Buttons with various styles and states
  • Input - Form inputs with validation
  • Modal - Dialog and overlay components
  • Dropdown - Select and menu dropdowns
  • Toggle - Switch and checkbox components

Layout Components

  • Sidebar - Navigation sidebars
  • CenteredPanelLayout - Centered content layouts

Indicator Components

  • LoadingIndicator - Loading spinners and progress
  • StatusIndicator - Status badges and indicators

🎨 Theming

The UI kit includes built-in theme support with UnoCSS:

<script>
    import { ThemeToggle } from '@cinderlink/ui-kit';
</script>

<ThemeToggle />

🔧 Development

# Install dependencies
pnpm install

# Start development server
pnpm dev

# Build the library
pnpm build

# Run tests
pnpm test

# Type checking
pnpm check

# Linting
pnpm lint

📚 Documentation

  • Theme Guide: Complete guide to the glass morphism design system, theming, and customization
  • Component Guide: Comprehensive guide to component usage, patterns, and best practices
  • CLAUDE.md: Development instructions and project architecture for contributors

Visit the component stories at http://localhost:3002 when running the dev server to see all components with examples and usage patterns.

🔗 Framework Integration

This UI kit is designed to work with the Cinderlink framework packages:

  • @cinderlink/core-types - Core type definitions
  • @cinderlink/protocol - Protocol implementation
  • @cinderlink/client - Client framework

🤝 Contributing

  1. Clone the repository
  2. Install dependencies: pnpm install
  3. Make your changes
  4. Run tests: pnpm test
  5. Build: pnpm build
  6. Submit a pull request

📄 License

MIT License - see LICENSE file for details.

Top categories

Loading Svelte Themes