Installation

Corn UI is published to npm under the @corndev scope. No registry configuration or token is needed.

No build step? Load Corn UI in a browser with <script> and <link> tags instead. See the CDN page for copy-paste snippets.

Corn UI is in beta. The API is close to what 1.0 will ship, but a beta release can still make a breaking change; each one is listed in the changelog with what to change. Pin an exact version if you need nothing to move under you.

Supported browsers: the current and previous versions of Chrome, Edge, Firefox and Safari. See browser support for which newer CSS features that admits, and where each is used.

Install packages

Vanilla JavaScript

npm install @corndev/ui

import '@corndev/ui/theme';           // CSS custom properties
import { createButton } from '@corndev/ui';

React

npm install @corndev/ui @corndev/ui-react

import '@corndev/ui/theme';
import { Button, Stack, Badge } from '@corndev/ui-react';

Overlays (Modal, Drawer, Tooltip, Popover, Accordion, Menu)

npm install @corndev/ui @corndev/ui-overlays
# React wrappers:
npm install @corndev/ui-overlays-react

import '@corndev/ui/theme';
import '@corndev/ui-overlays/styles';   // ← required
import { Drawer, Modal } from '@corndev/ui-overlays-react';

The second import is not optional. Each package ships its own stylesheet, and @corndev/ui/theme carries only the tokens and the core components. Without it an overlay renders with no rules at all — a Drawer is not a mis-styled drawer, it is a plain <div> laid out at the bottom of the page. This site once made exactly that mistake.

Notifications (Toast, Alert)

npm install @corndev/ui @corndev/ui-notifications
# React wrappers:
npm install @corndev/ui-notifications-react

import '@corndev/ui/theme';
import '@corndev/ui-notifications/styles';   // ← required
import { NotificationProvider } from '@corndev/ui-notifications-react';

Markdown

npm install @corndev/ui @corndev/ui-markdown
# React wrappers:
npm install @corndev/ui-markdown-react

import '@corndev/ui/theme';
import '@corndev/ui-markdown/styles';   // ← required
import { Markdown } from '@corndev/ui-markdown-react';

Icons

npm install @corndev/ui-icons
# React wrappers:
npm install @corndev/ui-icons-react

import '@corndev/ui-icons/styles';
import { ArrowRightIcon } from '@corndev/ui-icons-react';

Every package that ships CSS

One import per package, and @corndev/ui/theme is not a substitute for any of them — it carries the tokens and the core components only.

The React wrappers ship no CSS of their own — they depend on the vanilla package beside them, and that is what carries the stylesheet.

A development build warns, once per package, when a component renders without its package’s stylesheet, and names the import to add.

React Server Components

The React packages work in Next.js App Router Server Components. Import them as usual; your own file doesn’t need 'use client'.

• Presentational components render on the server and send no JavaScript to the browser. Examples are Button, Stack, Heading, Text, Badge, and native inputs such as Input and Checkbox.
• Components that hold state, use context or render into a portal are client components. Examples are Tabs, Form, Combobox, Navigation, and the overlay and notification components. You can still render them from a Server Component, and a page only downloads the ones it renders.
• Mount providers in a client file of your own. A store or query client can’t be passed from a Server Component, so create them in a 'use client' file that wraps children in StoreProvider or QueryClientProvider.

// app/providers.jsx
'use client';

import { StoreProvider } from '@corndev/store-react';
import { store } from './store';

export function Providers({ children }) {
  return <StoreProvider store={store}>{children}</StoreProvider>;
}

Available packages

Install every @corndev package at the same version. Each one depends on its siblings at exactly its own version, so mixing versions makes npm report a conflict or install duplicate copies.