Krizaka
Documentation

Settings layout

Settings: the sections on the side (a row of chips that scrolls on a phone) and the current section's forms, each a titled card with its own save.

WebBetaLayouts

Web only — React, from @krizaka/ui/settings-layout. Beta: its API may still change in a minor version.

When to use

  • Account, workspace and administration settings.
  • Any long form that splits into independent groups.

When not to use

  • For a step-by-step setup the user follows once.Use instead: Stepper
  • For one small form.Use instead: Field

Installation

Install

npm install @krizaka/ui @krizaka/tailwind @krizaka/tokens tailwindcss

Styles

@import "tailwindcss";
@import "@krizaka/tailwind";
@import "@krizaka/ui/tailwind.css";

Import

import { SettingsLayout, SettingsSection } from "@krizaka/ui/settings-layout";

Examples

Account settings

Profile and notifications, each with its own save; the sections as chips on a phone.

Settings

Your profile, what we tell you and how you are paid.

Profile

What your fans see.

Notifications

Only what you ask for.

A fan unlocks a video
An auction ends
Weekly summary by email

One section per page

A workspace's settings, the current section marked.

Workspace

Props

SettingsLayout

A settings screen: sections on the left (chips on a phone), forms on the right.

PropTypeDefaultDescription
navrequiredreadonly SettingsNavItem[]—The sections.
navLabelrequiredstring—The navigation's accessible name (Settings sections).
descriptionReactNode—One sentence under it.
linkAsElementType<any, keyof IntrinsicElements>aThe app's link component for the sections (Next's Link); an <a> otherwise.
titleReactNode—The screen's title (Settings).

SettingsSection

A group of settings: a titled card with its fields and its own save.

PropTypeDefaultDescription
titlerequiredReactNode—The section's title: it names the region (and is its anchor's target when id is set).
descriptionReactNode—What these settings change, in one sentence.
footerReactNode—At the foot: the section's own save (a Button), a note.

Accessibility

  • The sections are a nav named by navLabel; the current one has aria-current (page or location).
  • Each section is a section named by its h2.

Best practices

  • One save per section, at its foot: a change never waits for another.
  • Sections as pages (/settings/billing) or as anchors of one long page (#billing).
  • Say in the description what the section changes for the user.

Generated from the code of @krizaka/ui 2.10.0: its meta.ts, its examples and its types.Edit this documentation on GitHub

Marketing layout

A site's page: the link that skips to the content, the floating bar, the page made of a PageHero and Sections in one frame, the footer.

Split view

A list and its open item: two panes on a desktop; on a phone one at a time, the open item with the way back — chosen by showDetail, from the address.

On this page

When to useInstallationExamplesPropsAccessibilityBest practicesRelated components