Component catalog · 16 shipped primitives

Small building blocks. Clear behavior.

Every demo below is a real DevinimJS custom element. Inspect its behavior, listen to its events and copy the starting markup.

Find a component

Light DOM + CKCSS

Components own behavior. CKCSS owns presentation. Your page owns data and persistence.

Featured live showcase

Try them

Proxy state, native buttons and a polite output.

<dv-counter data-start="2"></dv-counter>

Light DOM panel one.

Panel two stays semantic.

Arrow keys move focus.

<dv-tabs data-label="Product details">...</dv-tabs>

Focus-aware dialog that closes on Escape.

<dv-modal data-label="Details">...</dv-modal>

<dv-field data-type="email" data-required="true">

<dv-autocomplete data-items='[...]'>

<dv-data-table data-columns='[...]' data-rows='[...]'>

<dv-product-card data-price="99">

stack.show('Saved');

All shipped elements use the same attribute/event contract. The machine-readable manifest is available for tooling and AI agents.

DevinimJS v0.5.1 components
Tag	Category	Primary behavior
`dv-counter`	Foundation	Numeric state and change event
`dv-tabs`	Navigation	ARIA tabs and keyboard navigation
`dv-disclosure`	Navigation	Accessible show/hide content
`dv-modal`	Feedback	Escape-aware dialog and focus restore
`dv-toast`	Feedback	Polite status notification
`dv-pagination`	Data	One-based page navigation
`dv-dropdown`	Navigation	Light DOM contextual menu
`dv-search`	Discovery	Query event for local or remote search
`dv-product-card`	Commerce	Add-to-cart event
`dv-field`	Forms	Native control and validation events
`dv-confirm`	Forms	Explicit consequential action
`dv-autocomplete`	Discovery	Local-data combobox
`dv-data-table`	Data	Semantic sortable JSON table
`dv-cart`	Commerce	Page-owned cart presentation
`dv-toast-stack`	Feedback	Notification queue
`dv-state`	Async	Loading, empty, error and retry states