Base Styles

The Lowest Complexity way to make your apps both Beautiful and Consistent.

• Beautiful By Default: Clean, modern styling out of the box.
• Effortless Consistency: No need for dozens of tailwind classes to style a button.
• No Build: Just import the CSS file and start building.
• Customizable: Make it your own by tweaking a few CSS variables or using a theme.
• Extendable: Want to add something not included with our defaults? Just create a variant.
• Tailwind Compatible: Designed to work alongside Tailwind, not to replace it.

CSS First, Javascript Optional

Every year, the number of UI elements that need javascript is shrinking. And yet every component library today is needlessly locked in to a specific javascript approach, often depending on heavy meta-frameworks like React. We see a future where people use a CSS foundation like Base Styles, paired with whatever flavour of javascript they use.

Javascript-Free Components

Buttons

<%= inline_svg('assets/icons/heroicons/check-circle.svg', class: 'w-4 h-4 text-green-500 mr-1') %> No javascript needed.

Button Groups

<%= inline_svg('assets/icons/heroicons/check-circle.svg', class: 'w-4 h-4 text-green-500 mr-1') %> No javascript needed.

Forms & Basic Inputs

<%= inline_svg('assets/icons/heroicons/check-circle.svg', class: 'w-4 h-4 text-green-500 mr-1') %> No javascript needed.

Eyebrows

<%= inline_svg('assets/icons/heroicons/check-circle.svg', class: 'w-4 h-4 text-green-500 mr-1') %> No javascript needed.

Switches

<%= inline_svg('assets/icons/heroicons/check-circle.svg', class: 'w-4 h-4 text-green-500 mr-1') %> No javascript needed.

Chips

<%= inline_svg('assets/icons/heroicons/check-circle.svg', class: 'w-4 h-4 text-green-500 mr-1') %> No javascript needed.

Titles

<%= inline_svg('assets/icons/heroicons/check-circle.svg', class: 'w-4 h-4 text-green-500 mr-1') %> No javascript needed.

Boxes

<%= inline_svg('assets/icons/heroicons/check-circle.svg', class: 'w-4 h-4 text-green-500 mr-1') %> No javascript needed.

Shimmer

<%= inline_svg('assets/icons/heroicons/check-circle.svg', class: 'w-4 h-4 text-green-500 mr-1') %> No javascript needed.

Styled Text

<%= inline_svg('assets/icons/heroicons/check-circle.svg', class: 'w-4 h-4 text-green-500 mr-1') %> No javascript needed.

Tables

<%= inline_svg('assets/icons/heroicons/check-circle.svg', class: 'w-4 h-4 text-green-500 mr-1') %> No javascript needed.

Dropdowns

<%= inline_svg('assets/icons/heroicons/check-circle.svg', class: 'w-4 h-4 text-green-500 mr-1') %> No javascript needed.

Standalone Modals

<%= inline_svg('assets/icons/heroicons/check-circle.svg', class: 'w-4 h-4 text-green-500 mr-1') %> No javascript needed.

Simple Toasts

<%= inline_svg('assets/icons/heroicons/check-circle.svg', class: 'w-4 h-4 text-green-500 mr-1') %> No javascript needed.

Accordions

<%= inline_svg('assets/icons/heroicons/check-circle.svg', class: 'w-4 h-4 text-green-500 mr-1') %> No javascript needed.

Needs a little Javascript

Tabs

<%= inline_svg('assets/icons/jsicon.svg', class: 'w-4 h-4 mr-1') %> Simple class toggling with js needed

Combobox

<%= inline_svg('assets/icons/jsicon.svg', class: 'w-4 h-4 mr-1') %> Needs a js wrapper to work

Next UpGetting Started