Base Styles is an evergreen CSS component library. One css file that you can add to your codebase to make building beautiful web apps easier and faster.
- Customizable: Tweak 6 CSS variables to change the entire look and feel of your app.
- Extendable: Want to add something not included with our defaults? Just create your own variant.
- Future Proof: Decades from now, your codebase can be opened, run and modified with no dependencies or build steps. Just clean, readable CSS.
In the year 2025, CSS is super powerful - animations and transitions are first class, and html elements are more stylable than ever. You don't need yarn
, npm
, typescript
or any other tooling to achieve beautiful, accessible UI. For the small number of components that require interactivity, you can achieve the desired behaviour in about 20 lines of javascript.
This means you can port Base Styles to your framework-of-choice in less than an hour.
Component | Javascript |
---|---|
Button | No js required |
Button Group | No js required |
Forms | No js required |
Floating Input Labels | No js required |
Tooltips | No js required |
Search Input | No js required |
Eyebrow | No js required |
Switch | No js required |
Chip | No js required |
Title Pair | No js required |
Box | No js required |
Shimmer | No js required |
Styled Text | No js required |
Table | No js required |
Tabnav | Toggle .--active on the active item when clicked |
Modal | Toggle .--visible on the modal container to open/close |
Toast | Add .--animate-in and .--animate-out to a toast to show/hide it |
Expander | Toggle .--expanded on the expander to open/close |
- Check the current version here
<link rel="stylesheet" href="https://cdn.base-styles.com/versions/{VERSION}.css">
Buttons
<button class="ui-button">Basic Button</button>
Forms
<form class="ui-form">
<input type=...>
</form>
Tooltips
<span class="ui-tooltip--top" aria-label="This is your tooltip">
Tooltip Top
</span>
- Why are component libraries in 2025 primarily packaged and delivered with javascript/typescript?
- Why are library authors all rewriting the same components instead of reusing a common CSS base?
- Fix naming conventions for ui-tooltip (break apart the class).
- Add dropdown arrow that rotates on open to ui-select.
- Clean up variables for ui-styled-text.
- Add more variants for modals.
- Add CSS nesting polyfill (currently nesting only works in 87% of browsers).
- Use focus-within for floating labels (can be broken with password managers currently).
gem install sinatra rackup puma redcarpet
- Make changes to
base-styles.css
as you see fit. - Run
node utils/create-version.js
when finished to create a new version file. - Add notes to the changelog.