Components
Framework-native adapters and custom elements over shared Sometic behavior engines. Install the adapter you use (@sometic/react, @sometic/vue, or @sometic/elements) plus @sometic/dom when you need engines directly.
Button family
| Component | Summary |
|---|---|
| Button | Native <button> with loading, slots, and shared styling state |
| Icon button | Icon-only action that requires a non-empty accessible name |
| Button group | role="group" layout for related actions |
| Toggle button | Pressed/unpressed toggle with aria-pressed |
| Async button | Runs an abortable async action and owns loading state |
Field & text inputs
| Component | Summary |
|---|---|
| Field | Label, description, control, and error with generated IDs |
| Form | React / Vue / sometic-form adapters over the forms engine |
| Input | Controllable text-like native input with state attributes |
| Password input | Password field with show/hide reveal control |
| OTP input | Fixed-length one-time code input (one-time-code) |
Specialized inputs
| Component | Summary |
|---|---|
| Number input | Numeric value as number | null with optional clamp |
| File input | Native file picker emitting File[] |
| Masked input | Pattern mask (# / A / *) with raw value callback |
| Currency input | Locale-aware currency display over a numeric value |
| Date input | Date value via a pluggable DateAdapter |
Selection
| Component | Summary |
|---|---|
| Checkbox | Boolean / indeterminate checkbox |
| Switch | Instant on/off switch semantics |
| Radio | Mutually exclusive radio option |
| Select | Native select with controllable value |
Overlay & feedback
| Component | Summary |
|---|---|
| Dialog | Modal dialog with focus and dismiss behavior |
| Popover | Anchored non-modal popover |
| Tooltip | Hover/focus tooltip |
| Toast | Toast queue and region |
| Alert | Inline status alert |
| Drawer | Modal side panel |
| Menu | Action menu |
| Context menu | Pointer-triggered context menu |
Structure
| Component | Summary |
|---|---|
| Tabs | Tablist selection with keyboard resolve |
| Accordion | Expandable panels |
| Breadcrumb | Hierarchical path navigation |
| Command palette | Filterable command list |
| Tree | Hierarchical selection tree |
| Combobox | Filterable listbox over free text |
| Progress | Determinate progress indicator |
| Spinner | Indeterminate loading indicator |
| Skeleton | Placeholder loading surface |
| Badge | Compact status label |
React and Vue ship these from @sometic/react/structure and @sometic/vue/structure. Custom elements are not shipped for the navigation surfaces; use those adapters or @sometic/dom. FAQs and comparisons live on each component page.
Status surfaces
| Component | Summary |
|---|---|
| Status | Shared empty/error/offline/conflict resolve |
| Empty state | Empty collection surface |
| Error state | Error recovery surface |
| Offline state | Offline recovery surface |
| Conflict state | Conflict resolution surface |
Data & business
| Component | Docs |
|---|---|
| Data table | Data table |
| Query builder | Query builder |
| Upload | Upload |
| Schema form | Schema form |
| Permission matrix | Permission matrix |
| Activity | Activity |
| Approval | Approval |
| Notification center | Notification center |