@corndev/ui

Core vanilla JS layout and form components with CSS design tokens.

Install

npm install @corndev/ui

Use

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

Styles

The stylesheet ships with the package and is imported separately, so a page can use the classes with no JavaScript:

import '@corndev/ui/theme';

Components

• createTreeState — A tree's state with no DOM and no framework: which nodes are expanded, which one is selected, and a hook for fetching a branch's children when it opens. The part of a tree every consumer writes identically — the renderer, with its icons and context menus, stays with the consumer.
• Button — Interactive button element.
• Stack — Flex stack container — vertical or horizontal.
• Group — Horizontal flex group for inline elements.
• Spacing — Margin and padding utility classes on the spacing tokens.
• Box — Token-based surface / layout primitive with padding, background, and border.
• Container — Centered, max-width content column. sm=640px, md=960px, lg=1280px.
• Grid — CSS grid container with column and gap utilities.
• Collapse — Animated show/hide of a region; hidden content leaves the tab order.
• Breadcrumbs — Where the current page sits in a hierarchy, with the middle collapsed when the path is long.
• Timeline — A sequence where the order is the content — a workflow's steps, a release history. Not a progress stepper, though it has that variant.
• Divider — Horizontal or vertical separator, with an optional centred label.
• Input — Styled element.
• Select — Styled element.
• Textarea — Styled element, optionally growing with its content.
• Checkbox — Styled element.
• Radio — Styled . React: RadioGroup wires a shared name, value, and onChange over child Radios.
• Switch — Toggle switch (styled with role="switch"). For on/off settings.
• Slider — Range slider (styled ).
• Form — Form state, validation, and submit handling. Binds fields by name; renders errors into [data-error-for]. React: useField(name) binds a field, useForm() exposes form state, and shows a field's message linked to the field.
• Combobox — Autocomplete text input with a filterable listbox (ARIA combobox pattern, keyboard nav). The "select with search" control.
• Badge — Small label for status or count.
• Pill — A removable token carrying one value the user chose. Not a Badge variant — it holds a real button.
• PillsInput — Pills laid out beside a text input, drawn as one field. The container MultiSelect and TagsInput are built in.
• Clear — The control that takes a choice back. Shared by the filterable fields rather than written three times.
• Listbox — The option list a filterable control drops open. Shared by MultiSelect and TagsInput.
• MultiSelect — Pick several values from a fixed list. The options are the vocabulary — use TagsInput when the user extends it.
• TagsInput — Enter arbitrary strings, with the existing ones offered as suggestions. The user extends the vocabulary.
• SearchBar — A search field with a list of results — a prefilled list, a grouped one, or one fetched as you type. Typed text is a query, not a value: choosing a result fires onSelect, and Enter on free text can fire onSearch.
• SegmentedControl — A few mutually exclusive choices, all visible at once, in a toolbar row — a request body's type, a pane's view. A radio group, not a row of buttons.
• NumberInput — A field for a number that hands back a number, or undefined when emptied — never a string.
• httpSearch — Builds a SearchBar options function for the common case: a GET that sends the typed query as a URL parameter and answers with JSON. Fixed params become URLSearchParams alongside it, and parse turns the JSON into options — flat or grouped.
• Avatar — User avatar image or initials placeholder.
• Image — Content image — responsive by default, with optional aspect-ratio cropping. For people use Avatar.
• Paper — Elevated surface card.
• Anchor — A link. Renders an , or any element you name — a "link" that scrolls rather than navigates should be a , and looks identical.
• Center — Centres its content horizontally and vertically.
• Space — Deliberate empty space, for when one gap in a sequence differs from the rest.
• ThemeIcon — A coloured surface holding an icon. A box, not a control.
• SimpleGrid — Equal columns that reflow on their own, with no breakpoints.
• FileInput — A file picker that can be styled, keeping the native input for behaviour and accessibility.
• Field — A labelled form field: label, optional description, the control, and an error. Owns the id and aria wiring that is silent when it is wrong.
• Fieldset — A group of related form controls, named by a legend. Uses the native /, so disabled really disables every control inside it.
• ScrollArea — A scrollable region with styled native scrollbars, consistent across platforms.
• Spinner — Animated loading spinner (role="status").
• Progress — Progress bar (role="progressbar"). Determinate via value/max, or indeterminate.
• Skeleton — Loading placeholder block (aria-hidden) with a pulse animation.
• Stat — KPI tile — a labelled figure with an optional signed delta and a slot for a trend sparkline.
• List — Unordered, ordered, unstyled, and description lists with spacing and divider options.
• Table — Data table with optional striping, borders, hover rows, sticky header, and sort affordances.
• Tabs — Tabbed content panel. Vanilla enhances existing markup; React builds the markup from Tab children.
• Bar — Top or bottom application bar (/). React also exports Header and Footer, which are Bar preset to position="top" and position="bottom".
• Navigation — Nav element with keyboard behaviour, supporting three shapes that compose: a flat list, sections under non-interactive headings, and collapsible nested branches — which a horizontal nav presents as dropdown panels. Vanilla expects nav > ul > li > a markup; React composes Navigation.Item, Navigation.Section and Navigation.Group children.
• Layout — App-shell layout with optional header, footer, and side navigation regions.
• Heading — Heading text. level picks both the size scale and, in React, the tag (h1–h6).
• Text — Body text.
• Label — Form label text.
• Caption — Small caption text.
• Code — Inline or block code.

Documentation

• Component documentation
• Installing
• Theming
• llms.txt — the whole API in one file, for coding agents

Licence

MIT © Corndog Development LLC. See LICENSE.