StateKit — UI States for Modern Web Apps
Open source · MIT licensed

UI states developers
hate designing.
We did it for you.

A lightweight, copy-paste library of beautifully crafted empty, loading, error, and success states for modern web apps.

Browse Components View on GitHub
8
Components
0
Dependencies
<5kb
CSS Size
100%
Copy-paste ready

8 states, production ready

Every state your app needs, designed with care.

Nothing here yet

Get started by creating your first project.

Empty State Empty
Empty Search Empty

Something went wrong

We couldn't load your data. Please try again.

Error State Error
404

Page not found

The page you're looking for doesn't exist or has been moved.

404 Page Error

Payment successful!

Your order has been confirmed. A receipt has been sent to your email.

Success Confirmation Success
Loading your data…
This won't take long
Loading Spinner Loading
Loading Skeleton Loading
👋

Set up your workspace

Tell us a bit about yourself so we can personalise your experience.

Onboarding State Onboarding
empty-state.html
<!-- StateKit — Empty State -->
<!-- Copy this block directly into your project -->

<div class="sk-empty">
  <div class="sk-empty-icon">
    <!-- swap icon as needed -->
    <svg width="24" height="24" viewBox="0 0 24 24" fill="none"
      stroke="currentColor" stroke-width="1.8">
      <path d="M3 7h18M3 12h18M3 17h12"/>
    </svg>
  </div>
  <h3>Nothing here yet</h3>
  <p>Get started by creating your first project.</p>
  <button class="sk-btn">+ Create Project</button>
</div>

Get started in seconds

No build tools. No config. Just copy and use.

npm install statekit-ui
View on GitHub →

Ready to use

Components are plain HTML and CSS. Copy what you need and drop it into your project.

No dependencies

No frameworks or build tools required. Works with any stack or setup.

Easy to adapt

Styles are driven by CSS variables, so adjusting colors and spacing is straightforward.

Accessible by default

Uses semantic markup and supports accessible patterns without extra setup.