Vanilla Unstyled UI

A flexible set of modular and unstyled UI components built for Tailwind CSS & Alpine.js.
Designed for makers who want full control—build your design system from scratch, extend every piece, and scaffold your own UI toolkit with zero opinionated styles.

🧩 Modular by Design

Use only what you need. Each component is isolated and composable—mix and match freely without bloat.

🔧 DIY & Scaffold-Ready

Start from raw elements and scaffold your own design system. You bring the design—Vanilla provides the structure.

🧱 Fully Extendable

Components are intentionally barebones. Extend or wrap them to match your brand, UX patterns, or framework.

A Philosophy of Freedom

Many UI kits come pre-styled with assumptions. Vanilla Unstyled UI is different—it gives you full control with clean, minimal markup, and no styling opinions. Perfect for teams building design systems, rapid prototyping, or wanting to avoid framework lock-in.

Perfect For

  • âś… Tailwind developers who want full styling freedom
  • âś… Alpine.js users looking for lightweight, reactive UI building blocks
  • âś… Teams building custom design systems from scratch
  • âś… Projects where performance and file size matter
  • âś… Rapid prototyping without UI constraints

Ready to build your UI your way?

Explore the components, customize them freely, and start shipping fast.

Get Started

Installation Guide


Install the required packages

Import the tailwindcss and vanilla-unstyled-ui into your css file

and then in your js file import the required package

Buttons

Default Button

A basic button component with default styling. It provides a neutral starting point for custom button designs.

A default button with a background color applied. Easily themeable using Tailwind utility classes.

Pill Button

A rounded button (pill-shaped) for a softer, more modern UI style. Common in mobile interfaces and tags.

Outline Button

A button with no background and a border. Useful for secondary actions or minimalist designs.

Button Group

A set of buttons grouped together, useful for segmented controls or multiple related actions.

Button with Icon

A button with an icon and interactive state toggle (like/unlike). Great for social UI elements.

Dropdown

Default Dropdown

A basic dropdown menu that appears on click. Useful for navigation, filters, or user menus.

Left/Right Aligned Dropdown

Modals

In HTML, a modal (or modal dialog) is a user interface element that appears on top of the main content of a webpage, temporarily disabling interaction with the underlying page. Modals are commonly used to display important information, collect user input, or confirm actions.

A simple modal can be create with the following code:

Or you can craft more complex modals with the following code:

Then Reference The Partials Modal with template

You can even change the container, by passing the container ID