Web UI Kit is a collection of small, reusable interface components designed to be copied, themed, and adapted without bringing a large framework along for the ride.
Build the interface, not the same foundation again
A new interface often starts with the same questions: how should a button feel when it is focused, how should a progress value be communicated, what does a compact status label look like, and how can a setting be changed without making the layout noisy?
This project collects those answers in one place. It is part component library, part visual test bench, and part notebook for patterns I want to reuse across websites, dashboards, game menus, and small tools.
The components are deliberately lightweight. They use semantic HTML, CSS, and small islands of JavaScript only where interaction needs it. The goal is not to hide the markup. The goal is to give the markup a considered starting point.
Components
Buttons
A button with a restrained shine effect and clear hover and focus states. It works as a call to action, a game-menu control, or a small navigation affordance.
The effect is CSS-only, so it remains useful when the rest of a page is statically rendered.
Progress bars
Progress bars can communicate health, upload state, completion, confidence, or any other bounded value. The component keeps the label and value legible while allowing the visual treatment to be changed through CSS.
Status badges
Small status badges are useful when a card needs to communicate state without another paragraph of explanation.
LiveIn reviewPreviewArchivedSettings toggles
A toggle should be a real checkbox with a visible label, not just a decorative switch. The kit pairs a semantic input with a larger click target and a focus ring that remains visible for keyboard users.
Stat cards
Stat cards give dashboards and game HUDs a compact way to show a value with optional context or direction.
Sessions
2,481
+12%Conversion
68.4%
+4.8%Response time
184ms
-18msTabs
Tabs are useful when related content needs to share a surface without creating a long page. This example uses ARIA roles, selected state, and a small browser-side script rather than requiring a UI framework.
A small design language
The current components share a quiet visual vocabulary:
- rounded surfaces without excessive decoration;
- blue as an action and focus accent;
- slate neutrals for structure and readable contrast;
- visible focus rings for keyboard navigation;
- semantic elements before custom div-based controls;
- CSS transitions that support the interaction instead of competing with it.
The intent is for the pieces to feel related without forcing every project into the same visual identity. A future pass will extract these decisions into a small token layer for spacing, radii, type scale, and colour roles.
| Component | Useful for | Interaction |
|---|---|---|
| ButtonEffect | Actions, menus, calls to action | CSS hover, focus, and pressed feedback |
| ProgressBar | Health, loading, completion, XP | Bounded value display |
| StatusBadge | Live, preview, warning, archived states | Semantic status colour |
| Toggle | Settings and binary preferences | Native checkbox behaviour |
| StatCard | Dashboards and compact HUDs | At-a-glance metrics |
| Tabs | Related content in one surface | Keyboard-aware tab selection |
What comes next
The kit is intentionally growing from real needs rather than a giant upfront component list. The next useful additions are a modal/dialog pattern, a notification/toast, a segmented control, an empty state, and a responsive navigation shell.
I also want to document each component with copy-ready HTML examples and make the theme tokens easy to override. The best version of this project should answer two questions quickly:
- Can I use this component in my project without fighting it?
- Can I make it look like my project without rewriting it?
That is the standard I am using as the playground becomes a Web UI Kit.