Colibrí Design System

A themeable Web Components library built with Lit, designed to provide a consistent and customizable design system for your web applications.

Features

• 🎨 Themeable: Light, dark, and custom themes supported
• 🔧 Customizable: Style tokens and CSS custom properties
• ♿ Accessible: Built with accessibility in mind
• 📱 Responsive: Mobile-first approach
• ⚡ Performant: Lightweight and fast
• 🛠️ Web Components: Framework agnostic

Installation

WIP publish the package

npm install tls-colibri

Quick Start

// Import the component
import '@colibri/components/col-button';

// Use in HTML
<col-button variant="primary">Click me</col-button>

Theming

Colibri components support multiple themes out of the box:

import '@colibri/components/col-theme-provider';

// Light theme (default)
<col-theme-provider>
  <col-button>Default Theme</col-button>
</col-theme-provider>

// Dark theme
<col-theme-provider mode="dark">
  <col-button>Dark Theme</col-button>
</col-theme-provider>

Components

Core

• Theme Provider
• Layout Container
• Grid System

Form

• Button
• Input
• Select
• Checkbox
• Radio

Data Display

• Card
• Table
• List
• Badge

Navigation

• Tabs
• Menu
• Breadcrumb
• Pagination

Browser Support

• Chrome/Edge ≥ 79
• Firefox ≥ 67
• Safari ≥ 14
• iOS Safari ≥ 14

Documentation

For detailed documentation and examples, visit our Storybook documentation.

Contributing

We welcome contributions! Please see our Contributing Guide for details on how to:

• Submit issues
• Set up the development environment
• Submit pull requests
• Follow our coding standards

License

This project is licensed under the MIT License - see the LICENSE file for details.

Support

• 📫 Report bugs: Issue tracker
• 💬 Get help: Discussions
• 📖 Read docs: Documentation

Development

# Install dependencies
npm install

# Start development server
npm run dev

# Run tests
npm test

# Build for production
npm run build

Made with ❤️ by the Portals hummingbirds team