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

• GitHub
• Issues