CSS-first design system

myUiKit

A small, opinionated component library you can drop into any stack — plain HTML, Vue, React, or a server-rendered template. CSS is the product.

Open Storybook GitHub

What this is

myUiKit is a personal UI kit and frontend design system. It exists so I can prototype admin dashboards and developer tools quickly, without re-deciding what a button or a badge should look like every time.

The aesthetic is GitHub-dark: dense, monospace-leaning, and built for surfaces with a lot of data. Tokens live in :root and components are written as plain BEM-lite CSS — no preprocessor, no runtime, no framework lock-in.

A thin Vue 3 wrapper layer is available for projects that want v-model and props, but the CSS works on its own. Use it in React with className, in a Symfony/Twig template, or in raw HTML.

Components

Button

<button class="btn btn--primary">Primary</button>
<button class="btn btn--secondary">Secondary</button>
<button class="btn btn--ghost">Ghost</button>
<button class="btn btn--danger">Danger</button>

Active New Pending Failed Archived

Badge

<span class="badge badge--success">Active</span>
<span class="badge badge--info">New</span>
<span class="badge badge--warning">Pending</span>
<span class="badge badge--error">Failed</span>
<span class="badge badge--neutral">Archived</span>

DEPLOYMENT

Production build deployed at 14:32 UTC. passing

Card

<div class="card">
  <h3 class="card__title">DEPLOYMENT</h3>
  <div class="card__body">
    Production build deployed at 14:32 UTC.
    <span class="badge badge--success">passing</span>
  </div>
  <div class="card__footer">
    <button class="btn btn--ghost btn--sm">View logs</button>
    <button class="btn btn--secondary btn--sm">Rollback</button>
  </div>
</div>

We'll never share it.

Input

<div class="form-field">
  <label class="form-field__label form-field__label--required">
    Email
  </label>
  <div class="input-field">
    <input class="input" type="email"
           placeholder="you@example.com" />
  </div>
  <span class="form-field__help">We'll never share it.</span>
</div>

Environment

Select

<div class="form-field">
  <label class="form-field__label">Environment</label>
  <div class="select-field">
    <select class="select">
      <option>production</option>
      <option>staging</option>
      <option>development</option>
    </select>
  </div>
</div>

Browse every component

The full interactive documentation lives in Storybook — every variant, state, and prop, with live source you can copy.

Open Storybook →