import {defineSchema, Field, Form} from "@/components/ui/form"
 
const schema = defineSchema(({ z, presets }) => z.object({
    name: z.string().min(2),
    birthday: presets.datePicker,
    bounty: z.string()
        .refine(v => Number(v) >= 3_000_000_000,
            { message: "Bounty must be at least ฿3,000,000,000" })
}))
 
export function FormDemo() {
    return (
        <Form
            schema={schema}
            onSubmit={data => {/* ... */}}
            defaultValues={/* ... */}
        >
            <div className="flex gap-3">
                <Field.Text name="name" label="Name" />
                <Field.DatePicker name="birthday" label="Birthday" />
            </div>
            <Field.Currency
                name="bounty"
                label="Bounty"
                prefix="฿"
            />
            <Field.Submit role="save">Save</Field.Submit>
        </Form>
    )
}

Fully-featured Form

Build forms effortlessly with little to no boilerplate. Powered by React Hook Form and Zod.

  • Type safe
  • Validation
  • Error messages
  • No boilerplate
  • 15+ Input components

DataGrid

Data Table with built-in features and server-side support. Powered by Tanstack's React Table.

  • Type safe
  • Pagination
  • Filters
  • Selection
  • Sorting
  • Editing & Validation
  • Server-side support
Name
Price
Category
Availability
Visible
Date

And more...