Installation

Install only the packages you need from the @sometic scope.

Core

pnpm

pnpm add @sometic/core

npm

npm install @sometic/core

yarn

yarn add @sometic/core

bun

bun add @sometic/core

Typical stacks

React

pnpm

pnpm add @sometic/react @sometic/core @sometic/theme

npm

npm install @sometic/react @sometic/core @sometic/theme

yarn

yarn add @sometic/react @sometic/core @sometic/theme

bun

bun add @sometic/react @sometic/core @sometic/theme

Vue

pnpm

pnpm add @sometic/vue @sometic/core @sometic/theme

npm

npm install @sometic/vue @sometic/core @sometic/theme

yarn

yarn add @sometic/vue @sometic/core @sometic/theme

bun

bun add @sometic/vue @sometic/core @sometic/theme

Vanilla / custom elements

pnpm

pnpm add @sometic/elements @sometic/theme

npm

npm install @sometic/elements @sometic/theme

yarn

yarn add @sometic/elements @sometic/theme

bun

bun add @sometic/elements @sometic/theme

App shell

Auth + HTTP + query composition:

pnpm

pnpm add @sometic/app-shell @sometic/auth @sometic/http @sometic/query

npm

npm install @sometic/app-shell @sometic/auth @sometic/http @sometic/query

yarn

yarn add @sometic/app-shell @sometic/auth @sometic/http @sometic/query

bun

bun add @sometic/app-shell @sometic/auth @sometic/http @sometic/query

Optional peers: @sometic/head, @sometic/theme, @sometic/store, @sometic/forms.

System packages

Auth

pnpm

pnpm add @sometic/auth

npm

npm install @sometic/auth

yarn

yarn add @sometic/auth

bun

bun add @sometic/auth

HTTP

pnpm

pnpm add @sometic/http

npm

npm install @sometic/http

yarn

yarn add @sometic/http

bun

bun add @sometic/http

Query

pnpm

pnpm add @sometic/query

npm

npm install @sometic/query

yarn

yarn add @sometic/query

bun

bun add @sometic/query

Head

pnpm

pnpm add @sometic/head

npm

npm install @sometic/head

yarn

yarn add @sometic/head

bun

bun add @sometic/head

Forms

pnpm

pnpm add @sometic/forms

npm

npm install @sometic/forms

yarn

yarn add @sometic/forms

bun

bun add @sometic/forms

Store

pnpm

pnpm add @sometic/store

npm

npm install @sometic/store

yarn

yarn add @sometic/store

bun

bun add @sometic/store

Theme

pnpm

pnpm add @sometic/theme

npm

npm install @sometic/theme

yarn

yarn add @sometic/theme

bun

bun add @sometic/theme

CDN (browser bundles)

Prefer npm + a bundler for apps. Use CDN for demos, HTML-first pages, and progressive enhancement. jsDelivr mirrors each package after publish. The docs site also mirrors the same files under /cdn/ after build.

Pick one format:

Simple script: classic <script src="…iife.js"> (no bundler, no type="module")
Module script: <script type="module"> with import from …esm.js

Custom elements (Web Components)

Simple script

html

<script src="https://cdn.jsdelivr.net/npm/@sometic/elements@1.1.6/dist/cdn/sometic-elements.iife.js"></script>

<sometic-button type="button">Save</sometic-button>

Module script

html

<script
    type="module"
    src="https://cdn.jsdelivr.net/npm/@sometic/elements@1.1.6/dist/cdn/sometic-elements.esm.js"
></script>

<sometic-button type="button">Save</sometic-button>

The elements CDN covers shipped tags only (button/input/form/selection/overlay feedback/structure feedback/auth-status). Surfaces without custom elements still use @sometic/dom or React/Vue. See Vanilla and What’s included.

Browser bundles

Simple script (HTTP)

html

<script src="https://cdn.jsdelivr.net/npm/@sometic/http@3.0.3/dist/cdn/sometic-http.iife.js"></script>
<script>
    const http = SometicHttp.createHttp({ baseUrl: "/api" });
    http.get("/me").then((me) => {
        console.log(me);
    });
