Copied to clipboard
v3.2 · Now with dark mode tokens

Build better interfaces, faster.

A lightweight component toolkit with everything you need to ship polished products.

MyUI is an open-source UI framework for building accessible, customizable, and beautiful web applications. Fifty-plus components, first-class TypeScript, and design tokens that adapt to your brand.

Developer writing code on a laptop
<MyUI /> · 4.2 kB gzipped

Why teams choose MyUI

Open source collaboration

Open Source

Licensed under MIT and built in the open on GitHub. Every component, token, and test is public — contribute, fork, or audit anything, anytime. No license fees, no lock-in.

Team collaborating on accessible design

Accessible by default

Every component ships with semantic markup, full keyboard support, and WCAG 2.1 AA contrast baked in. Focus rings, aria attributes, and screen-reader labels are handled so you don't have to think about them.

Design customization workspace

Customizable to the core

Design tokens drive everything — colors, radii, spacing, and type scales. Override a CSS variable or pass a theme object and the entire library re-skins in seconds, light or dark, with zero rebuilds.

Installation

Get MyUI running in your project in under a minute. Requires Node 18 or later.

MyUI ships as a single npm package with zero runtime dependencies. Install it with your package manager of choice and import only the components you use — tree-shaking keeps your bundle tiny.

Terminal
npm install myui

Project Setup

Scaffold a new project with the CLI, or add MyUI to an existing Vite / Next.js app by wrapping it with the MyUIProvider. The provider injects your theme tokens and enables dark mode.

Terminal
# scaffold a starter project
npx myui init
cd my-project
npm run dev

Theming

Every color, radius, and shadow in MyUI maps to a design token. Change a token once and the whole system updates — including dark mode, which toggles automatically with a single class on the root element.

The default palette ships with an accessible indigo primary, nine neutral steps, and semantic success / warning / danger ramps. Swap --myui-primary in your CSS and every button, badge, and link follows.

First Component

Import a component and render it. That's the whole API — props are typed, defaults are sensible, and the live preview below is the real thing.

App.tsx
import { Button } from 'myui'

<Button>Click me</Button>
Live preview — go ahead, click it

All Components

48 production-ready components. Click a card to view its documentation.

Email address…

Input Form

Text fields with labels, validation states, and icons.

Card Layout

Flexible containers for grouping related content.

Modal Feedback

Focus-trapped dialogs with backdrop and Esc handling.

Alert Feedback

Contextual banners for info, success, and errors.

ActiveShipped

Badge Data Display

Small status descriptors for counts and states.

Button

Buttons trigger actions. They come in three visual variants and three sizes, render as <button> or <a> automatically, and handle loading states out of the box.

Examples

Pick a variant and a size — the preview updates live and the code snippet follows along.

Variant
Size
variant="primary" · size="md"

Usage

Example.tsx
<Button variant="primary">Click me</Button>

Accessibility

Button renders a native button element with a visible focus ring that meets 3:1 contrast against adjacent colors. Disabled buttons use aria-disabled so they stay in the tab order and remain discoverable to assistive technology. When a button shows a loading spinner, its accessible label is updated to "Loading" automatically.

API

NameTypeDefaultDescription
variantstringdefaultVisual style: default, primary, or outline.
sizestringmdControl size: sm, md, or lg.
disabledbooleanfalseDisables interaction while keeping the element focusable.
onClickfunctionHandler fired on activation via click, Enter, or Space.