@svgrid/ui 0.2.0

package/LICENSE

@@ -0,0 +1,46 @@
+This repository is a multi-package workspace. Different packages ship
+under different licenses. The authoritative license for each package is
+the LICENSE file inside that package directory.
+
+------------------------------------------------------------------------
+Per-package licensing
+------------------------------------------------------------------------
+
+  packages/grid/       MIT (terms below, and packages/grid/LICENSE)
+  packages/enterprise/        Commercial - see packages/enterprise/LICENSE
+  packages/mcp/        Commercial - see packages/mcp/LICENSE
+  website/                     Proprietary - see website/LICENSE
+
+Only `@svgrid/grid` is open source. Everything else in this
+repository (the Pro feature pack, the MCP server, the marketing +
+docs website, and any other package added later that does not ship
+its own MIT LICENSE) is proprietary and may not be copied, modified,
+or redistributed without a paid license. Source is visible in this
+repository for transparency and for paying customers; visibility does
+not grant a license.
+
+------------------------------------------------------------------------
+MIT License (applies ONLY to packages/grid)
+------------------------------------------------------------------------
+
+MIT License
+
+Copyright (c) 2026 jQWidgets Ltd
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,53 @@
+# @svgrid/ui
+
+Add [SvGrid UI](https://www.svgrid.com/docs/help/ui-components) components to your
+app in one command:
+
+```sh
+npx @svgrid/ui add calendar
+```
+
+## How it works
+
+`@svgrid/ui` is a **recipe scaffolder**, not a component library. `add` writes a
+minimal, ready-to-edit `.svelte` starter into your project that imports from
+[`@svgrid/grid`](https://www.npmjs.com/package/@svgrid/grid), then makes sure the
+package is a dependency and prints the install command. The components themselves
+live in `@svgrid/grid` - you get bug fixes and new features by bumping the package,
+while the file `add` drops in is yours to style and wire however you like.
+
+## Usage
+
+```sh
+# add one component
+npx @svgrid/ui add calendar
+
+# add several, into a custom folder
+npx @svgrid/ui add calendar time-picker --dir src/lib/ui
+
+# add a whole family
+npx @svgrid/ui add date-time
+
+# install the dependency automatically (default: just prints the command)
+npx @svgrid/ui add calendar --install
+
+# see what you can add
+npx @svgrid/ui list
+```
+
+### Options
+
+| Flag             | Description                                                              |
+| ---------------- | ------------------------------------------------------------------------ |
+| `--dir <path>`   | Where to write files. Default: `src/lib/components/ui` (or `componentsDir` in a project `svgrid.json`). |
+| `--force`        | Overwrite files that already exist.                                      |
+| `--install`      | Run your package manager to install deps instead of just printing it.    |
+
+## Components
+
+The whole SvGrid UI catalogue is available - 70+ components across `date-time`,
+`buttons`, `inputs`, `selection`, `range`, `overlays`, `layout`, `feedback` and
+`navigation`. Add one by id, several at once, or a whole family by its group id
+(e.g. `npx @svgrid/ui add inputs`). Run `npx @svgrid/ui list` for the full set.
+
+MIT © jQWidgets Ltd

package/index.mjs

@@ -0,0 +1,303 @@
+#!/usr/bin/env node
+// @svgrid/ui - add SvGrid UI components to your app, one command at a time.
+//
+//   npx @svgrid/ui add calendar
+//   npx @svgrid/ui add calendar time-picker --dir src/lib/ui
+//   npx @svgrid/ui add date-time            # the whole date/time family
+//   npx @svgrid/ui list
+//
+// Recipe-scaffolder model: `add` writes a minimal, ready-to-EDIT .svelte starter
+// that imports from `@svgrid/grid` (which you own and can change), then makes
+// sure the package is a dependency and prints the install command. It does NOT
+// vendor library source - the components live in `@svgrid/grid`.
+//
+// Zero runtime dependencies - Node built-ins only.
+
+import { cp, mkdir, readFile, writeFile } from 'node:fs/promises'
+import { existsSync } from 'node:fs'
+import { dirname, join, resolve } from 'node:path'
+import { fileURLToPath } from 'node:url'
+import { stdin, stdout } from 'node:process'
+import { spawnSync } from 'node:child_process'
+
+const __dirname = dirname(fileURLToPath(import.meta.url))
+const RECIPES_DIR = join(__dirname, 'recipes')
+
+const c = {
+  reset: '\x1b[0m',
+  bold: '\x1b[1m',
+  dim: '\x1b[2m',
+  green: '\x1b[32m',
+  cyan: '\x1b[36m',
+  red: '\x1b[31m',
+  yellow: '\x1b[33m',
+}
+const color = stdout.isTTY ? (k, s) => `${c[k]}${s}${c.reset}` : (_k, s) => s
+
+// Package managers: lockfile -> add command. Order matters (first match wins).
+const PMS = [
+  { id: 'pnpm', lock: 'pnpm-lock.yaml', add: 'pnpm add' },
+  { id: 'bun', lock: 'bun.lockb', add: 'bun add' },
+  { id: 'yarn', lock: 'yarn.lock', add: 'yarn add' },
+  { id: 'npm', lock: 'package-lock.json', add: 'npm install' },
+]
+
+function parseArgs(argv) {
+  const args = { _: [], dir: null, force: false, install: false, help: false, js: false }
+  for (let i = 0; i < argv.length; i++) {
+    const a = argv[i]
+    if (a === '--help' || a === '-h') args.help = true
+    else if (a === '--force' || a === '-f') args.force = true
+    else if (a === '--install') args.install = true
+    else if (a === '--js') args.js = true
+    else if (a === '--ts') args.js = false
+    else if (a === '--dir' || a === '-d') args.dir = argv[++i]
+    else if (a.startsWith('--dir=')) args.dir = a.slice('--dir='.length)
+    else if (!a.startsWith('-')) args._.push(a)
+  }
+  return args
+}
+
+async function loadRegistry() {
+  const raw = await readFile(join(RECIPES_DIR, 'registry.json'), 'utf8')
+  return JSON.parse(raw)
+}
+
+/** Match a user-typed id against the registry: exact id, alias, or lowercase. */
+function resolveItem(registry, token) {
+  const key = token.trim().toLowerCase()
+  return (
+    registry.items.find((it) => it.id === key) ??
+    registry.items.find((it) => (it.aliases ?? []).includes(key)) ??
+    null
+  )
+}
+
+/** Expand a token into one or more recipe items (a group alias -> its members). */
+function expand(registry, token) {
+  const key = token.trim().toLowerCase()
+  const group = registry.groups?.[key]
+  if (group) return group.items.map((id) => resolveItem(registry, id)).filter(Boolean)
+  const item = resolveItem(registry, key)
+  return item ? [item] : []
+}
+
+/** Walk up from `start` to the nearest directory containing a package.json. */
+function findProjectRoot(start) {
+  let dir = start
+  while (true) {
+    if (existsSync(join(dir, 'package.json'))) return dir
+    const parent = dirname(dir)
+    if (parent === dir) return null
+    dir = parent
+  }
+}
+
+function detectPm(root) {
+  if (!root) return PMS.find((p) => p.id === 'npm')
+  return PMS.find((p) => existsSync(join(root, p.lock))) ?? PMS.find((p) => p.id === 'npm')
+}
+
+async function targetDir(args, projectRoot, cwd) {
+  if (args.dir) return resolve(cwd, args.dir)
+  // Optional project config: svgrid.json { componentsDir }
+  if (projectRoot) {
+    const cfgPath = join(projectRoot, 'svgrid.json')
+    if (existsSync(cfgPath)) {
+      try {
+        const cfg = JSON.parse(await readFile(cfgPath, 'utf8'))
+        if (cfg.componentsDir) return resolve(projectRoot, cfg.componentsDir)
+      } catch {
+        /* fall through to the default */
+      }
+    }
+    return join(projectRoot, 'src', 'lib', 'components', 'ui')
+  }
+  return join(cwd, 'src', 'lib', 'components', 'ui')
+}
+
+/** Add any missing deps to the nearest package.json (dependencies). Returns the
+ *  list actually added so the caller can report / install them. */
+async function ensureDeps(projectRoot, deps) {
+  if (!projectRoot) return deps
+  const pkgPath = join(projectRoot, 'package.json')
+  let pkg
+  try {
+    pkg = JSON.parse(await readFile(pkgPath, 'utf8'))
+  } catch {
+    return deps
+  }
+  pkg.dependencies ??= {}
+  const added = []
+  for (const dep of deps) {
+    const known = pkg.dependencies[dep] || pkg.devDependencies?.[dep]
+    if (!known) {
+      pkg.dependencies[dep] = 'latest'
+      added.push(dep)
+    }
+  }
+  if (added.length) await writeFile(pkgPath, JSON.stringify(pkg, null, 2) + '\n')
+  return added
+}
+
+function printHelp() {
+  stdout.write(`
+${color('bold', '@svgrid/ui')} - add SvGrid UI components to your app
+
+${color('bold', 'Usage')}
+  npx @svgrid/ui add <component...> [--dir <path>] [--force] [--install]
+  npx @svgrid/ui list
+
+${color('bold', 'Commands')}
+  ${color('cyan', 'add')}   Write a ready-to-edit recipe for each component into your project.
+  ${color('cyan', 'list')}  Show the components you can add.
+
+${color('bold', 'Options')}
+  --dir <path>   Where to write files (default: src/lib/components/ui, or the
+                 "componentsDir" in a project svgrid.json).
+  --force        Overwrite files that already exist.
+  --install      Run the package manager to install deps (default: just print it).
+
+${color('bold', 'Examples')}
+  npx @svgrid/ui add calendar
+  npx @svgrid/ui add calendar time-picker --dir src/lib/ui
+  npx @svgrid/ui add date-time --install
+`)
+}
+
+async function cmdList(registry) {
+  stdout.write(`\n${color('bold', 'Available components')}\n`)
+  for (const it of registry.items) {
+    stdout.write(`  ${color('cyan', it.id.padEnd(18))} ${color('dim', it.description)}\n`)
+  }
+  const groups = Object.entries(registry.groups ?? {})
+  if (groups.length) {
+    stdout.write(`\n${color('bold', 'Groups')}\n`)
+    for (const [id, g] of groups) {
+      stdout.write(`  ${color('cyan', id.padEnd(18))} ${color('dim', g.items.join(', '))}\n`)
+    }
+  }
+  stdout.write(`\n${color('dim', 'Add one with:')} npx @svgrid/ui add ${registry.items[0]?.id ?? 'calendar'}\n\n`)
+}
+
+async function cmdAdd(registry, tokens, args) {
+  if (!tokens.length) {
+    stdout.write(`${color('red', '✖')} Nothing to add. Try: ${color('cyan', 'npx @svgrid/ui list')}\n`)
+    process.exit(1)
+  }
+
+  // Resolve tokens -> unique items.
+  const items = new Map()
+  const unknown = []
+  for (const tok of tokens) {
+    const matched = expand(registry, tok)
+    if (!matched.length) unknown.push(tok)
+    for (const it of matched) items.set(it.id, it)
+  }
+  if (unknown.length) {
+    stdout.write(
+      `${color('red', '✖')} Unknown component(s): ${unknown.join(', ')}\n` +
+        `  See ${color('cyan', 'npx @svgrid/ui list')} for the available set.\n`,
+    )
+    process.exit(1)
+  }
+
+  const cwd = process.cwd()
+  const projectRoot = findProjectRoot(cwd)
+  const dest = await targetDir(args, projectRoot, cwd)
+  await mkdir(dest, { recursive: true })
+
+  const written = []
+  const skipped = []
+  const deps = new Set()
+  for (const it of items.values()) {
+    for (const d of it.deps ?? []) deps.add(d)
+    for (const file of it.files ?? []) {
+      const outPath = join(dest, file.write)
+      if (existsSync(outPath) && !args.force) {
+        skipped.push(file.write)
+        continue
+      }
+      await cp(join(RECIPES_DIR, file.from), outPath)
+      written.push(file.write)
+    }
+  }
+
+  // Report writes.
+  stdout.write(`\n`)
+  for (const f of written) stdout.write(`  ${color('green', '+')} ${relFromCwd(cwd, join(dest, f))}\n`)
+  for (const f of skipped)
+    stdout.write(`  ${color('yellow', '•')} ${f} ${color('dim', 'already exists (use --force to overwrite)')}\n`)
+  if (!written.length) {
+    stdout.write(`\n${color('yellow', '!')} No files written.\n\n`)
+    return
+  }
+
+  // Ensure deps + install.
+  const added = await ensureDeps(projectRoot, [...deps])
+  const pm = detectPm(projectRoot)
+  if (added.length) {
+    if (args.install && projectRoot) {
+      stdout.write(`\n${color('dim', `Installing with ${pm.id}...`)}\n`)
+      const [bin, ...rest] = pm.add.split(' ')
+      const res = spawnSync(bin, [...rest, ...added], { cwd: projectRoot, stdio: 'inherit', shell: true })
+      if (res.status !== 0) {
+        stdout.write(`${color('yellow', '!')} Install failed - run it yourself: ${color('cyan', `${pm.add} ${added.join(' ')}`)}\n`)
+      }
+    } else {
+      stdout.write(`\n${color('bold', 'Install the dependency')}\n  ${color('cyan', `${pm.add} ${added.join(' ')}`)}\n`)
+    }
+  } else if ([...deps].length) {
+    stdout.write(`\n${color('dim', `${[...deps].join(', ')} already in package.json.`)}\n`)
+  }
+
+  // Usage hint.
+  const first = [...items.values()][0]
+  stdout.write(`\n${color('green', '✔')} Added ${written.length} file(s). They're yours - edit away.\n`)
+  if (first) {
+    stdout.write(`  ${color('dim', 'Use it:')} import { ${exportName(first.id)} } from '@svgrid/grid'\n`)
+  }
+  stdout.write(`\n${color('dim', 'Docs:')} https://www.svgrid.com/docs/help/ui-components\n\n`)
+}
+
+/** Component export name from its id (calendar -> SvCalendar, time-picker ->
+ *  SvTimePicker). */
+function exportName(id) {
+  return 'Sv' + id.split('-').map((s) => s[0].toUpperCase() + s.slice(1)).join('')
+}
+
+function relFromCwd(cwd, p) {
+  const r = p.startsWith(cwd) ? p.slice(cwd.length).replace(/^[\\/]/, '') : p
+  return r.split('\\').join('/')
+}
+
+async function main() {
+  const argv = process.argv.slice(2)
+  const args = parseArgs(argv)
+  const [command, ...rest] = args._
+
+  if (args.help || !command) return printHelp()
+
+  const registry = await loadRegistry()
+  stdout.write(`${color('bold', '◆ @svgrid/ui')}\n`)
+
+  switch (command) {
+    case 'list':
+    case 'ls':
+      return cmdList(registry)
+    case 'add':
+      return cmdAdd(registry, rest, args)
+    default:
+      // Treat a bare component id as `add <id>` for convenience.
+      if (resolveItem(registry, command) || registry.groups?.[command]) {
+        return cmdAdd(registry, [command, ...rest], args)
+      }
+      stdout.write(`${color('red', '✖')} Unknown command "${command}". Try ${color('cyan', 'add')} or ${color('cyan', 'list')}.\n`)
+      process.exit(1)
+  }
+}
+
+main().catch((err) => {
+  console.error(err)
+  process.exit(1)
+})

package/package.json

@@ -0,0 +1,49 @@
+{
+  "name": "@svgrid/ui",
+  "funding": {
+    "type": "commercial",
+    "url": "https://svgrid.com/pricing"
+  },
+  "version": "0.2.0",
+  "description": "Add SvGrid UI components to your app in one command: npx @svgrid/ui add calendar",
+  "type": "module",
+  "license": "MIT",
+  "author": "jQWidgets Ltd",
+  "homepage": "https://www.svgrid.com",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/sv-grid/sv-grid.git",
+    "directory": "packages/svgrid-ui"
+  },
+  "keywords": [
+    "svelte",
+    "sveltekit",
+    "svgrid",
+    "sv-grid",
+    "ui",
+    "components",
+    "cli",
+    "scaffold",
+    "add",
+    "recipe"
+  ],
+  "bin": "index.mjs",
+  "files": [
+    "index.mjs",
+    "recipes"
+  ],
+  "engines": {
+    "node": ">=18"
+  },
+  "devDependencies": {
+    "@sveltejs/vite-plugin-svelte": "^7.0.0",
+    "@tsconfig/svelte": "^5.0.8",
+    "svelte": "^5.55.5",
+    "svelte-check": "^4.4.6",
+    "typescript": "6.0.3",
+    "@svgrid/grid": "2.2.0"
+  },
+  "scripts": {
+    "test:types": "svelte-check --tsconfig ./tsconfig.json"
+  }
+}

package/recipes/buttons/button-group.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+  // SvButtonGroup - a segmented single/multi-select button bar. Your copy, edit freely. Docs: https://www.svgrid.com/docs/help/ui-components/sv-button-group
+  import { SvButtonGroup, type ButtonGroupItem } from '@svgrid/grid'
+
+  const views: ButtonGroupItem[] = [
+    { value: 'day', label: 'Day' },
+    { value: 'week', label: 'Week' },
+    { value: 'month', label: 'Month' },
+  ]
+  let view = $state<string | number>('week')
+</script>
+
+<SvButtonGroup
+  items={views}
+  value={view}
+  mode="single"
+  onChange={(v) => (view = v as string)}
+/>

package/recipes/buttons/button.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+  // SvButton - the themeable press primitive with variants and loading. Your copy, edit freely. Docs: https://www.svgrid.com/docs/help/ui-components/sv-button
+  import { SvButton } from '@svgrid/grid'
+
+  let saving = $state(false)
+  async function save() {
+    saving = true
+    try {
+      await new Promise((r) => setTimeout(r, 800))
+    } finally {
+      saving = false
+    }
+  }
+</script>
+
+<SvButton variant="primary" loading={saving} onclick={save}>Save</SvButton>
+<SvButton variant="outline">Cancel</SvButton>

package/recipes/buttons/check-box.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+  // SvCheckBox - a themed checkbox with a true indeterminate state. Your copy, edit freely. Docs: https://www.svgrid.com/docs/help/ui-components/sv-check-box
+  import { SvCheckBox } from '@svgrid/grid'
+
+  let agree = $state(false)
+</script>
+
+<SvCheckBox checked={agree} onChange={(v) => (agree = v)}>
+  I accept the terms
+</SvCheckBox>

package/recipes/buttons/radio-group.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+  // SvRadioGroup - an accessible single-select radio group. Your copy, edit freely. Docs: https://www.svgrid.com/docs/help/ui-components/sv-radio-group
+  import { SvRadioGroup, type RadioOption } from '@svgrid/grid'
+
+  const plans: RadioOption[] = [
+    { value: 'free', label: 'Free' },
+    { value: 'pro', label: 'Pro' },
+    { value: 'team', label: 'Team' },
+  ]
+  let plan = $state<string | number | null>('pro')
+</script>
+
+<SvRadioGroup
+  label="Plan"
+  options={plans}
+  value={plan}
+  onChange={(v) => (plan = v)}
+/>

package/recipes/buttons/rating.svelte

@@ -0,0 +1,8 @@
+<script lang="ts">
+  // SvRating - a star rating control on the ARIA slider pattern. Your copy, edit freely. Docs: https://www.svgrid.com/docs/help/ui-components/sv-rating
+  import { SvRating } from '@svgrid/grid'
+
+  let score = $state(4)
+</script>
+
+<SvRating label="Your rating" value={score} onChange={(v) => (score = v)} />

package/recipes/buttons/repeat-button.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+  // SvRepeatButton - a button that keeps firing while held. Your copy, edit freely. Docs: https://www.svgrid.com/docs/help/ui-components/sv-repeat-button
+  import { SvRepeatButton } from '@svgrid/grid'
+
+  let qty = $state(1)
+</script>
+
+<SvRepeatButton ariaLabel="Decrease" onclick={() => (qty = Math.max(0, qty - 1))}>-</SvRepeatButton>
+<span>{qty}</span>
+<SvRepeatButton ariaLabel="Increase" onclick={() => (qty += 1)}>+</SvRepeatButton>

package/recipes/buttons/switch-button.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+  // SvSwitchButton - an on/off sliding switch for immediate settings. Your copy, edit freely. Docs: https://www.svgrid.com/docs/help/ui-components/sv-switch-button
+  import { SvSwitchButton } from '@svgrid/grid'
+
+  let notify = $state(true)
+</script>
+
+<SvSwitchButton
+  label="Email notifications"
+  checked={notify}
+  onChange={(v) => (notify = v)}
+/>

package/recipes/buttons/toggle-button.svelte

@@ -0,0 +1,8 @@
+<script lang="ts">
+  // SvToggleButton - a button with a sticky pressed on/off state. Your copy, edit freely. Docs: https://www.svgrid.com/docs/help/ui-components/sv-toggle-button
+  import { SvToggleButton } from '@svgrid/grid'
+
+  let bold = $state(false)
+</script>
+
+<SvToggleButton pressed={bold} onChange={(v) => (bold = v)}>Bold</SvToggleButton>

package/recipes/date-time/calendar.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+  // SvCalendar - a themeable month / year / decade calendar. This is your copy,
+  // edit it freely. Docs: https://www.svgrid.com/docs/help/ui-components/sv-calendar
+  import { SvCalendar } from '@svgrid/grid'
+
+  let value = $state<Date[]>([new Date()])
+</script>
+
+<SvCalendar
+  {value}
+  selectionMode="range"
+  firstDayOfWeek={1}
+  footer
+  onChange={(dates) => (value = dates)}
+/>

package/recipes/date-time/date-range-input.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+  // SvDateRangeInput - a compact start/end field over a two-month range calendar.
+  // This is your copy, edit it freely.
+  // Docs: https://www.svgrid.com/docs/help/ui-components/sv-date-range-input
+  import { SvDateRangeInput } from '@svgrid/grid'
+
+  let range = $state<[Date, Date] | null>(null)
+</script>
+
+<SvDateRangeInput
+  value={range}
+  formatString="yyyy-MM-dd"
+  months={2}
+  onChange={(v) => (range = v)}
+/>

package/recipes/date-time/date-time-picker.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+  // SvDateTimePicker - a masked text field with DATE / TIME dropdown tabs. This
+  // is your copy, edit it freely.
+  // Docs: https://www.svgrid.com/docs/help/ui-components/sv-date-time-picker
+  import { SvDateTimePicker } from '@svgrid/grid'
+
+  let value = $state<Date | null>(new Date())
+</script>
+
+<SvDateTimePicker
+  {value}
+  formatString="yyyy-MM-dd HH:mm"
+  dropDownDisplayMode="both"
+  nullable
+  onChange={(d) => (value = d)}
+/>

package/recipes/date-time/time-picker.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+  // SvTimePicker - an analog clock-dial time picker. This is your copy, edit it
+  // freely. Docs: https://www.svgrid.com/docs/help/ui-components/sv-time-picker
+  import { SvTimePicker } from '@svgrid/grid'
+
+  let time = $state(new Date())
+</script>
+
+<SvTimePicker
+  value={time}
+  format="12-hour"
+  minuteInterval={5}
+  footer
+  onChange={(d) => (time = d)}
+/>

package/recipes/feedback/alert.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+  // SvAlert - an inline contextual message with icon and actions. Your copy, edit freely. Docs: https://www.svgrid.com/docs/help/ui-components/sv-alert
+  import { SvAlert, SvButton } from '@svgrid/grid'
+</script>
+
+<SvAlert variant="success" title="Saved">Your changes are live.</SvAlert>
+
+<SvAlert variant="danger" title="Payment failed" dismissible>
+  We could not charge your card.
+  {#snippet actions()}<SvButton size="sm" variant="danger">Retry</SvButton>{/snippet}
+</SvAlert>

package/recipes/feedback/avatar-group.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+  // SvAvatarGroup - overlapping avatars with a "+N" overflow pill. Your copy, edit freely. Docs: https://www.svgrid.com/docs/help/ui-components/sv-avatar-group
+  import { SvAvatarGroup } from '@svgrid/grid'
+</script>
+
+<SvAvatarGroup max={3} avatars={[
+  { name: 'Ada Lovelace' },
+  { name: 'Alan Turing' },
+  { name: 'Grace Hopper' },
+  { name: 'Ken Thompson' },
+]} />

package/recipes/feedback/avatar.svelte

@@ -0,0 +1,8 @@
+<script lang="ts">
+  // SvAvatar - a user avatar with initials-and-color fallback. Your copy, edit freely. Docs: https://www.svgrid.com/docs/help/ui-components/sv-avatar
+  import { SvAvatar } from '@svgrid/grid'
+</script>
+
+<SvAvatar name="Ada Lovelace" src="/ada.jpg" status="online" />
+<SvAvatar name="Grace Hopper" />
+<SvAvatar name="Alan Turing" size="lg" shape="square" />