</script>

Module script (HTTP)

html

<script type="module">
    import { createHttp } from "https://cdn.jsdelivr.net/npm/@sometic/http@3.0.3/dist/cdn/sometic-http.esm.js";

    const http = createHttp({ baseUrl: "/api" });
    const me = await http.get("/me");
</script>

Simple script (app shell)

html

<script src="https://cdn.jsdelivr.net/npm/@sometic/app-shell@4.0.3/dist/cdn/sometic-app-shell.iife.js"></script>
<script>
    const app = SometicAppShell.createSometicApp({
        auth,
        baseUrl: "/api",
        query: true,
    });
</script>

Module script (app shell)

html

<script type="module">
    import { createSometicApp } from "https://cdn.jsdelivr.net/npm/@sometic/app-shell@4.0.3/dist/cdn/sometic-app-shell.esm.js";

    const app = createSometicApp({
        auth,
        baseUrl: "/api",
        query: true,
    });
</script>

Simple script (Vanilla `bind*` via `@sometic/dom`)

html

<script src="https://cdn.jsdelivr.net/npm/@sometic/dom@3.0.3/dist/cdn/sometic-dom.iife.js"></script>
<script>
    const button = document.querySelector("button");
    if (button) {
        SometicDom.bindButton(button, () => ({ type: "button" }));
    }
</script>

Experimental Wave B (store bind)

These packages do not ship component kits. There is no @sometic/preact/button, @sometic/preact/structure, or equivalent for Angular / Svelte / Solid. They bind @sometic/store into the host subscription model. For UI, use Elements or a Wave A adapter (React, Vue).

Preact

Peer: preact ^10 (optional). Capabilities: storeBind only.

pnpm

pnpm add @sometic/preact @sometic/store

npm

npm install @sometic/preact @sometic/store

yarn

yarn add @sometic/preact @sometic/store

bun

bun add @sometic/preact @sometic/store

See Preact for createPreactStoreBind. Structure components (Tabs, Accordion, Breadcrumb, Command palette, Tree) ship on @sometic/react/structure and @sometic/vue/structure, not Preact.

Angular, Svelte, Solid

Same Wave B contract: store bind, no component subpaths. Guides: Angular, Svelte, Solid.

