Shaddy Quickstart: Add Components and Hooks in Minutes

This quickstart guide walks you through adding Shaddy resources — UI components, typed hooks, and the form system — to an existing Next.js project. By the end you will have a working form backed by Zod validation, installed entirely without adding a new package dependency.

Prerequisites

Before adding any Shaddy resource, make sure your project meets the following requirements:

Node.js >= 20 (enforced by Shaddy’s own engines field)
A Next.js project (App Router recommended, matching Next.js 15)
shadcn/ui initialized in your project (npx shadcn@latest init)
TypeScript configured (Shaddy resources are fully typed)
Tailwind CSS set up in your project

If you haven’t initialized shadcn/ui yet, run npx shadcn@latest init in your project root and follow the prompts before continuing.

How Shaddy Works

Shaddy does not publish an npm package. Instead, it hosts a public shadcn-compatible registry at:

https://shaddy-docs.vercel.app/r/

You add resources using the same npx shadcn@latest add <url> CLI you already use for shadcn/ui components. The CLI fetches the resource from the registry and copies it directly into your codebase — you own the code, and you can customize it however you like.

Because resources are copied into your project rather than imported from a package, you get full control over every line of code with zero runtime dependency on Shaddy.

Step-by-Step Setup

Ensure shadcn/ui is initialized

If you haven’t already, initialize shadcn/ui in your Next.js project. This sets up the components/ui directory, your tailwind.config, and the cn utility that Shaddy resources depend on.

npx shadcn@latest init

Add the Shaddy Form System

The shaddy-form registry item installs the ShaddyForm component along with its dependencies (form, input, button, and supporting field primitives from shadcn/ui).

npx shadcn@latest add https://shaddy-docs.vercel.app/r/shaddy-form

This copies the following files into your project:

components/form/shaddy-form.tsx
components/form/form-context.ts
components/form/fields/text-field.tsx
components/form/fields/submit-button.tsx

Add a Typed Hook

Hooks are added individually. Here’s how to add useBoolean, a fully-typed boolean state manager:

npx shadcn@latest add https://shaddy-docs.vercel.app/r/use-boolean

This copies hooks/use-boolean.ts into your project.

Add a UI Component

UI components are added the same way. For example, to add the Stepper component:

npx shadcn@latest add https://shaddy-docs.vercel.app/r/stepper

This copies components/ui/stepper.tsx and any required shadcn/ui peer components into your project.

Install any additional dependencies

Some Shaddy resources declare additional npm dependencies. The shadcn CLI will prompt you to install them automatically. If you need to install them manually, use your preferred package manager:

npm install react-hook-form @hookform/resolvers zod

These packages are required by the ShaddyForm component, which wires react-hook-form and Zod together behind a clean generic API.

Build your first form

With ShaddyForm copied into your project, you can build a validated form in just a few lines. Here is a minimal working example:

import { z } from "zod"
import { ShaddyForm } from "@/components/form/shaddy-form"
import { TextField } from "@/components/form/fields/text-field"
import { SubmitButton } from "@/components/form/fields/submit-button"

// 1. Define your schema with Zod
const loginSchema = z.object({
  email: z.string().email("Please enter a valid email address"),
  password: z.string().min(8, "Password must be at least 8 characters"),
})

type LoginValues = z.infer<typeof loginSchema>

// 2. Define initial values matching the schema shape
const initialValues: LoginValues = {
  email: "",
  password: "",
}

// 3. Render ShaddyForm — schema, initialValues, and onSubmit are all you need
export function LoginForm() {
  const handleSubmit = (values: LoginValues) => {
    console.log("Submitted:", values)
  }

  return (
    <ShaddyForm
      schema={loginSchema}
      initialValues={initialValues}
      onSubmit={handleSubmit}
      className="space-y-4"
    >
      <TextField
        name="email"
        label="Email"
        placeholder="you@example.com"
      />
      <TextField
        name="password"
        label="Password"
        type="text"
        placeholder="••••••••"
      />
      <SubmitButton label="Sign in" />
    </ShaddyForm>
  )
}

ShaddyForm is fully generic — TypeScript infers the field types from your Zod schema automatically, giving you type-safe access to form values in onSubmit with no extra type annotations needed.

Using the `useBoolean` Hook

Once hooks/use-boolean.ts is in your project, import and use it like this:

import { useBoolean } from "@/hooks/use-boolean"

export function ToggleExample() {
  const [isOpen, { toggle, setTrue, setFalse, reset }] = useBoolean(false)

  return (
    <div>
      <p>Panel is: {isOpen ? "Open" : "Closed"}</p>
      <button onClick={toggle}>Toggle</button>
      <button onClick={setTrue}>Open</button>
      <button onClick={setFalse}>Close</button>
      <button onClick={reset}>Reset</button>
    </div>
  )
}

The hook returns a tuple of [value, controls], where controls exposes toggle, setTrue, setFalse, reset, setValue, and getValue — all correctly typed.

Registry Reference

All Shaddy resources follow the same URL pattern:

https://shaddy-docs.vercel.app/r/<resource-name>

Resource	Command
Form system	`npx shadcn@latest add https://shaddy-docs.vercel.app/r/shaddy-form`
useBoolean hook	`npx shadcn@latest add https://shaddy-docs.vercel.app/r/use-boolean`
Stepper component	`npx shadcn@latest add https://shaddy-docs.vercel.app/r/stepper`
Date Range Picker	`npx shadcn@latest add https://shaddy-docs.vercel.app/r/date-range-picker`
Loading Spinner	`npx shadcn@latest add https://shaddy-docs.vercel.app/r/loading-spinner`

Browse the full list of available resources in the UI Components, Typed Hooks, Form, and Utils sections of these docs.

The Shaddy docs site at shaddy-docs.vercel.app includes live previews, API references, and source code for every available resource.

Get Started

Shaddy Quickstart: Add Components and Hooks in Minutes

Prerequisites

How Shaddy Works

Step-by-Step Setup

Using the `useBoolean` Hook

Registry Reference

Build docs developers (and LLMs) love

Get Started

Documentation Index

​Prerequisites

​How Shaddy Works

​Step-by-Step Setup

​Using the useBoolean Hook

​Registry Reference

Build docs developers (and LLMs) love

Prerequisites

How Shaddy Works

Step-by-Step Setup

Using the `useBoolean` Hook

Registry Reference