Vanilla UI

The team at Vanilla UI are passionate about Web Components and accessibility 🚀 We’ve ported the power of Radix UI into a framework-agnostic library using Web Components with Light DOM.

​
What is Vanilla UI?

Vanilla UI consists of two main packages:

  1. @vanilla-primitives/core: A direct port of Radix UI primitives to Web Components using Light DOM.
  2. @vanilla-primitives/styled: Pre-styled, customizable components built on top of @vanilla-primitives/core. This is basically Shadcn with extended features.

​
Key Features

  • Radix as Web Components: Radix’s accessibility and robustness, now as Web Components with Light DOM.
  • Framework Agnostic: Use with any JavaScript framework or vanilla JS.
  • Accessibility First: Inherits Radix’s strong focus on accessibility.
  • Light DOM Benefits: Better performance, easier styling, and simpler integration.
  • Design System Flexibility: Choose from various pre-built designs or create your own.
  • Developer Experience: Familiar APIs for Radix users, with Web Component benefits.

​
An Example of Vanilla UI

Here’s an example of an accessible Alert Dialog using Vanilla UI 👇

Preview Code
Style: Shadcn
Default
Default CSS
Show Dialog Are you absolutely sure? This action cannot be undone. This will permanently delete your account and remove your data from our servers. Cancel Continue 
<alert-dialog>
    <alert-dialog-trigger asChild>
        <vanilla-button variant="outline">Show Dialog</vanilla-button>
    </alert-dialog-trigger>
    <alert-dialog-content>
        <alert-dialog-header>
            <alert-dialog-title>Are you absolutely sure?</alert-dialog-title>
            <alert-dialog-description>
                This action cannot be undone. This will permanently delete your
                account and remove your data from our servers.
            </alert-dialog-description>
        </alert-dialog-header>
        <alert-dialog-footer>
            <alert-dialog-cancel>Cancel</alert-dialog-cancel>
            <vanilla-button>Continue</vanilla-button>
        </alert-dialog-footer>
    </alert-dialog-content>
</alert-dialog>

Copy the Code. That’s all you need!

Simply import the Vanilla UI library, paste in the element, and you’re set 🎉

​
Why Web Components?

Web Components allow for creating reusable, encapsulated HTML elements that work across modern browsers. They offer several advantages:

  1. Reusability: Create components once and use them across different projects or frameworks.
  2. Encapsulation: Components have their own scope, reducing naming conflicts and CSS specificity issues.
  3. Standard-based: Built on web standards, ensuring long-term compatibility and support.
  4. Framework-agnostic: Work with any JavaScript framework or vanilla JS.

This wouldn’t be possible with Shadow DOM without complex workarounds, as styles don’t normally pierce the shadow boundary.

​
Inspiration

Vanilla UI draws inspiration from several fantastic projects in the UI component space:

  • Radix UI: The original inspiration for our headless components, known for its accessibility and flexibility.
  • shadcn/ui: A collection of re-usable components built using Radix UI and Tailwind CSS.
  • Bits UI: Svelte-based unstyled, accessible components inspired by Radix UI.
  • Melt UI: Another Svelte-based headless UI library focused on accessibility and customization.
  • Pines UI: A collection of Alpine.js and Tailwind CSS components.

We’ve learned from and been inspired by these projects, aiming to bring their best qualities to the world of Web Components.

Vanilla UI bridges the gap between powerful component architectures and Web Standards, offering developers a versatile toolkit for creating accessible, efficient, and customizable user interfaces.

Introduction