Examples

Examples

Runnable previews for each kit — embedded in the docs.

Examples live in the sidebar under each kit (and under Foundations → Theme). Open a kit folder in the docs nav to see its guide plus every scenario.

This page is a flat index when you need quick links. Kit guides (Form, Data table, Layout, Dashboard shell, Auth, Uploader) hold installation, props, and gotchas.

Choose a starting point

Goal	Example path
Learn the smallest table composition	Basic table
Add URL-backed table state	URL sync
Dashboard shell scenarios	Shell basic
Auth demo (no env vars)	Sign in
Theme toggle + selector	Theme controls

How to read an example

Each preview is a docs-site client example. Check the linked source component for complete imports and host-app wiring.

Form

FormKit — basic

Submit flow with sections and actions

FormKit — field types

Every supported FormKit.Field type

Invalid email format

FormKit — validation

Client + server error mapping

FieldKit — filters

Controlled filter row without submit

Data table

Columns, selection, pagination

Custom zero-data UI

Skeleton body while fetching

Toolbar search and facets

Selection bar + export

?page=2&sort=name&q=acme

Query string state

Layout

Home/Settings/Users

Dashboard shell guide

Composition + API reference

Home/Settings/Users

Shell — basic

Sidebar, header, breadcrumbs

Home/Settings/Users

Shell — icon sidebar

Collapsed rail by default

Home/Settings/Users

Shell — nested nav

Groups and active routes

Home/Settings/Users

Shell — mobile sheet

Small-viewport navigation

Home/Settings/Users

Shell — account menu

Session user dropdown

Home/Settings/Users

Shell — top nav

Home/Settings/Users

Shell — auth split

Sign-in column + aside

Home/Settings/Users

Shell — settings

Secondary nav in main

Home/Settings/Users

Shell — content layouts

Grid, flex, form section

Home/Settings/Users

Shell — skeleton

Loading placeholders

Shell — data table

Table + theme header

Home/Settings/Users

Trail + back affordance

Utility buttons

Docs / refresh / info icons

Auth

Sign-in, sign-up, and recovery entry points

Email/password + GitHub row

Invalid email format

Registration with Zod validation

Theme

Toggle and system-aware selector

Uploader

Template download + records transport

FormKit — validation

Zod rules, client errors, and focus on the first invalid field after submit.

Layout — breadcrumbs

Path-derived crumbs with ellipsis, tooltips, and copy-link.

On this page

Choose a starting point How to read an example