Headless / Collections

Create a record

Compose create a record using the surrounding collection's state.

9 public parts · 2examples

@slices.sh/collection/headlessView as Markdown ↗

Your design. Our behavior.

Explore the tree to see what each part controls. Gates reveal the relevant state; roots outline their scope.

Behavior / inputGateGenericRenderer · not headlessScope

COMPONENT ANATOMYHover · focus · tap

ONE POSSIBLE DESIGNStatic preview

Collection.Root · Scope

Collection.RootThe root, and the parts that choose what is drawn under it: one of several views, the data a view needs, and one of two screens by width.

Data table Filter records Record detail Select and edit records Kanban board Hierarchical records

Installation

Choose what your component needs. Run these commands in an initialized Next.js app.

Before you start

The steps below run in a Next.js app with shadcn set up (it has a components.json). In an existing Next.js app, such as one from create-next-app, set shadcn up first:

npx shadcn@latest init -t next -b base -p nova

Or start fresh: the slices CLI creates the app and sets it up.

npx slices.sh install

Install the service registry

Adds services/index.ts, which import "@/services" loads. A provider setup writes the same file, so skip this if your app has one.

npx add services

Install the headless library

npm

Add the React parts to your app, then compose them with your own elements.

npm install @slices.sh/collection@^0.1.6

Import from @slices.sh/collection/headless.

Install the service

Connect the parts to a provider. Skip this step if this service is already configured in your app.

Provider

npx add collection.memory

Adds service configuration and API routes to your app, with the provider dependencies. For a headless composition, add import "@/services" after "use client".

The slices CLI installs the service and provisions its required resources in one command.

Provider setup notes

