Headless,
primitive
components.
Accessible building blocks for PraxisJS. Keyboard nav, ARIA support, and state through data-* attributes. Zero CSS included.
Headless by design
Zero built-in styles. Components own the behavior — keyboard navigation, ARIA, focus management. You own the look. Apply any design system via CSS or the class prop.
Accessible out of the box
Every component ships with the correct ARIA roles, attributes, and keyboard interactions. Screen reader support, focus trapping, and scroll locking — included.
State as data attributes
Interactive state is exposed as data-* attributes on the root element — data-open, data-disabled, data-selected. Style with plain CSS selectors. No class toggling.
Add only what you need
Install @morphos/core plus any category package. Only bring in what your project requires.
npm install @morphos/inputs @morphos/overlaysCompose with class components
Instantiate the root component, then pass it as a prop to the compound parts. No context, no hooks.
@State() dialog = new Dialog()Target data-* with CSS
Components set data-open, data-disabled, data-selected and more. Write CSS selectors — no className juggling.
[data-open] { display: block }Button · Input · Checkbox · CheckboxGroup · RadioGroup · Radio · Select · Switch · Toggle · ToggleGroup · Slider · Number Field · OTP · Combobox · Autocomplete · Field · Fieldset · Form
Dialog · Alert Dialog · Drawer · Popover · Tooltip · Dropdown · Context Menu · Preview Card
Accordion · Tabs · Disclosure · Separator · Scroll Area · Toolbar · Menubar · Navigation Menu
Toast · Alert · Progress · Spinner · Avatar · Meter