Package	Global	Simple script	Module script
`@sometic/elements`	`SometicElements`	`https://cdn.jsdelivr.net/npm/@sometic/elements@1.1.6/dist/cdn/sometic-elements.iife.js`	`https://cdn.jsdelivr.net/npm/@sometic/elements@1.1.6/dist/cdn/sometic-elements.esm.js`
`@sometic/http`	`SometicHttp`	`https://cdn.jsdelivr.net/npm/@sometic/http@3.0.3/dist/cdn/sometic-http.iife.js`	`https://cdn.jsdelivr.net/npm/@sometic/http@3.0.3/dist/cdn/sometic-http.esm.js`
`@sometic/query`	`SometicQuery`	`https://cdn.jsdelivr.net/npm/@sometic/query@3.0.3/dist/cdn/sometic-query.iife.js`	`https://cdn.jsdelivr.net/npm/@sometic/query@3.0.3/dist/cdn/sometic-query.esm.js`
`@sometic/auth`	`SometicAuth`	`https://cdn.jsdelivr.net/npm/@sometic/auth@1.2.3/dist/cdn/sometic-auth.iife.js`	`https://cdn.jsdelivr.net/npm/@sometic/auth@1.2.3/dist/cdn/sometic-auth.esm.js`
`@sometic/store`	`SometicStore`	`https://cdn.jsdelivr.net/npm/@sometic/store@1.1.3/dist/cdn/sometic-store.iife.js`	`https://cdn.jsdelivr.net/npm/@sometic/store@1.1.3/dist/cdn/sometic-store.esm.js`
`@sometic/theme`	`SometicTheme`	`https://cdn.jsdelivr.net/npm/@sometic/theme@1.1.3/dist/cdn/sometic-theme.iife.js`	`https://cdn.jsdelivr.net/npm/@sometic/theme@1.1.3/dist/cdn/sometic-theme.esm.js`
`@sometic/head`	`SometicHead`	`https://cdn.jsdelivr.net/npm/@sometic/head@0.1.3/dist/cdn/sometic-head.iife.js`	`https://cdn.jsdelivr.net/npm/@sometic/head@0.1.3/dist/cdn/sometic-head.esm.js`
`@sometic/app-shell`	`SometicAppShell`	`https://cdn.jsdelivr.net/npm/@sometic/app-shell@4.0.3/dist/cdn/sometic-app-shell.iife.js`	`https://cdn.jsdelivr.net/npm/@sometic/app-shell@4.0.3/dist/cdn/sometic-app-shell.esm.js`
`@sometic/core`	`SometicCore`	`https://cdn.jsdelivr.net/npm/@sometic/core@1.0.7/dist/cdn/sometic-core.iife.js`	`https://cdn.jsdelivr.net/npm/@sometic/core@1.0.7/dist/cdn/sometic-core.esm.js`
`@sometic/events`	`SometicEvents`	`https://cdn.jsdelivr.net/npm/@sometic/events@1.0.7/dist/cdn/sometic-events.iife.js`	`https://cdn.jsdelivr.net/npm/@sometic/events@1.0.7/dist/cdn/sometic-events.esm.js`
`@sometic/forms`	`SometicForms`	`https://cdn.jsdelivr.net/npm/@sometic/forms@1.1.3/dist/cdn/sometic-forms.iife.js`	`https://cdn.jsdelivr.net/npm/@sometic/forms@1.1.3/dist/cdn/sometic-forms.esm.js`
`@sometic/styling`	`SometicStyling`	`https://cdn.jsdelivr.net/npm/@sometic/styling@1.0.7/dist/cdn/sometic-styling.iife.js`	`https://cdn.jsdelivr.net/npm/@sometic/styling@1.0.7/dist/cdn/sometic-styling.esm.js`
`@sometic/accessibility`	`SometicAccessibility`	`https://cdn.jsdelivr.net/npm/@sometic/accessibility@1.0.7/dist/cdn/sometic-accessibility.iife.js`	`https://cdn.jsdelivr.net/npm/@sometic/accessibility@1.0.7/dist/cdn/sometic-accessibility.esm.js`
`@sometic/positioning`	`SometicPositioning`	`https://cdn.jsdelivr.net/npm/@sometic/positioning@0.1.7/dist/cdn/sometic-positioning.iife.js`	`https://cdn.jsdelivr.net/npm/@sometic/positioning@0.1.7/dist/cdn/sometic-positioning.esm.js`
`@sometic/dom`	`SometicDom`	`https://cdn.jsdelivr.net/npm/@sometic/dom@3.0.3/dist/cdn/sometic-dom.iife.js`	`https://cdn.jsdelivr.net/npm/@sometic/dom@3.0.3/dist/cdn/sometic-dom.esm.js`

Installation ​

Core ​

Typical stacks ​

React ​

Vue ​

Vanilla / custom elements ​

App shell ​

System packages ​

Auth ​

HTTP ​

Query ​

Head ​

Forms ​

Store ​

Theme ​

CDN (browser bundles) ​

Custom elements (Web Components) ​

Simple script ​

Module script ​

Browser bundles ​

Simple script (HTTP) ​

Module script (HTTP) ​

Simple script (app shell) ​

Module script (app shell) ​

Simple script (Vanilla bind* via @sometic/dom) ​

Experimental Wave B (store bind) ​

Preact ​

Angular, Svelte, Solid ​

Installation

Core

Typical stacks

React

Vue

Vanilla / custom elements

App shell

System packages

Auth

HTTP

Query

Head

Forms

Store

Theme

CDN (browser bundles)

Custom elements (Web Components)

Simple script

Module script

Browser bundles

Simple script (HTTP)

Module script (HTTP)

Simple script (app shell)

Module script (app shell)

Simple script (Vanilla `bind*` via `@sometic/dom`)

Experimental Wave B (store bind)

Preact

Angular, Svelte, Solid