UI blocks

A block is a whole page section built from the SvGrid UI components: a sign-in screen, a 404 page, a pricing table, an empty state. Each one is a single .svelte file that imports from @svgrid/grid and nothing else. You copy it into your app and change it like any other file you own.

Blocks are free and MIT-licensed, like the components they are made of.

Add a block

Add one block by name, or a whole group at once:

That writes one file per block into src/lib/components/ui/ (or the componentsDir in your svgrid.json) and installs @svgrid/grid if it is missing. To look before you add, npx @svgrid/ui try blocks/auth opens the group in a sandbox with a theme picker and a dark mode toggle. No project needed.

npx @svgrid/ui list prints every block group and the blocks in it.

If your app already uses shadcn-svelte, every block is also served from https://svgrid.com/r/<name>.json:

npx shadcn-svelte@latest add https://svgrid.com/r/login.json

Headless first

Every block is headless, like the components. The top of each file, its <script module>, holds a create<Name>() core: the state, validation, async flow and accessible prop-getters, with no markup. The styled component below it is one render of that core. To draw your own markup over the same behaviour, take the core alone:

npx @svgrid/ui add auth-forgot-password --headless   # writes auth-forgot-password.svelte.ts

<script lang="ts">
  import { createForgotPassword } from './auth-forgot-password.svelte.js'

  const reset = createForgotPassword({
    onRequest: async (email) => {
      const r = await fetch('/api/password-reset', { method: 'POST', body: JSON.stringify({ email }) })
      if (!r.ok) throw new Error('Reset failed')
    },
  })
</script>

{#if reset.sentTo}
  <p>We sent a link to {reset.sentTo}.</p>
  <button {...reset.resendProps()}>Resend{reset.cooldown ? ` in ${reset.cooldown}s` : ''}</button>
{:else}
  <form {...reset.formProps()}>
    <input {...reset.fieldProps()} />
    {#if reset.error}<p>{reset.error}</p>{/if}
    <button disabled={reset.busy}>Send reset link</button>
  </form>
{/if}

If you keep the styled file, the core is still importable from it: import { createForgotPassword } from './auth-forgot-password.svelte'.

What you get in the file

• Components, not markup copies. The inputs, buttons, cards and toasts are Sv* components. Their keyboard handling, validation and accessibility come from the package, so a @svgrid/grid update fixes them in every block you have copied.
• Theme tokens. Colors, borders and radii come from the --sg-* custom properties, so a block follows whichever theme preset or dark mode your app uses.
• Prefixed classes. Every class a block defines starts with sv- and a block-specific stem (sv-signin-head), so your app's global CSS and the block's styles never match each other's elements.
• No assets to host. Logos, illustrations and photos are inline SVG or CSS.
• Phones. Every block is checked at 375 px wide.
• Working state. Forms validate, buttons show a loading state, and submits fire a toast. Replace the toast call with your own request.

Groups

Every block also has a live page in the demo gallery, under SvGrid UI > Blocks, one page per group.

A few to start with

404 with search

A site search that filters a list of popular pages as you type, for the page a broken link lands on.

Ask bar over a grid

A plain-language question filters or summarizes an SvGrid of invoices through the free AI helpers, offline with the mock provider.

Split checkout

Contact, shipping, delivery and card fields beside a sticky order summary, with every field validated before Pay.

See also

• Add components with the CLI
• SvGrid UI components
• Theme presets