zenstack-ui

Customizable react components for zenstack and prisma. For now, forms (create/update) and lists (normal/infinite scroll/paginated) are supported.

Forms

Automatically generate form components based on your zmodel schema. With a single component, input fields that match the field types in your zmodel are generated with default values, validation rules, keyboard shortcuts, and more. You can create an element map to customize which UI element is used for each field type.

Read the docs to learn more

Test the demo website

This demo also serves as a great starter template for working with the following stack: react + zenstack + cloudflare workers. Read docs for setting up the demo project yourself here. zenstack-ui is headless, but the demo project uses Mantine as an example for how to integrate it with your favorite UI react component library.

Here's an example from the demo. After running zenstack generation, you can pass the model name (ex: "Item") to any ZenstackForm component to create a fully functional form.

1model Item {
2	id        Int           @id @default(autoincrement())
3	// generates text input
4	name      String
5	// generates select input with enum values
6	category  ITEM_CATEGORY
7	// generates relation picker populated with Person records
8	owner     Person        @relation(fields: [ownerName], references: [name])
9	ownerName String
10}

This is all the code you need to generate the forms seen in the demo! Any change in the zmodel schema will automatically reflect in the UI.

1// Create form
2<ZSCreateForm model={modelNames.item} />
3
4// Update form (for example, you would pass an id from a page parameter)
5<ZSUpdateForm model={modelNames.item} id={0} />

If you want to customize your forms, you can use slot placeholders or custom elements. This allows you to build complete templates with your own components. See the example below:

1<ZSUpdateForm model={modelNames.room} id={id}>
2	{/* A placeholder example. This gets replaced by an input component */}
3	<ZSFieldSlot className="grow" fieldName={roomFields.description} />
4
5	{/* A custom element example. This will be directly used by the form */}
6	<ZSCustomField fieldName={roomFields.aiSummary}>
7		<Textarea
8			className="grow"
9			autosize
10			label="AI Summary"
11			placeholder="AI Summary"
12		/>
13	</ZSCustomField>
14</ZSUpdateForm>

You can see the results in the demo! There are many customization options as well, read the docs to learn more.

Lists

Generate type-safe lists with custom prisma queries. Loading states are automatically handled. Easily switch between normal/infinite scroll/paginated modes. See list.tsx for an example implementation.

1<ZSList<PersonPayload>
2    mode="normal" // change modes with "pagination" or "infinite"
3    model={modelNames.person}
4    query={personQuery} // optional! pass in typed prisma queries
5    skeleton={<ListSkeleton />} // an optional loading skeleton
6    render={person => ( // this object is type-safe based on your model or query
7        <p className="list-item">{person.name}</p>
8    )}
9/>

You can try all 3 list modes in this demo page.