Socket
Socket
Sign inDemoInstall

svelte-headlessui

Package Overview
Dependencies
Maintainers
0
Versions
46
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

svelte-headlessui

HeadlessUI components for Svelte


Version published
Weekly downloads
2.9K
decreased by-25.31%
Maintainers
0
Weekly downloads
 
Created
Source

minified minified + zipped

Svelte-HeadlessUI

Svelte Headless-UI

svelte-headlessui is an unofficial implementation of Tailwind HeadlessUI for Svelte. Just like the official implementation, they are:

  • ✅ Completely unstyled
  • ✅ Fully WIA-ARIA accessible UI components
  • ✅ Fully typed with Typescript
  • ✅ Designed to integrate beautifully with Tailwind CSS

But also:

  • ✅ Designed to integrate beautifully with Svelte and SvelteKit
  • ✅ Less than 14kB minified / 4kB minified gzipped

BREAKING CHANGE (v0.0.39)

The latest 0.0.39 release switches to using "change" instead of "select" as the event fired when the selected item changes for semantic correctness and to better match native inputs. Be sure to change listeners from on:select to on:change!

Installation

Install using your package manager of choice, e.g.

pnpm install svelte-headlessui

Import the appropriate create... factory method in your component and use the custom store it returns to manage your component state and attach use:action behaviors to your elements.

See the individual component pages for usage examples.

Alternative

You may be interested in evaluating @rgossiaux/svelte-headlessui. This package aligns closer to the official components in it's approach although I believe that approach (driven by React / Vue) contributes to the larger size of 173kB minified / 29kB minified + gzipped.

Special thanks to Shoob for the logo!

Keywords

FAQs

Package last updated on 25 Jun 2024

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc