Unity Kit

dsbtek

UnityKit is a framework-agnostic component library that provides beautiful, accessible UI components that work seamlessly across React, Vue, Angular, Svelte, and vanilla JavaScript.

Download

UnityKit 🔗

Build once, use anywhere. UnityKit is a framework-agnostic component library that provides beautiful, accessible UI components that work seamlessly across React, Vue, Angular, Svelte, and vanilla JavaScript.

✨ Why UnityKit?

Modern web development is fragmented across frameworks, but your component library shouldn't be. UnityKit solves this by providing:

🔄 One Codebase: Write components once in Web Components, use them everywhere
🎨 Consistent Design: Same look, feel, and behavior across all frameworks
🔧 Framework-Native APIs: Components feel native in each framework
🚀 Performance: Built on native Web Components for optimal performance
♿ Accessibility First: WCAG 2.1 AA compliant out of the box

📦 Installation

Core Package (Web Components)

npm install @unitykit/core
# or
yarn add @unitykit/core
# or
pnpm add @unitykit/core

Framework-Specific Packages

# React
npm install @unitykit/react

# Vue
npm install @unitykit/vue

# Angular
npm install @unitykit/angular

# Svelte
npm install @unitykit/svelte

# Solid
npm install @unitykit/solid

CDN (For Quick Prototyping)

<script type="module">
  import { defineAllComponents } from 'https://cdn.jsdelivr.net/npm/@unitykit/core@latest/dist/core.esm.js';
  defineAllComponents();
</script>

🚀 Quick Start

1. Import Styles

/* In your main CSS file */
@import '@unitykit/core/dist/styles.css';

2. Use Components

React:

import { Button, Card, Input } from '@unitykit/react';

function App() {
  return (
    <Card>
      <Input label="Email" placeholder="[email protected]" />
      <Button variant="primary">Submit</Button>
    </Card>
  );
}

Vue:

<template>
  <UnityCard>
    <UnityInput label="Email" placeholder="[email protected]" />
    <UnityButton variant="primary">Submit</UnityButton>
  </UnityCard>
</template>

<script setup>
import { UnityButton, UnityCard, UnityInput } from '@unitykit/vue';
</script>

Angular:

import { UnityKitModule } from '@unitykit/angular';

@NgModule({
  imports: [UnityKitModule],
})
export class AppModule {}

<unity-card>
  <unity-input label="Email" placeholder="[email protected]"></unity-input>
  <unity-button variant="primary">Submit</unity-button>
</unity-card>

Vanilla JS:

<script type="module">
  import { defineAllComponents } from '@unitykit/core';
  defineAllComponents();
</script>

<unity-card>
  <unity-input label="Email" placeholder="[email protected]"></unity-input>
  <unity-button variant="primary">Submit</unity-button>
</unity-card>

🎨 Components

UnityKit includes a comprehensive set of production-ready components:

Basic Components

✅ Button - Multiple variants, sizes, loading states
✅ Input - Form inputs with validation states
✅ Checkbox - Custom checkboxes with labels
✅ Radio - Radio button groups
✅ Select - Custom dropdown/select
✅ Toggle - Switch toggle component

Layout Components

✅ Card - Container with shadow and padding
✅ Grid - Responsive grid system
✅ Container - Centered content container
✅ Divider - Horizontal/vertical dividers
✅ Spacer - Flexible spacing component

✅ Tabs - Tab navigation
✅ Breadcrumb - Navigation hierarchy
✅ Pagination - Page navigation
✅ Menu - Dropdown and context menus

Feedback Components

✅ Alert - Status messages
✅ Toast - Notification system
✅ Modal - Dialog windows
✅ Progress - Progress indicators
✅ Skeleton - Loading placeholders

Data Display

✅ Table - Sortable, paginated tables
✅ Badge - Status badges
✅ Avatar - User avatars
✅ Tooltip - Contextual information
✅ Accordion - Collapsible sections

🎯 Key Features

1. Framework Agnostic

