Quick start

Build a settings screen with a form, a toast and a data grid in a few minutes.

Build a project settings screen: a form that saves with a toast, inside the app frame, in any skin. It takes a few minutes and shows the whole workflow.

1. Install what the screen uses

pnpm dlx shadcn@latest add superzero11/uiset/uiset superzero11/uiset/app-shell superzero11/uiset/page-header superzero11/uiset/field superzero11/uiset/select superzero11/uiset/switch superzero11/uiset/button superzero11/uiset/toast

2. Write the screen

tsx

import { useState } from "react"
import { AppShell, SidebarGroup, SidebarItem, SidebarNav } from "@/components/ui/app-shell"
import { Button } from "@/components/ui/button"
import { Field, FieldLabel, Input } from "@/components/ui/field"
import { PageHeader } from "@/components/ui/page-header"
import { Select, SelectContent, SelectItem, SelectLabel, SelectTrigger } from "@/components/ui/select"
import { Switch } from "@/components/ui/switch"
import { Toaster, toast } from "@/components/ui/toast"
import { UISet } from "@/components/ui/uiset"

export function Settings() {
  const [name, setName] = useState("Atlas")
  return (
    <UISet skin="base">
      <AppShell
        brand={<a href="/">Acme</a>}
        sidebar={
          <SidebarNav label="Main">
            <SidebarGroup title="Project">
              <SidebarItem href="/settings" current>Settings</SidebarItem>
            </SidebarGroup>
          </SidebarNav>
        }
      >
        <PageHeader title="Settings" description="Name, region and deploys for this project." />
        <form
          onSubmit={(event) => {
            event.preventDefault()
            toast("Settings saved", { description: `${name} is up to date.` })
          }}
        >
          <Field>
            <FieldLabel>Project name</FieldLabel>
            <Input value={name} onValueChange={setName} />
          </Field>
          <Select name="region" defaultValue="eu">
            <SelectLabel>Region</SelectLabel>
            <SelectTrigger />
            <SelectContent>
              <SelectItem value="eu">Europe</SelectItem>
              <SelectItem value="us">North America</SelectItem>
            </SelectContent>
          </Select>
          <label>
            <Switch name="preview" defaultChecked /> Preview deployments
          </label>
          <Button type="submit">Save settings</Button>
        </form>
      </AppShell>
      <Toaster />
    </UISet>
  )
}

Everything you see is UI SDK's behavior with UISet's look: the select opens with the keyboard and types ahead, the switch toggles with Space, the toast is announced, and focus always shows.

3. Try another skin

Change skin="base" to "blueprint", "studio", "phosphor" or "ink". Nothing else changes. (Load the skin's fonts for the intended look.)

4. Let an agent use it

Every control above has a name, so UI SDK's agent bridge can see and use the form:

import { createAgent } from "@ui-sdk/react/agent"

const agent = createAgent()
agent.snapshot() // Project name, Region, Preview deployments, Save settings…
await agent.act({ steps: [{ ref: "Region", action: "setValue", args: ["North America"] }] })

See Building with AI agents for approvals, undo and the Agent Console.

5. Add a kit

pnpm dlx shadcn@latest add superzero11/uiset/data-grid

Then follow the data grid page. Or skip ahead: the settings template is a finished version of this screen.