Compote UI
An opinionated UI component library for Svelte, built on top of Ark UI with additional components and features not available in the core Ark UI library.
About
Compote UI provides a set of accessible, customizable, and well-styled UI components for Svelte applications. While Ark UI offers excellent headless components with robust accessibility, Compote UI goes a step further by:
- Opinionated defaults with sensible styling out of the box
- Additional components that fill gaps in the Ark UI ecosystem
- Tailwind CSS integration for easy customization
- TypeScript support with full type definitions
- Accessibility-first approach, building on Ark UI's strong foundation
Installation
npm install compote-ui
Or with other package managers:
pnpm add compote-ui
yarn add compote-ui
bun add compote-ui
Peer Dependencies
Compote UI requires Svelte 5 or later:
Quick Start
<script>
import { Button, Card } from 'compote-ui';
</script>
<Card>
<h1>Hello from Compote UI</h1>
<Button variant="primary">Click me</Button>
</Card>
Features
- ✅ Built on Ark UI - Leveraging battle-tested accessible primitives
- 🎨 Tailwind CSS - Easy theming and customization
- 🔧 TypeScript - Full type safety and autocomplete
- ♿ Accessible - WCAG compliant components
- 🚀 Svelte 5 - Modern Svelte with runes and enhanced reactivity
- 📦 Tree-shakeable - Only bundle what you use
Components
Compote UI includes all Ark UI components plus additional components:
From Ark UI
- Accordion, Avatar, Checkbox, Collapsible, Combobox, Dialog, Dropdown Menu, Hover Card, Menu, Pagination, Popover, Progress, Radio Group, Select, Slider, Switch, Tabs, Toast, Toggle, Tooltip, and more...
Additional Components
- Additional components that extend Ark UI functionality
- Custom styled variants with opinionated defaults
Theming
Compote UI uses Tailwind CSS, making it easy to customize the appearance to match your brand:
License
MIT
Links