// Same component, different frameworks
<Button />                     // React
<unity-button></unity-button>  // Vue/Angular/HTML
<Button />                     // Svelte

2. Design Tokens & Theming

/* Customize globally */
:root {
  --unity-primary: #4f46e5;
  --unity-border-radius: 8px;
  --unity-font-family: 'Inter', sans-serif;
}

/* Or use dark mode */
[data-theme='dark'] {
  --unity-bg-primary: #0f172a;
  --unity-text-primary: #f8fafc;
}

3. TypeScript Support

import type { ButtonProps } from '@unitykit/core';

// Full type safety for all components
const props: ButtonProps = {
  variant: 'primary',
  size: 'medium',
  disabled: false,
};

4. Accessibility Built-In

<!-- All components include proper ARIA attributes -->
<unity-button aria-label="Submit form" role="button">
  Submit
</unity-button>

5. Performance Optimized

Tree-shakable: Import only what you use
Lazy loading: Large components load on demand
Optimized bundles: Framework-specific optimized builds
Zero dependencies: No framework lock-in

📖 Documentation

Explore our comprehensive documentation:

Getting Started Guide - Setup and basic usage
Component Gallery - Interactive component explorer
Framework Guides - Framework-specific integration
API Reference - Complete API documentation
Theming Guide - Customization and theming
Recipes - Common patterns and examples

Run Documentation Locally

# Clone the repository
git clone https://github.com/unitykit/unitykit.git

# Navigate to docs
cd unitykit/docs

# Install dependencies
npm install

# Start documentation server
npm run docs:dev

🔧 Advanced Usage

Custom Themes

// theme.config.js
export default {
  colors: {
    primary: '#4f46e5',
    secondary: '#10b981',
    danger: '#ef4444',
  },
  spacing: {
    unit: 8,
  },
  typography: {
    fontFamily: "'Inter', 'Segoe UI', sans-serif",
  },
};

Server-Side Rendering (SSR)

// Next.js example
import { UnityKitProvider } from '@unitykit/react';

function MyApp({ Component, pageProps }) {
  return (
    <UnityKitProvider ssr>
      <Component {...pageProps} />
    </UnityKitProvider>
  );
}

Form Integration

// React Hook Form example
import { useForm } from 'react-hook-form';
import { Input, Button } from '@unitykit/react';

function LoginForm() {
  const { register, handleSubmit } = useForm();
  
  return (
    <form onSubmit={handleSubmit(data => console.log(data))}>
      <Input
        {...register('email', { required: true })}
        label="Email"
        type="email"
      />
      <Button type="submit">Login</Button>
    </form>
  );
}

Internationalization (i18n)

// i18n setup
import { i18n } from '@unitykit/core';

i18n.configure({
  locale: 'fr',
  messages: {
    'button.submit': 'Soumettre',
    'input.placeholder': 'Tapez quelque chose...',
  },
});

🤝 Contributing

We love contributions! Here's how you can help:

Report a Bug

Check if the bug already exists in Issues
Create a new issue with a clear description and reproduction steps

Suggest a Feature

Check Discussions
Start a new discussion with your idea

Submit a Pull Request

# 1. Fork the repository
# 2. Clone your fork
git clone https://github.com/YOUR_USERNAME/unitykit.git

# 3. Create a branch
git checkout -b feature/amazing-component

# 4. Install dependencies
npm install

# 5. Start development server
npm run dev

# 6. Make your changes and commit
git commit -m 'feat: add amazing component'

# 7. Push to your fork
git push origin feature/amazing-component

# 8. Open a Pull Request

Development Setup

# Install dependencies
npm install

# Build all packages
npm run build

# Run tests
npm test

# Run Storybook for development
npm run storybook

# Run linter
npm run lint

📈 Project Status

Package	Version	Status	Downloads
`@unitykit/core`		✅ Stable
`@unitykit/react`		✅ Stable
`@unitykit/vue`		✅ Stable
`@unitykit/angular`		🔄 Beta
`@unitykit/svelte`		✅ Stable
`@unitykit/solid`		🔄 Beta