Rows are lost when the server restarts, and live updates reach only watchers in the process that wrote. Move on with npx shadcn@latest add @slices/collection.mongodb (or -neon, -supabase): services/collection/*.config.ts and rules.ts are yours and stay.

Start small

Parts bring the behavior. Use their default elements, or supply your own with render.

example.tsx

"use client"import "@/services"import { Collection } from "@slices.sh/collection/headless"import type { CollectionSchema } from "@slices.sh/collection/services/types"export function Example({ schema }: { schema: CollectionSchema }) {  return (    <Collection.Root collection={schema.collection} schema={schema}>      <Collection.Create.Form>        <Collection.Create.Field>          <Collection.Create.Label />          <Collection.Create.Input />        </Collection.Create.Field>        <Collection.Create.Submit>Create record</Collection.Create.Submit>        <Collection.Create.Error />      </Collection.Create.Form>    </Collection.Root>  )}

Supply a registered collection schema. Parts use its fields, permissions and provider capabilities.

API reference

Every public part used by this experience is listed below. Gates render children without adding an element. Element parts accept native element props and render; function children receive the state declared in their props. Scopes provide context rather than a visual element.

Collection.Create.Formaction · <form>

The standalone root, the form, one field scope per schema field (in a lane, all but the lane's own), and the label of the field in scope.

Required scope

Collection.Create.Form must be inside <Collection.Root>.

Props

2 documented props · Native <form> attributes supported

Collection.Create.Form props
Prop	Type	Default
`children` Content rendered inside this part.	`ReactNode \| ((state: { pending: boolean }) => ReactNode)`	`—`
`render` Replace the default element with your own while retaining the part’s behavior and accessibility.	`ReactElement`	`—`

Required props are marked. A dash means no explicit default is declared in this component.

Alternate public imports

Create.Form from @slices.sh/collection/headless/create

Source: @slices.sh/collection/src/headless/create/form.tsx

Collection.Create.Fieldcontent · <div>

The standalone root, the form, one field scope per schema field (in a lane, all but the lane's own), and the label of the field in scope.

Required scope

Collection.Create.Field must be inside <Collection.Root>.

Props

2 documented props · Native <div> attributes supported

Collection.Create.Field props
Prop	Type	Default
`children` Content rendered inside this part.	`ReactNode \| ((state: { field: SchemaField }) => ReactNode)`	`—`
`render` Replace the default element with your own while retaining the part’s behavior and accessibility.	`ReactElement`	`—`

Required props are marked. A dash means no explicit default is declared in this component.

Alternate public imports

Create.Field from @slices.sh/collection/headless/create

Source: @slices.sh/collection/src/headless/create/field.tsx

Collection.Create.Labelcontent · <label>

The standalone root, the form, one field scope per schema field (in a lane, all but the lane's own), and the label of the field in scope.

Required scope

Collection.Create.Label must be inside <Collection.Create.Field>.

Props

2 documented props · Native <label> attributes supported

Collection.Create.Label props
Prop	Type	Default
`children` Content rendered inside this part.	`ReactNode`	`—`
`render` Replace the default element with your own while retaining the part’s behavior and accessibility.	`ReactElement`	`—`

Required props are marked. A dash means no explicit default is declared in this component.

Alternate public imports

Create.Label from @slices.sh/collection/headless/create

Source: @slices.sh/collection/src/headless/create/label.tsx

Collection.Create.Inputinput · <input>

An input typed by field (text, number, date, url), a select for enum fields and a checkbox for boolean fields. Each renders nothing for a field of another type.

Required scope

Collection.Create.Input must be inside <Collection.Create.Field>.

Props

2 documented props · Native <input> attributes supported

Collection.Create.Input props
Prop	Type	Default
`children` Content rendered inside this part.	`ReactNode \| ((state: { invalid: boolean }) => ReactNode)`	`—`
`render` Replace the default element with your own while retaining the part’s behavior and accessibility.	`ReactElement`	`—`

Required props are marked. A dash means no explicit default is declared in this component.

Alternate public imports

Create.Input from @slices.sh/collection/headless/create

Source: @slices.sh/collection/src/headless/create/input.tsx

Collection.Create.Selectinput · <select>

An input typed by field (text, number, date, url), a select for enum fields and a checkbox for boolean fields. Each renders nothing for a field of another type.

Required scope

Collection.Create.Select must be inside <Collection.Create.Field>.

Props

2 documented props · Native <select> attributes supported

Collection.Create.Select props
Prop	Type	Default
`children` Content rendered inside this part.	`ReactNode`	`—`
`render` Replace the default element with your own while retaining the part’s behavior and accessibility.	`ReactElement`	`—`

Required props are marked. A dash means no explicit default is declared in this component.

Alternate public imports

Create.Select from @slices.sh/collection/headless/create

Source: @slices.sh/collection/src/headless/create/select.tsx

Collection.Create.Checkboxinput · <input>

An input typed by field (text, number, date, url), a select for enum fields and a checkbox for boolean fields. Each renders nothing for a field of another type.

Required scope

Collection.Create.Checkbox must be inside <Collection.Create.Field>.

Props

2 documented props · Native <input> attributes supported

Collection.Create.Checkbox props
Prop	Type	Default
`children` Content rendered inside this part.	`ReactNode`	`—`
`render` Replace the default element with your own while retaining the part’s behavior and accessibility.	`ReactElement`	`—`

Required props are marked. A dash means no explicit default is declared in this component.

Alternate public imports

Create.Checkbox from @slices.sh/collection/headless/create

Source: @slices.sh/collection/src/headless/create/checkbox.tsx

Collection.Create.Submitaction · <button>

The submit button with its pending state, and the error of the last create.

Required scope

Collection.Create.Submit must be inside <Collection.Create.Form>.

Props

2 documented props · Native <button> attributes supported

Collection.Create.Submit props
Prop	Type	Default
`children` Content rendered inside this part.	`ReactNode \| ((state: { pending: boolean }) => ReactNode)`	`—`
`render` Replace the default element with your own while retaining the part’s behavior and accessibility.	`ReactElement`	`—`

Required props are marked. A dash means no explicit default is declared in this component.

Alternate public imports

Create.Submit from @slices.sh/collection/headless/create

Source: @slices.sh/collection/src/headless/create/submit.tsx

Collection.Create.Errorcontent · <div>

The submit button with its pending state, and the error of the last create.

Required scope

Collection.Create.Error must be inside <Collection.Create.Form>.

Props

2 documented props · Native <div> attributes supported

Collection.Create.Error props
Prop	Type	Default
`children` Content rendered inside this part.	`ReactNode \| ((state: { message: string }) => ReactNode)`	`—`
`render` Replace the default element with your own while retaining the part’s behavior and accessibility.	`ReactElement`	`—`

Required props are marked. A dash means no explicit default is declared in this component.

Alternate public imports

Create.Error from @slices.sh/collection/headless/create

Source: @slices.sh/collection/src/headless/create/error.tsx

Collection.Create.Rootscope

The standalone root, the form, one field scope per schema field (in a lane, all but the lane's own), and the label of the field in scope.

Props

2 documented props

Collection.Create.Root props
Prop	Type	Default
`schema`Required	`CollectionSchema`	`—`
`children` Content rendered inside this part.	`ReactNode`	`—`

Required props are marked. A dash means no explicit default is declared in this component.

Alternate public imports

Create.Root from @slices.sh/collection/headless/create

Source: @slices.sh/collection/src/headless/create/root.tsx

Collection.Rootscope

The root, and the parts that choose what is drawn under it: one of several views, the data a view needs, and one of two screens by width.

Props

25 documented props

Collection.Root props
Prop	Type	Default
`treeParent`	`string`	`—`
`view`	`"table" \| "list" \| "grid" \| "board" \| "tree" \| "detail"`	`—`
`views`	`readonly CollectionViewValue[]`	`—`
`cardSize`	`"small" \| "medium" \| "large"`	`—`
`savedViews`	`readonly SavedView[]`	`—`
`onSaveView`	`(view: SavedView) => void \| Promise<void>`	`—`
`groupBy`	`string \| null`	`—`
`onGroupByChange`	`(field: string \| null) => void`	`—`
`enabled` Left out or `true`: required, and a missing service throws. `"optional"`: renders its children with no rows, and every part inside renders nothing. `false`: off. A capability name (`"live"`) requires the service and that capability.	`Enabled`	`—`
`config` The collection config, `"default"` when left out. `collection` names one inside it.	`string`	`—`
`groupSumFields`	`readonly string[]`	`—`
`cardSizing`	`boolean`	`false`
`lanes`	`boolean`	`false`
`collection`Required	`string`	`—`
`schema`Required	`CollectionSchema`	`—`
`density`	`"compact" \| "comfortable" \| "spacious"`	`—`
`onDensityChange`	`(density: DensityValue) => void`	`—`
`palette`	`boolean`	`false`
`pageSize`	`number`	`10`
`infinite`	`boolean`	`false`
`live`	`boolean`	`false`
`urlState` Whether the search, the sort and the filter travel in the address bar.	`boolean`	`true`
`search` `false` when nothing on screen searches: no search applies, from the address or a saved view.	`boolean`	`true`
`filters` `false` when nothing on screen filters: no filter applies, from the address or a saved view.	`boolean`	`true`
`children` Content rendered inside this part.	`ReactNode`	`—`

Required props are marked. A dash means no explicit default is declared in this component.

Source: @slices.sh/collection/src/headless/root.tsx

When something is missing

No service configuration: Install the collection setup below and import "@/services". Required service roots report missing setup; gates do not replace that configuration.
Missing capability or parent scope: Follow each part’s context requirements and the example composition. Capability-aware controls hide when the provider cannot perform their action.

Read the setup guide →