Basic Usage
Practical examples to get you productive with DocKit quickly.
Hello World
The simplest possible DocKit page — create a file at src/pages/index.tsx:
TypeScript
export default function HomePage() {
return (
<main>
<h1>Hello, DocKit!</h1>
</main>
);
}
Fetching Data
Use the built-in useData hook to fetch server-side data with automatic caching:
TypeScript
import { useData } from "dockit";
interface Project {
id: string;
name: string;
status: "active" | "archived";
}
export default function ProjectsPage() {
const { data, error, isLoading } = useData<Project[]>("/api/projects");
if (isLoading) return <p>Loading...</p>;
if (error) return <p>Error: {error.message}</p>;
return (
<ul>
{data.map((project) => (
<li key={project.id}>{project.name}</li>
))}
</ul>
);
}
Handling Forms
DocKit ships a type-safe form helper that integrates with Zod schemas:
TypeScript
import { useForm } from "dockit/forms";
import { z } from "zod";
const schema = z.object({
email: z.string().email(),
message: z.string().min(10),
});
export default function ContactForm() {
const form = useForm({ schema });
return (
<form onSubmit={form.handleSubmit((data) => console.log(data))}>
<input {...form.register("email")} placeholder="Email" />
<textarea {...form.register("message")} placeholder="Message" />
<button type="submit">Send</button>
</form>
);
}
Client Routing
Navigate programmatically with the useRouter hook:
TypeScript
import { useRouter } from "dockit";
export function LoginButton() {
const router = useRouter();
const handleLogin = async () => {
await signIn();
router.push("/dashboard");
};
return <button onClick={handleLogin}>Sign In</button>;
}