--- layout: default title: "The atomic web toolkit for pragmatists" --- {% capture example_profile %}

Senior Researcher

Dr. Katya Hattenagh

Katya studies the intersection of machine learning and differential topology.

Discrete Math Topology Neural Nets
{% endcapture %} {% capture example_table %}
Name Status Price
Landinator 9000 New Completed $300
Hammer Waiting $20
Computer Processing $500
{% endcapture %} {% capture example_form %}

If you are a student, select 'other.'

The correct answer is a17t!

Submit Save draft
{% endcapture %} {% capture example_delete %}

Just making sure!

To confirm you'd like to delete this repository, please enter its name below.

Delete Go Back
{% endcapture %}

Version {{ site.a17t_version }} released →

Build beautiful interfaces without reinventing the wheel.

a17t is a Tailwind CSS plugin that provides atomic components like field, button, and card in a neutral design language that scales with your project.

Get started View the source

Atomic interface elements.
Stop styling everything from scratch.

Tailwind CSS is great. But do you really want to design all your interface elements from scratch for every new project? Are you confident you'll handle all the accessibility states properly?

Traditional design libraries are overkill — but Tailwind on its own isn't enough when you're just getting started. a17t tries to get the balance right. Instead of providing all-inclusive, opinionated components (like jumbotrons, navbars, and menus), a17t provides common single-class elements in a neutral design language.

As a Tailwind CSS plugin, a17t configures itself using your tailwind.config.js file, so it'll integrate seamlessly with your codebase.

{% include example.html code=example_form label=true classes="bg-inf" %}

Atomic & flexible

a17t provides core, single-class interface elements and empowers you to assemble them your way. And you can customize it through your Tailwind config, so you'll never need to settle for “good enough.”

Logical & hierarchical

a17t encourages you to think in terms of intent and hierarchy by specifying elements in terms of tone and priority. As an added bonus, this makes refactoring and customization a breeze.

Lightweight & modern

a17t has no dependencies except Tailwind. That means it's reliable, customizable, and can integrate with any stack. Just install the plugin and you're good to go.

Pleasant & accessible

a17t is designed to make every interaction a delight. In addition to its semantic markup, a17t is full of subtle animations and accessibility features that make it pleasing for everyone to use.

{% include example.html code=example_profile label=true classes="bg-neutral-100" %}

Use tones to control color

There's a tone for every Tailwind color! Tones are specified using special class names that start with a tilde (e.g., ~green). To make an indigo chip, for example, use chip ~indigo.

Use priorities to control prominence

There are three priorities — low and high. You can specify a priority by its class: an “at sign” followed by its name (e.g., @high or @low). Priorities change elements' visual prominence.

A perfect match for Tailwind

a17t only provides atomic elements of your interface, like buttons and form inputs, and you'll need a tool to stitch everything together. That's where Tailwind comes in. a17t provides a solid and accessible base for your interface — use Tailwind to combine a17t's components into a masterpiece.

{% include example.html label=true code=example_table classes="bg-transparent" %}

Thoughtful typography — a17t is optimized for legibility. From headings to body text to labels, a17t tries to follow typographic best practices to ensure consistent, readable interfaces.

No margins — While most a17t elements have some kind of internal spacing, none have any external margin by default. This is intentional: spacing is not one-size-fits-all, so not having any makes a17t more flexible.

Tailwind plugin — Unlike most component libraries libraries, a17t is a Tailwind plugin and reads important values — like colors and spacing — from your Tailwind config. That means installation and customization is a breeze.

Effortlessly responsive — All of a17t's elements are designed to look great on any kind of device. So as long as you build your layout responsively, a17t will automatically follow suit without any extra effort.

{% include example.html code=example_delete label=true classes="bg-neutral-100" %}

To install a17t, simply add it to the plugin section of your Tailwind config with require("a17t"). For more information about installing and customizing a17t, check out our detailed guide.

Read the guide →