bits-ui

Guide construction of headless Bits UI components in Svelte 5 projects.

1|Updated Mar 26, 2026
One-click install
npx skills add https://github.com/BetaHuhn/skills --skill bits-ui
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: bits-ui
Source: https://github.com/BetaHuhn/skills/tree/main/bits-ui
Command: npx skills add https://github.com/BetaHuhn/skills --skill bits-ui

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill provides expert guidance for constructing accessible, unstyled UI components in Svelte 5 using Bits UI, eliminating guesswork in implementing complex interactions like dialogs and menus.

Core Features & Use Cases

  • Component Patterns: Covers compound structures, state management with two-way binding, and DOM refs for precise control.
  • Styling and Customization: Explains class props, data attributes, CSS variables, and the child snippet for tailored elements.
  • Use Case: When developing a Svelte app needing a dropdown menu or tooltip, use this Skill to integrate Bits UI components with proper accessibility and floating positioning.

Quick Start

Use the bits-ui skill to implement an accessible accordion component in my Svelte project.

Frequently Asked Questions about bits-ui

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I build accessible headless UI components in Svelte 5?▼

Build accessible headless UI components in Svelte 5 using Bits UI, which provides unstyled primitives like dialogs and selects with built-in state management and data attributes for styling.

What's the best way to style unstyled Svelte UI primitives?▼

Style unstyled Svelte UI primitives by leveraging class props, CSS variables, and data attributes exposed by the headless components, or use the child snippet for fully tailored custom elements.

Can I use headless Svelte components for floating UI elements like popovers?▼

Yes, you can use headless Svelte components for floating UI elements like popovers and tooltips, as Bits UI handles accessible state management and integration of floating positioning.

How do I manage state with two-way binding in Svelte compound components?▼

Manage state with two-way binding in Svelte compound components by utilizing the built-in state management patterns and DOM refs provided by the headless UI primitives for precise control.

Does Bits UI work without imposing predefined styles on my Svelte app?▼

Yes, Bits UI works without imposing predefined styles, delivering unstyled accessible primitives that allow you to apply your own CSS variables and classes for complete visual customization.