Headless / Organizations

Members

List members, edit roles, manage domain access and pending invitations.

56 public parts · 4examples

@slices.sh/auth/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

User.Root · Scope

User.RootSays which auth the User parts below read, and whether they may do without it. The parts need no root: left out, they read the nearest auth root's config, or "default", and render nothing without auth. `<User.Root enabled="optional">` is for the one who wants that said in the code.

Sign in Create an account Recover access Profile and contact details Account menu Password Connected accounts Active sessions Delete account Switch or create a workspace Workspace settings Invitations Join requests Domain access

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/auth@^0.1.10

Import from @slices.sh/auth/headless.

Install the service

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

Provider

Database

Account capabilities

passkeystwo-factororganizationspassword-reset

npx add auth.betterauth --auth-methods google --organizations

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.

Set BETTER_AUTH_URL to your app origin. Memory is for local development; use a persistent database for deployment. Neon and Supabase also require the migration script printed by the installer.

Provider setup notes

BETTER_AUTH_SECRET signs every session and is generated into .env.local while this installs (32 random bytes, base64, nothing leaves the machine). Changing it signs everyone out; in production set the same one on every instance.
The public origin (OAuth callbacks, the passkey domain) is the one each request comes to in development, and the deployment's own on Vercel. Elsewhere, or behind a proxy or a custom domain, set BETTER_AUTH_URL, such as https://acme.com.

Start small

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

example.tsx

"use client"import "@/services"import { User, Members } from "@slices.sh/auth/headless"export function Example() {  return (    <User.Root>      <ul>        <Members.Item>          <Members.Name />          <Members.Email />        </Members.Item>      </ul>      <Members.Empty>No members.</Members.Empty>    </User.Root>  )}

Requires an authenticated account. Organization controls also require organizations and the appropriate role.

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.

Members.RemoveTriggeraction · <button>

The dialog trigger stays mounted so the primitive can restore focus to it.

Required scope

Members.RemoveTrigger requires a member row.

Props

2 documented props · Native <button> attributes supported

Members.RemoveTrigger 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

Members.RemoveTrigger from @slices.sh/auth/headless/members

Source: @slices.sh/auth/src/headless/members/remove-trigger.tsx

Members.RemoveErrorcontent · <p>

Inline: RequestRemove arms the row, ConfirmRemove gates the question, Remove does it with { pending }, CancelRemove takes focus back. In a dialog: RemoveDialog maps the armed state onto render={<AlertDialog />} and RemoveTrigger stays mounted so focus returns to it. RemoveError gets { code, message }. All render nothing for a member you cannot manage.

Required scope

Members.RemoveError requires a member row.

Props

2 documented props · Native <p> attributes supported

