a17t

Version 0.10.1 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.

Live Example

If you are a student, select 'other.'

The correct answer is a17t!

Submit Save draft
Example code 
<form class="card p-0">
  <section class="p-4 flex flex-col gap-4">
    <div>
      <label class="label" for="toolkit">Current job</label>
      <div class="select ~neutral @low block my-1 max-w-xs">
        <select>
          <option>Teacher</option>
          <option>Engineer</option>
          <option>Firefighter</option>
          <option>Other</option>
        </select>
      </div>
      <p class="support">If you are a student, select 'other.'</p>
    </div>
    <div>
      <label class="label" for="toolkit">Favorite toolkit</label>
      <input id="toolkit" type="text" class="input ~critical !normal my-1 max-w-xs block" placeholder="At least 8 characters..."
        value="Not a17t">
      <p class="support ~critical">The correct answer is a17t!</p>
    </div>
  </section>
  <section class="section ~neutral flex gap-2 p-4">
    <span class="button ~info @high">Submit</span>
    <span class="button ~neutral @low">Save draft</span>
  </section>
</form>

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.

Live Example

Senior Researcher

Dr. Katya Hattenagh

Katya studies the intersection of machine learning and differential topology.

Discrete Math Topology Neural Nets
Example code 
<div class="card md:flex max-w-lg">
  <div class="w-20 h-20 mx-auto mb-6 md:mr-6 flex-shrink-0">
    <img class="object-cover rounded-full" src="/assets/profile_image.png">
  </div>
  <div class="flex-grow text-center md:text-left">
    <p class="support">Senior Researcher</p>
    <h3 class="text-xl heading">Dr. Katya Hattenagh</h3>
    <p class="mt-2 mb-3">Katya studies the intersection of machine learning and differential topology.</p>
    <div>
      <span class="chip ~neutral mb-1">Discrete Math</span> <span class="chip ~neutral mb-1">Topology</span> <span
        class="chip ~neutral mb-1">Neural Nets</span>
    </div>
  </div>
</div>

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 two 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.

Live Example

Name Status Price
Landinator 9000 New Completed $300
Hammer Waiting $20
Computer Processing $500
Example code 
<table class="table">
  <thead>
    <tr>
      <th>Name</th>
      <th>Status</th>
      <th>Price</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Landinator 9000 <span class="badge ~neutral">New</span></td>
      <td><span class="chip ~positive">Completed</span></td>
      <td>$300</td>
    </tr>
    <tr>
      <td>Hammer</td>
      <td><span class="chip ~urge">Waiting</span></td>
      <td>$20</td>
    </tr>
    <tr>
      <td>Computer</td>
      <td><span class="chip ~info">Processing</span></td>
      <td>$500</td>
    </tr>
  </tbody>
</table>

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.

Live Example

Just making sure!

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

Delete Go Back
Example code 
<div class="card p-0 border-0">
  <div class="p-4">
    <h2 class="mb-1 text-lg heading">Just making sure!</h2>
    <p class="mb-3 text-base support">To confirm you'd like to delete this repository, please enter its name below.</p>
    <input class="input ~neutral" type="text" placeholder="milesmcc/a17t">
  </div>
  <section class="section ~critical p-4">
    <span class="button ~critical @high">Delete</span>
    <span class="pl-2 text-neutral-800">Go Back</span>
  </section>
</div>

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 →