UI Components
Component showcases from CoverKit - a dark-first, accessible React UI library
What is CoverKit?
CoverKit (@covers/ui) is a dark-first, accessible React component library built on Radix UI and Tailwind CSS. It powers the Covers project management app.
Quick Start
npm install @covers/ui
// In your component
import { Button, Card, Dialog } from '@covers/ui';Components
Button Component
Versatile button component with multiple variants, sizes, and states. Built on Radix UI for accessibility.
Card Component
Flexible card container with header, content, and footer sections. Perfect for dashboards and lists.
Dialog Component
Modal dialog with overlay, accessible focus management, and customizable content.
Tabs Component
Tabbed interface with keyboard navigation and ARIA support. Great for organizing content.
Badge Component
Small status indicators and labels. Perfect for tags, counts, and status displays.
Input Component
Text input field with consistent styling. Works with labels and form validation.
Toast Component
Notification toasts with auto-dismiss, stacking, and swipe-to-close. Supports success, error, warning, and info variants.
Select Component
Dropdown select with search/filter, option groups, and keyboard navigation. Built on Radix UI for full accessibility.
Tooltip Component
Hover tooltips with configurable positioning, delay, and accessible labeling. Wraps any element.
Avatar Component
User avatar with image support, fallback initials, multiple sizes, and optional status indicator dot.