Members.RemoveError props
Prop	Type	Default
`children` Content rendered inside this part.	`ReactNode \| ((state: { code: AuthErrorCode; 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

Members.RemoveError from @slices.sh/auth/headless/members

Source: @slices.sh/auth/src/headless/members/remove-error.tsx

Members.RoleErrorcontent · <p>

Role is a native <select> with { role }, one option per backend role unless given children, disabled for a member you cannot manage. RoleOption repeats once per role with value locked. RoleError reports a refused change.

Required scope

Members.RoleError requires a member row.

Props

2 documented props · Native <p> attributes supported

Members.RoleError props
Prop	Type	Default
`children` Content rendered inside this part.	`ReactNode \| ((state: { code: AuthErrorCode; 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

Members.RoleError from @slices.sh/auth/headless/members

Source: @slices.sh/auth/src/headless/members/role-error.tsx

Members.RemoveDialogcontent

Required scope

Members.RemoveDialog requires a member row.

Props

2 documented props

Members.RemoveDialog 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

Members.RemoveDialog from @slices.sh/auth/headless/members

Source: @slices.sh/auth/src/headless/members/remove-dialog.tsx

Members.Countcontent · <span>

Item is an <li> repeated once per member with { self }. Name and Email are text; Image is the stored image else Gravatar; Initials as User.Initials. Count gets { count }.

Capability: organizations

Props

2 documented props · Native <span> attributes supported

Members.Count props
Prop	Type	Default
`children` Content rendered inside this part.	`ReactNode \| ((state: { count: number }) => 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

Members.Count from @slices.sh/auth/headless/members

Source: @slices.sh/auth/src/headless/members/count.tsx

Members.Itemcontent · <li>

Item is an <li> repeated once per member with { self }. Name and Email are text; Image is the stored image else Gravatar; Initials as User.Initials. Count gets { count }.

Capability: organizations

Props

2 documented props · Native <li> attributes supported

Members.Item props
Prop	Type	Default
`children` Content rendered inside this part.	`ReactNode \| ((state: { self: boolean; name: string \| null }) => 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

Members.Item from @slices.sh/auth/headless/members

Source: @slices.sh/auth/src/headless/members/item.tsx

Members.Namecontent

Item is an <li> repeated once per member with { self }. Name and Email are text; Image is the stored image else Gravatar; Initials as User.Initials. Count gets { count }.

Capability: organizations

Required scope

Members.Name must be inside <Members.Item>.

Props

2 documented props

Members.Name 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

Members.Name from @slices.sh/auth/headless/members

Source: @slices.sh/auth/src/headless/members/name.tsx

Members.Emailcontent

Item is an <li> repeated once per member with { self }. Name and Email are text; Image is the stored image else Gravatar; Initials as User.Initials. Count gets { count }.

Capability: organizations

Required scope

Members.Email must be inside <Members.Item>.

Props

2 documented props

Members.Email 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

Members.Email from @slices.sh/auth/headless/members

Source: @slices.sh/auth/src/headless/members/email.tsx

Members.Imagecontent · <img>

Item is an <li> repeated once per member with { self }. Name and Email are text; Image is the stored image else Gravatar; Initials as User.Initials. Count gets { count }.

Capability: organizations

Required scope

Members.Image must be inside <Members.Item>.

Props

2 documented props · Native <img> attributes supported

Members.Image 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

Members.Image from @slices.sh/auth/headless/members

Source: @slices.sh/auth/src/headless/members/image.tsx

Members.Initialscontent

Item is an <li> repeated once per member with { self }. Name and Email are text; Image is the stored image else Gravatar; Initials as User.Initials. Count gets { count }.

Capability: organizations

Required scope

Members.Initials must be inside <Members.Item>.

Props

2 documented props

Members.Initials 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

Members.Initials from @slices.sh/auth/headless/members

Source: @slices.sh/auth/src/headless/members/initials.tsx

Members.Roleinput · <select>

Required scope

Members.Role must be inside <Members.Item>.

Members.Role must be inside a member row.

Props

2 documented props · Native <select> attributes supported

Members.Role props
Prop	Type	Default
`children` Content rendered inside this part.	`ReactNode \| ((state: { role: RoleName }) => 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

Members.Role from @slices.sh/auth/headless/members

Source: @slices.sh/auth/src/headless/members/role.tsx

Members.RoleOptioncontent · <option>

Props

2 documented props · Native <option> attributes supported

Members.RoleOption props
Prop	Type	Default
`children` Content rendered inside this part.	`ReactNode \| ((state: { role: Role }) => 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

Members.RoleOption from @slices.sh/auth/headless/members

Source: @slices.sh/auth/src/headless/members/role-option.tsx

Members.RequestRemoveaction · <button>

Required scope

Members.RequestRemove must be inside <Members.Item>.

Props

2 documented props · Native <button> attributes supported

Members.RequestRemove 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

Members.RequestRemove from @slices.sh/auth/headless/members

Source: @slices.sh/auth/src/headless/members/request-remove.tsx

Members.ConfirmRemovegate

Required scope

Members.ConfirmRemove must be inside <Members.Item>.

Props

1 documented props

Members.ConfirmRemove props
Prop	Type	Default
`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

Members.ConfirmRemove from @slices.sh/auth/headless/members

Source: @slices.sh/auth/src/headless/members/confirm-remove.tsx

Members.CancelRemoveaction · <button>

Required scope

Members.CancelRemove must be inside <Members.Item>.

Members.CancelRemove requires a member row.

Props

2 documented props · Native <button> attributes supported

Members.CancelRemove 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

Members.CancelRemove from @slices.sh/auth/headless/members

Source: @slices.sh/auth/src/headless/members/cancel-remove.tsx

Members.Removeaction · <button>

Required scope

Members.Remove must be inside <Members.Item>.

Members.Remove must be inside a member row.

Props

2 documented props · Native <button> attributes supported

Members.Remove 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

Members.Remove from @slices.sh/auth/headless/members

Source: @slices.sh/auth/src/headless/members/remove.tsx

Members.Loadinggate

Loading, Empty and Error for the members list; Error gets { code, message }.

Props

1 documented props

Members.Loading props
Prop	Type	Default
`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

Members.Loading from @slices.sh/auth/headless/members

Source: @slices.sh/auth/src/headless/members/loading.tsx

Members.Emptygate

Loading, Empty and Error for the members list; Error gets { code, message }.

Props

1 documented props

Members.Empty props
Prop	Type	Default
`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

Members.Empty from @slices.sh/auth/headless/members

Source: @slices.sh/auth/src/headless/members/empty.tsx

Members.Errorgate

Loading, Empty and Error for the members list; Error gets { code, message }.

Props

1 documented props

Members.Error props
Prop	Type	Default
`children` Content rendered inside this part.	`ReactNode \| ((state: { code: AuthErrorCode; message: string }) => ReactNode)`	`—`

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

Alternate public imports

Members.Error from @slices.sh/auth/headless/members

Source: @slices.sh/auth/src/headless/members/error.tsx

Members.Table.RoleNamecontent

Rows repeats its render element once per member on the page, with { self, name }, and every Members value part works inside it. Self renders inside your own row. RoleName gets { role } for a read-only role. Empty opens when the filters leave nobody.

Required scope

Members.Table.RoleName requires a member row.

Props

2 documented props

Members.Table.RoleName props
Prop	Type	Default
`children` Content rendered inside this part.	`ReactNode \| ((state: { role: Role }) => 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

Members.Table.RoleName from @slices.sh/auth/headless/members

Source: @slices.sh/auth/src/headless/members/table/role-name.tsx

Members.Table.Rootscope

Props

3 documented props

Members.Table.Root props
Prop	Type	Default
`config` The auth config, a slug from the registry (`services/auth/<config>.config.ts`). The nearest root's, else `"default"`, when left out.	`string`	`—`
`enabled` Left out or `true`: required, and missing auth throws. `"optional"`: renders its children and every part inside degrades without auth. `false`: off. A capability name such as `"methods: password"`: requires auth with it.	`Enabled`	`—`
`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

Members.Table.Root from @slices.sh/auth/headless/members

Source: @slices.sh/auth/src/headless/members/table/root.tsx

Members.Table.Searchinput · <input>

Search is the text filter, with shortcuts to focus it. Filter is a native <select> of roles and FilterOption repeats with { role }, including all.

Required scope

Members.Table.Search requires Members.Table.Root.

Props

3 documented props · Native <input> attributes supported

Members.Table.Search props
Prop	Type	Default
`shortcuts`	`boolean`	`false`
`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

Members.Table.Search from @slices.sh/auth/headless/members

Source: @slices.sh/auth/src/headless/members/table/search.tsx

Members.Table.Filterinput · <select>

Search is the text filter, with shortcuts to focus it. Filter is a native <select> of roles and FilterOption repeats with { role }, including all.

Required scope

Members.Table.Filter requires Members.Table.Root.

Props

2 documented props · Native <select> attributes supported

Members.Table.Filter 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

Members.Table.Filter from @slices.sh/auth/headless/members

Source: @slices.sh/auth/src/headless/members/table/role-filter.tsx

Members.Table.FilterOptioncontent · <option>

Search is the text filter, with shortcuts to focus it. Filter is a native <select> of roles and FilterOption repeats with { role }, including all.

Props

2 documented props · Native <option> attributes supported

Members.Table.FilterOption props
Prop	Type	Default
`children` Content rendered inside this part.	`ReactNode \| ((state: { role: Role \| "all" }) => 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

Members.Table.FilterOption from @slices.sh/auth/headless/members

Source: @slices.sh/auth/src/headless/members/table/filter-option.tsx

Members.Table.Rowscontent · <tr>

Required scope

Members.Table.Rows requires Members.Table.Root.

Members.Table.Rows supplies each member.

Props

2 documented props · Native <tr> attributes supported

Members.Table.Rows props
Prop	Type	Default
`children` Content rendered inside this part.	`ReactNode \| ((state: { self: boolean; name: string \| null }) => 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

Members.Table.Rows from @slices.sh/auth/headless/members

Source: @slices.sh/auth/src/headless/members/table/rows.tsx

Members.Table.Selfcontent · <span>

Required scope

Members.Table.Self requires a member row.

Props

2 documented props · Native <span> attributes supported

Members.Table.Self 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

Members.Table.Self from @slices.sh/auth/headless/members

Source: @slices.sh/auth/src/headless/members/table/self.tsx

Members.Table.Emptygate

Required scope

Members.Table.Empty requires Members.Table.Root.

Props

1 documented props

Members.Table.Empty props
Prop	Type	Default
`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

Members.Table.Empty from @slices.sh/auth/headless/members

Source: @slices.sh/auth/src/headless/members/table/empty.tsx

Members.Table.PageInfocontent · <p>

PageInfo is a polite status with { page, pages, count }. Previous and Next move a page and disable at the ends.

Required scope

Members.Table.PageInfo requires Members.Table.Root.

Props

2 documented props · Native <p> attributes supported

Members.Table.PageInfo props
Prop	Type	Default
`children` Content rendered inside this part.	`ReactNode \| ((state: { page: number; pages: number; count: number }) => 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

Members.Table.PageInfo from @slices.sh/auth/headless/members

Source: @slices.sh/auth/src/headless/members/table/page-info.tsx

Members.Table.Previousaction · <button>

PageInfo is a polite status with { page, pages, count }. Previous and Next move a page and disable at the ends.

Required scope

Members.Table.Previous requires Members.Table.Root.

Props

2 documented props · Native <button> attributes supported

Members.Table.Previous 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

Members.Table.Previous from @slices.sh/auth/headless/members

Source: @slices.sh/auth/src/headless/members/table/previous.tsx

Members.Table.Nextaction · <button>

PageInfo is a polite status with { page, pages, count }. Previous and Next move a page and disable at the ends.

Required scope

Members.Table.Next requires Members.Table.Root.

Props

2 documented props · Native <button> attributes supported

Members.Table.Next 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

Members.Table.Next from @slices.sh/auth/headless/members

Source: @slices.sh/auth/src/headless/members/table/next.tsx

Members.Bulk.Rootscope

Members.Bulk.Root provides state to the parts inside it.

Props

1 documented props

Members.Bulk.Root props
Prop	Type	Default
`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

Members.Bulk.Root from @slices.sh/auth/headless/members

Source: @slices.sh/auth/src/headless/members/bulk/root.tsx

Members.Bulk.Selectinput · <input>

Members.Bulk.Select renders a input element.

Required scope

Members.Bulk.Select requires a member row.

Members.Bulk.Select requires Root.

Props

2 documented props · Native <input> attributes supported

Members.Bulk.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

Members.Bulk.Select from @slices.sh/auth/headless/members

Source: @slices.sh/auth/src/headless/members/bulk/select.tsx

Members.Bulk.SelectPageinput · <input>

Members.Bulk.SelectPage renders a input element.

Required scope

Members.Bulk.SelectPage requires Table.Root.

Members.Bulk.SelectPage requires Root.

Props

2 documented props · Native <input> attributes supported

Members.Bulk.SelectPage 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

Members.Bulk.SelectPage from @slices.sh/auth/headless/members

Source: @slices.sh/auth/src/headless/members/bulk/select-page.tsx

Members.Bulk.Visiblegate

Members.Bulk.Visible conditionally renders its children.

Required scope

Members.Bulk.Visible requires Root.

Props

2 documented props

Members.Bulk.Visible props
Prop	Type	Default
`children` Content rendered inside this part.	`ReactNode`	`—`
`render`	`ReactElement`	`—`

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

Alternate public imports

Members.Bulk.Visible from @slices.sh/auth/headless/members

Source: @slices.sh/auth/src/headless/members/bulk/visible.tsx

Members.Bulk.Phasegate

Members.Bulk.Phase conditionally renders its children.

Required scope

Members.Bulk.Phase requires Root.

Props

2 documented props

Members.Bulk.Phase props
Prop	Type	Default
`name`Required	`"selection" \| "scheduled" \| "pending" \| "refused"`	`—`
`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

Members.Bulk.Phase from @slices.sh/auth/headless/members

Source: @slices.sh/auth/src/headless/members/bulk/phase.tsx

Members.Bulk.Countcontent · <span>

Members.Bulk.Count renders a span element.

Required scope

Members.Bulk.Count requires Root.

Props

2 documented props · Native <span> attributes supported

Members.Bulk.Count props
Prop	Type	Default
`children` Content rendered inside this part.	`ReactNode \| ((state: { count: number; seconds: number }) => 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

Members.Bulk.Count from @slices.sh/auth/headless/members

Source: @slices.sh/auth/src/headless/members/bulk/count.tsx

Members.Bulk.Requestaction · <button>

Members.Bulk.Request renders a button element.

Required scope

Members.Bulk.Request requires Root.

Members.Bulk request requires Root.

Props

2 documented props · Native <button> attributes supported

Members.Bulk.Request 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

Members.Bulk.Request from @slices.sh/auth/headless/members

Source: @slices.sh/auth/src/headless/members/bulk/request.tsx

Members.Bulk.RequestRowaction · <button>

Members.Bulk.RequestRow renders a button element.

Required scope

Members.Bulk.RequestRow requires Root.

Members.Bulk request requires Root.

Members.Bulk.RequestRow requires a row.

Props

2 documented props · Native <button> attributes supported

Members.Bulk.RequestRow 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

Members.Bulk.RequestRow from @slices.sh/auth/headless/members

Source: @slices.sh/auth/src/headless/members/bulk/request-row.tsx

Members.Bulk.Dialogcontent

Members.Bulk.Dialog renders content from its current scope.

Required scope

Members.Bulk.Dialog requires Root.

Props

2 documented props

Members.Bulk.Dialog 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

Members.Bulk.Dialog from @slices.sh/auth/headless/members

Source: @slices.sh/auth/src/headless/members/bulk/dialog.tsx

Members.Bulk.Plannedcontent · <li>

Members.Bulk.Planned renders a li element.

Required scope

Members.Bulk.Planned requires Root.

Props

2 documented props · Native <li> attributes supported

Members.Bulk.Planned props
Prop	Type	Default
`children` Content rendered inside this part.	`ReactNode \| ((state: { name: string \| null; email: string \| null }) => 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

Members.Bulk.Planned from @slices.sh/auth/headless/members

Source: @slices.sh/auth/src/headless/members/bulk/planned.tsx

Members.Bulk.Confirmaction · <button>

Members.Bulk.Confirm renders a button element.

Required scope

Members.Bulk.Confirm requires Root.

Props

2 documented props · Native <button> attributes supported

Members.Bulk.Confirm props
Prop	Type	Default
`children` Content rendered inside this part.	`ReactNode \| ((state: { count: number; retryAfter: number }) => 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

Members.Bulk.Confirm from @slices.sh/auth/headless/members

Source: @slices.sh/auth/src/headless/members/bulk/confirm.tsx

Members.Bulk.Cancelaction · <button>

Members.Bulk.Cancel renders a button element.

Required scope

Members.Bulk.Cancel requires Root.

Props

2 documented props · Native <button> attributes supported

Members.Bulk.Cancel 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

Members.Bulk.Cancel from @slices.sh/auth/headless/members

Source: @slices.sh/auth/src/headless/members/bulk/cancel.tsx

Members.Bulk.Undoaction · <button>

Members.Bulk.Undo renders a button element.

Required scope

Members.Bulk.Undo requires Root.

Props

2 documented props · Native <button> attributes supported

Members.Bulk.Undo 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

Members.Bulk.Undo from @slices.sh/auth/headless/members

Source: @slices.sh/auth/src/headless/members/bulk/undo.tsx

Members.Bulk.Clearaction · <button>

Members.Bulk.Clear renders a button element.

Required scope

Members.Bulk.Clear requires Root.

Props

2 documented props · Native <button> attributes supported

Members.Bulk.Clear 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

Members.Bulk.Clear from @slices.sh/auth/headless/members

Source: @slices.sh/auth/src/headless/members/bulk/clear.tsx

Members.Bulk.Retryaction · <button>

Members.Bulk.Retry renders a button element.

Required scope

Members.Bulk.Retry requires Root.

Props

2 documented props · Native <button> attributes supported

Members.Bulk.Retry props
Prop	Type	Default
`children` Content rendered inside this part.	`ReactNode \| ((state: { retryAfter: number }) => 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

Members.Bulk.Retry from @slices.sh/auth/headless/members

Source: @slices.sh/auth/src/headless/members/bulk/retry.tsx

Members.Bulk.Refusalcontent · <li>

Members.Bulk.Refusal renders a li element.

Required scope

Members.Bulk.Refusal requires Root.

Props

2 documented props · Native <li> attributes supported

Members.Bulk.Refusal props
Prop	Type	Default
`children` Content rendered inside this part.	`ReactNode \| ((state: { name: string \| null; 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

Members.Bulk.Refusal from @slices.sh/auth/headless/members

Source: @slices.sh/auth/src/headless/members/bulk/refusal.tsx

Members.Bulk.Errorcontent · <p>

Members.Bulk.Error renders a p element.

Required scope

Members.Bulk.Error requires Root.

Props

2 documented props · Native <p> attributes supported

Members.Bulk.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

Members.Bulk.Error from @slices.sh/auth/headless/members

Source: @slices.sh/auth/src/headless/members/bulk/error.tsx

Members.Transfer.Rootscope

Members.Transfer.Root provides state to the parts inside it.

Props

1 documented props

Members.Transfer.Root props
Prop	Type	Default
`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

Members.Transfer.Root from @slices.sh/auth/headless/members

Source: @slices.sh/auth/src/headless/members/transfer/root.tsx

Members.Transfer.Requestaction · <button>

Members.Transfer.Request renders a button element.

Required scope

Members.Transfer.Request requires a member row.

Members.Transfer.Request requires Root.

Props

2 documented props · Native <button> attributes supported

Members.Transfer.Request 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

Members.Transfer.Request from @slices.sh/auth/headless/members

Source: @slices.sh/auth/src/headless/members/transfer/request.tsx

Members.Transfer.Dialogcontent

Members.Transfer.Dialog renders content from its current scope.

Required scope

Members.Transfer.Dialog requires Root.

Props

2 documented props

Members.Transfer.Dialog 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

Members.Transfer.Dialog from @slices.sh/auth/headless/members

Source: @slices.sh/auth/src/headless/members/transfer/dialog.tsx

Members.Transfer.Contentcontent

Members.Transfer.Content renders content from its current scope.

Required scope

Members.Transfer.Content requires Root.

Props

2 documented props

Members.Transfer.Content 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

Members.Transfer.Content from @slices.sh/auth/headless/members

Source: @slices.sh/auth/src/headless/members/transfer/content.tsx

Members.Transfer.Targetcontent · <span>

Members.Transfer.Target renders a span element.

Required scope

Members.Transfer.Target requires Root.

Props

2 documented props · Native <span> attributes supported

Members.Transfer.Target props
Prop	Type	Default
`children` Content rendered inside this part.	`ReactNode \| ((state: { name: string \| null; email: string \| null }) => 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

Members.Transfer.Target from @slices.sh/auth/headless/members

Source: @slices.sh/auth/src/headless/members/transfer/target.tsx

Members.Transfer.Confirmaction · <button>

Members.Transfer.Confirm renders a button element.

Required scope

Members.Transfer.Confirm requires Root.

Props

2 documented props · Native <button> attributes supported

Members.Transfer.Confirm props
Prop	Type	Default
`children` Content rendered inside this part.	`ReactNode \| ((state: { pending: boolean; retryAfter: number }) => 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

Members.Transfer.Confirm from @slices.sh/auth/headless/members

Source: @slices.sh/auth/src/headless/members/transfer/confirm.tsx

Members.Transfer.Cancelaction · <button>

Members.Transfer.Cancel renders a button element.

Required scope

Members.Transfer.Cancel requires Root.

Props

2 documented props · Native <button> attributes supported

Members.Transfer.Cancel 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

Members.Transfer.Cancel from @slices.sh/auth/headless/members

Source: @slices.sh/auth/src/headless/members/transfer/cancel.tsx

Members.Transfer.Partialcontent · <p>

Members.Transfer.Partial renders a p element.

Required scope

Members.Transfer.Partial requires Root.

Props

2 documented props · Native <p> attributes supported

Members.Transfer.Partial 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

Members.Transfer.Partial from @slices.sh/auth/headless/members

Source: @slices.sh/auth/src/headless/members/transfer/partial.tsx

Members.Transfer.Errorcontent · <p>

Members.Transfer.Error renders a p element.

Required scope

Members.Transfer.Error requires Root.

Props

2 documented props · Native <p> attributes supported

Members.Transfer.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

Members.Transfer.Error from @slices.sh/auth/headless/members

Source: @slices.sh/auth/src/headless/members/transfer/error.tsx

User.Rootscope

Says which auth the User parts below read, and whether they may do without it. The parts need no root: left out, they read the nearest auth root's config, or "default", and render nothing without auth. `<User.Root enabled="optional">` is for the one who wants that said in the code.

Props

3 documented props

User.Root props
Prop	Type	Default
`config` The auth config, a slug from the registry (`services/auth/<config>.config.ts`). The nearest root's, else `"default"`, when left out.	`string`	`—`
`enabled` Left out or `true`: required, and missing auth throws. `"optional"`: renders its children and every part inside degrades without auth. `false`: off. A capability name such as `"methods: password"`: requires auth with it.	`Enabled`	`—`
`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

User.Root from @slices.sh/auth/headless/user
User.Root from @slices.sh/auth/headless/passkeys
User.Root from @slices.sh/auth/headless/two-factor

Source: @slices.sh/auth/src/headless/user/root.tsx

Organization.Activegate

Item is a <button> repeated once per organization with { active, pending }; clicking makes it active. Personal switches to the personal account. Active renders its children with the active organization in scope, and nothing on the personal account; None is its mirror, once the answer is in. Switcher holds the searchable list: Switcher.Surface maps onto a Popover or a Sheet, Switcher.Options, Input, List, Item, Empty and Error search and list, and Switcher.Shortcuts binds keys to switch.

Capability: organizations

Props

1 documented props

Organization.Active props
Prop	Type	Default
`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

Organization.Active from @slices.sh/auth/headless/organization

Source: @slices.sh/auth/src/headless/organization/active.tsx

When something is missing

No service configuration: Install the auth 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 →