v1.1.8
75 components Open source

Build faster.
Ship beautiful UI.

Copy-paste components built with semantic CSS utility classes. Zero JavaScript, zero config — works with any stack.

Browse Components Get Started
npm install @uicraft/core
Components

Everything you need, ready to use

Pick any component, copy the HTML, drop it into your project. No build step, no imports.

Button
View component
Checkbox
View component
Input
View component
Card

Team Plan

For growing teams

$29/mo

View component
Calendar
February 2026
SMTWTFS
View component
Alert

Heads up!

You can add components to your app.

View component
Switch
View component
Badge
Primary Secondary Danger Active Pending Info
View component
Browse all 75 components
Installation

Start in seconds

Three ways to add uicraft to your project — pick what works for you.

Terminal 
$ npm install @uicraft/core

Then import the stylesheet in your entry point:

JS / TS 
import '@uicraft/core/uicraft.css';
HTML 
<link rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/@uicraft/core@latest/uicraft.min.css">

Add this to your <head> — no build step needed.

HTML 
<link rel="stylesheet" href="uicraft.css">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"
  rel="stylesheet">

Download uicraft.css → and host it yourself.

Figma Plugin

Generate uicraft inside Figma

Beta

The uicraft Figma plugin imports design tokens and generates selected components directly in Figma. Colors, typography, spacing, radius, shadows, and exported themes stay aligned with the web system.

Component import Select only the components you need and generate them with uicraft variables already bound.
Theme workflow Load or export a theme.json file and reuse the same setup in the Theme Builder.
Foundation tokens Create Figma variables for colors, typography, spacing, border width, and shadows from one source of truth.
Explore Plugin Read the docs
uicraft Design Tokens v0.9 beta
What it generates
Colors Typography Spacing Border Width Shadows
Workflow
1 Choose components and foundations to generate
2 Bind semantic variables for light and dark themes
3 Export the theme file for the web builder

Dark mode variables depend on Figma variable support. On the free Figma plan, some plugin features are limited.

Copy & Paste

Every component ships as clean, self-contained HTML. No installation, no imports — just copy into your project.

Semantic tokens

Built on a 2-layer design token system with Figma-aligned names. Consistent color, spacing, and typography everywhere.

Dark Mode

Every component supports light and dark mode out of the box using CSS variables and the .dark class.

No Runtime

Pure HTML and CSS — no JavaScript framework required. Drop components into any project, any stack, any time.

Start building today

75 components across 9 categories. Free and open source.

Browse Components Read the docs