DEV Community

Cover image for I built a small CSS library for UI states (because I kept rewriting the same thing)
roynick365
roynick365

Posted on

I built a small CSS library for UI states (because I kept rewriting the same thing)

#webdev #css #opensource #frontend

I built a small CSS library for UI states (because I kept rewriting the same thing)

Most UI libraries focus on buttons, forms, and layouts.

But in real projects, a lot of time goes into something else:

  • empty screens
  • loading states
  • error messages
  • first-time user experiences

And somehow, these are always built last.

The problem

I noticed a pattern in almost every project I worked on:

  • Empty states were inconsistent
  • Loading states were rushed
  • Error messages felt generic
  • Onboarding screens were overthought

Nothing was technically hard — just repetitive and easy to ignore until the end.

So I built something small

I created StateKit — a lightweight CSS library focused only on UI states.

No framework. No setup.

Just copy and use.

👉 https://github.com/roynick365/statekit
👉 https://roynick365.github.io/statekit/

What it includes

  • Empty state
  • Empty search
  • Error state
  • 404 page
  • Success state
  • Loading spinner
  • Loading skeleton
  • Onboarding state

Each component is plain HTML + CSS and can be dropped into any project.

Example 

<div class="sk-empty">
  <h3>No data available</h3>
  <p>Create your first item to get started.</p>
  <button class="sk-btn">Create</button>
</div>
Enter fullscreen mode Exit fullscreen mode

Why this exists

I didn’t want another UI framework.

I just wanted something to handle the parts that usually get rushed or overlooked.

What I learned building this

  • Simple tools are harder than they look
  • Consistency matters more than complexity
  • Most “UI problems” are actually small decisions repeated many times

What’s next

  • More variants for each state
  • Dark mode
  • Accessibility improvements
  • Possibly React wrappers

Feedback welcome

If you have suggestions or want to contribute:

👉 https://github.com/roynick365/statekit

If you’ve ever rebuilt the same empty or loading state more than once, this might help.

Top comments (0)