Docs
Introduction
uicraft is a collection of beautifully designed UI components built on a custom utility layer. Not a library you install — a set of components you own.
What is uicraft?
uicraft gives you ready-to-use HTML components that you copy directly into your project. There's nothing to install, no package to maintain, no version lock-in. Each component is a standalone snippet styled with the UC utility layer — a set of semantic CSS classes that map to a consistent design token system.
The components work in any environment: plain HTML sites, React, Vue, Astro, or anything else.
As long as the uicraft.css stylesheet is loaded, the components render correctly.
Principles
You own the code
Components are copied into your project, not imported from a package. You read every line, modify freely, and never worry about upstream breaking changes.
Semantic tokens, not raw values
Every color, spacing, and radius value is expressed through semantic design tokens. Swap a theme and the whole UI adapts — no find-and-replace required.
Dark mode first
Light and dark modes are baked into every component using CSS variables. Toggle with a single class on <html> — no extra stylesheets needed.
No JavaScript runtime
Components are pure HTML and CSS by default. Interactive behavior is opt-in and written in vanilla JS with no framework dependencies.
FAQ
Why not just use shadcn/ui or another library?
shadcn/ui is great for React. uicraft is framework-agnostic — the same components work in any HTML context. It's also built on a Figma-aligned token system, making design handoff tighter.
Do I need to use all the components?
No. Pick exactly what you need. Since you copy-paste individual components, you only bring in what you use. There's no tree-shaking to configure.
Can I customize the design tokens?
Yes. All tokens are CSS custom properties. Override them globally or scope overrides to a specific component. See the Design Tokens doc for details.
Is this open source?
Yes. MIT license. Use it in personal and commercial projects.