# 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/.json`: ```sh 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 ` {#if reset.sentTo}

We sent a link to {reset.sentTo}.

{:else}
{#if reset.error}

{reset.error}

{/if}
{/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 | Group | Add it | Blocks | | --- | --- | --- | | [Sign-in & registration](https://svgrid.com/docs/help/ui-blocks/auth/) | `add blocks/auth` | Split login, sign-up, two-factor code, SSO and magic link, forgot password | | [Error pages](https://svgrid.com/docs/help/ui-blocks/error-pages/) | `add blocks/error-pages` | 404 with search, 500 with retry, maintenance, 403 | | [Empty states](https://svgrid.com/docs/help/ui-blocks/empty-states/) | `add blocks/empty-states` | First item, upload drop zone, no search results, widget cards | | [Form layouts](https://svgrid.com/docs/help/ui-blocks/form-layouts/) | `add blocks/form-layouts` | Stacked, two-column, notification settings, settings with side nav, danger zone | | [Page headings](https://svgrid.com/docs/help/ui-blocks/page-headings/) | `add blocks/page-headings` | Breadcrumbs, tabs, record meta, stats | | [Onboarding](https://svgrid.com/docs/help/ui-blocks/onboarding/) | `add blocks/onboarding` | Setup wizard, progress checklist | | [App shells & dashboards](https://svgrid.com/docs/help/ui-blocks/app-shells/) | `add blocks/app-shells` | Analytics dashboard, sidebar app shell | | [KPI cards](https://svgrid.com/docs/help/ui-blocks/kpi-cards/) | `add blocks/kpi-cards` | With icons, with trend, live sparklines | | [Stats](https://svgrid.com/docs/help/ui-blocks/stats/) | `add blocks/stats` | Weekly report with CSV export, status board | | [Filter panels](https://svgrid.com/docs/help/ui-blocks/filter-panels/) | `add blocks/filter-panels` | Sidebar facets, toolbar, applied chips, collapsible filters over an SvGrid | | [Activity feeds](https://svgrid.com/docs/help/ui-blocks/activity-feeds/) | `add blocks/activity-feeds` | Activity timeline, notification list, comment thread, audit log | | [AI assistant](https://svgrid.com/docs/help/ui-blocks/ai/) | `add blocks/ai` | Prompt suggestions, ask bar over an SvGrid, model settings | | [Orders](https://svgrid.com/docs/help/ui-blocks/orders/) | `add blocks/orders` | Order history on SvGrid, order tracking | | [Banners](https://svgrid.com/docs/help/ui-blocks/banners/) | `add blocks/banners` | Announcement bar, inline alerts, cookie consent, billing warning | | [Navbars](https://svgrid.com/docs/help/ui-blocks/navbars/) | `add blocks/navbars` | Simple, storefront with search, mega menu | | [Footers](https://svgrid.com/docs/help/ui-blocks/footers/) | `add blocks/footers` | Sitemap, simple | | [Checkout](https://svgrid.com/docs/help/ui-blocks/checkout/) | `add blocks/checkout` | Split, stepped, payment methods, order confirmation | | [Shopping carts](https://svgrid.com/docs/help/ui-blocks/shopping-carts/) | `add blocks/shopping-carts` | Cart page, slide-over cart | | [Reviews](https://svgrid.com/docs/help/ui-blocks/reviews/) | `add blocks/reviews` | Rating summary, review list, write a review | | [Contact](https://svgrid.com/docs/help/ui-blocks/contact/) | `add blocks/contact` | Contact form, contact cards, support request with hours | | [Hero](https://svgrid.com/docs/help/ui-blocks/hero/) | `add blocks/hero` | Centered, with email sign-up | | [Features](https://svgrid.com/docs/help/ui-blocks/features/) | `add blocks/features` | Icon grid, list with screenshot | | [Call to action](https://svgrid.com/docs/help/ui-blocks/cta/) | `add blocks/cta` | Centered, justified | | [Pricing](https://svgrid.com/docs/help/ui-blocks/pricing/) | `add blocks/pricing` | Three tiers with billing toggle, per-seat with highlighted plan, comparison table | | [FAQ](https://svgrid.com/docs/help/ui-blocks/faq/) | `add blocks/faq` | Accordion with search, centered with topics | | [Bento grids](https://svgrid.com/docs/help/ui-blocks/bento/) | `add blocks/bento` | Feature bento | | [Testimonials](https://svgrid.com/docs/help/ui-blocks/testimonials/) | `add blocks/testimonials` | Quote cards, carousel | | [Logo clouds](https://svgrid.com/docs/help/ui-blocks/logo-clouds/) | `add blocks/logo-clouds` | Customer wordmark grid | | [Team](https://svgrid.com/docs/help/ui-blocks/team/) | `add blocks/team` | Team grid with department filter | | [Product cards](https://svgrid.com/docs/help/ui-blocks/product-cards/) | `add blocks/product-cards` | Card grid, horizontal card | | [Product lists](https://svgrid.com/docs/help/ui-blocks/product-lists/) | `add blocks/product-lists` | List with sort and view toolbar, featured product | | [Product overview](https://svgrid.com/docs/help/ui-blocks/product-overview/) | `add blocks/product-overview` | Gallery, variants and add to cart | | [Blog](https://svgrid.com/docs/help/ui-blocks/blog/) | `add blocks/blog` | Post cards with category filter, featured article | Every block also has a live page in the [demo gallery](https://svgrid.com/demos/420-block-login), 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. > Live demo: 404 with helpful links block - https://svgrid.com/demos/530-block-error-pages-404-links/ ### 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. > Live demo: Ask bar block - https://svgrid.com/demos/575-block-ai-ask-bar/ ### Split checkout Contact, shipping, delivery and card fields beside a sticky order summary, with every field validated before Pay. > Live demo: Split checkout block - https://svgrid.com/demos/599-block-checkout-split/ ## See also - [Add components with the CLI](https://svgrid.com/docs/help/ui-components/cli/) - [SvGrid UI components](https://svgrid.com/docs/help/ui-components/index/) - [Theme presets](https://svgrid.com/docs/recipes/theme-presets/) --- SvGrid is the Svelte 5 data grid (`npm install @svgrid/grid`, MIT). This page: https://svgrid.com/docs/help/ui-blocks/index/ . All docs: https://svgrid.com/llms.txt