Corn UI
One design system for your HTML and your React.
Corn UI components are classes first, so much of the library works in plain HTML with no JavaScript at all. Behaviour comes from a small vanilla controller, and the React components are built from the same source — so a server-rendered page, a static site and a React app can look and behave as one product. Why Corn UI
- Accessible interactive widgets — focus-trapped dialogs, keyboard-driven menus, tabs and combobox.
- Small, no runtime dependencies — about 20 KB of core JavaScript, gzipped.
- Server Component–safe React, typed, and themed with CSS custom properties.
- Ready for AI-assisted work — an llms.txt and a lint plugin that knows every component's props.
Corn UI is in beta
@corndev/ui
Core vanilla JS components and design tokens. Works with any framework or none at all.
@corndev/ui-overlays
Modal, Drawer, Accordion, Tooltip, Popover and Menu
@corndev/ui-notifications
Alert, Toast
@corndev/ui-markdown
Markdown, with heading anchors and untrusted input made safe
@corndev/ui-icons
Tree-shakeable SVG icons, coloured by the text around them
@corndev/ui-hooks
React hooks: disclosure, clipboard, media queries, storage, hotkeys and more
Quick Start
npm install @corndev/uiImport the theme once. Most components are then just classes:
import '@corndev/ui/theme';<button class="corn-button" data-level="primary">Save</button>
A create* controller adds what classes cannot — state, listeners and keyboard
handling — to the same markup:
import { createButton } from '@corndev/ui';For React:
npm install @corndev/ui @corndev/ui-reactimport '@corndev/ui/theme';
import { Button, Stack } from '@corndev/ui-react';
Every other package imports its own stylesheet once, beside the theme — for example
import '@corndev/ui-overlays/styles';. The
installation page lists them all.