clicks: 0
Button
Unstyled pressable with data-hovered, data-pressed, and data-focused — style every state yourself.
Documentation →Composable, accessible, unstyled primitives — Button, Date Picker, and more. Start with structure. Finish with style.
live
Real primitives — unstyled by default. Every demo below is running the actual package, not a mock.
capabilities
Headless parts with predictable APIs, semantic data attributes, and zero shipped CSS — not themed widgets you fight to customize.
Every Kenos primitive is unstyled. Wire Tailwind, CSS modules, Panda CSS, StyleX, inline styles, or any CSS framework — Kenos ships no CSS. You bring your own, your way, and decide how your app looks.
Roles, keyboard patterns, and focus management built in — tested with axe-core and keyboard suites across primitives.
Shorthand composites for the common case, full part trees when you need control — from a single Button to multi-part pickers.
Props and generics across every part — or import everything from @kenos-ui/react when you depend on multiple primitives.
primitives
Install the aggregator or pick individual packages. Each primitive ships unstyled, with WAI-ARIA patterns and data attributes you style yourself.
An augmented native <button> primitive. Built with native-first press logic, keyboard support, and robust state-driven data attributes.
import { Button } from "@kenos-ui/react-button";
export function Example() {
return <Button>Click me</Button>;
}Headless date primitives — segmented input, popover calendar, range and multiple selection, time granularity, presets, unavailable dates, HiddenInput, RTL keyboard. Built on Intl, timescape, and Floating UI. Zero CSS shipped.
import { DatePicker } from "@kenos-ui/react-datepicker";
<DatePicker.Root value={date} onValueChange={setDate}>
<DatePicker.Input />
<DatePicker.Calendar />
</DatePicker.Root>A headless select with combobox + listbox pattern. Interop-first defaults: modal={false}, portal={false}. Pointer open keeps focus on the trigger; keyboard open moves focus into the listbox. Supports single and multiple selection, items prop for label maps, and Select.HiddenSelect for native form submission.
import { Select } from "@kenos-ui/react-select";
<Select.Root>
<Select.Trigger />
<Select.Content />
</Select.Root>A headless combobox with type-to-filter, Input-first focus (aria-activedescendant), and an Empty state when nothing matches. open and inputValue are independent — Trigger toggles the list without clearing the query. Interop-first defaults: modal={false}, portal={false}, Content anchored to the Input.
import { Combobox } from "@kenos-ui/react-combobox";
<Combobox.Root>
<Combobox.Input />
<Combobox.List />
</Combobox.Root>accessible by default
Interactive widgets are easy to get wrong. Kenos handles semantics, keyboard support, and locale rules so your team can focus on visual design. Accessibility guide →
Predictable patterns across primitives — arrows, Home/End, Escape, and typeahead where it matters.
Roles, states, and relationships wired in — not unlabeled divs with onClick handlers.
Date segments respect Intl — week start, order, and labels without manual format strings.
Meaningful labels, expanded states, and announcements so screen readers don't guess intent.
Zero CSS ships with the package. Import only the parts you render — no theme runtime.
Shorthand for common cases, full part trees when you need control over structure and behavior.
Install from npm, browse the primitive catalog, and compose headless parts that respect keyboard and screen readers out of the box.