Skip to main content
ninna-ui
Use Case

Build a Settings Page with React and Tailwind CSS v4

Build a clean, accessible settings page with tabbed sections, form controls, toggle switches, and a save bar — using Ninna UI components.

Settings pages are harder than they look

A settings page seems simple, but it involves tabs, form state, validation, toggle switches, and a save mechanism. Getting all of this accessible — keyboard navigation through tabs, proper form labels, focus management — is where most implementations fall short. Ninna UI handles the accessibility layer so you can focus on the data.

1. Tabbed sections with Tabs

Use the Tabs component from @ninna-ui/navigation for section switching. Arrow-key navigation and ARIA tab semantics are built in:

import { Tabs } from "@ninna-ui/navigation";

<Tabs defaultValue="profile">
  <Tabs.List>
    <Tabs.Trigger value="profile">Profile</Tabs.Trigger>
    <Tabs.Trigger value="security">Security</Tabs.Trigger>
    <Tabs.Trigger value="notifications">Notifications</Tabs.Trigger>
  </Tabs.List>
  <Tabs.Content value="profile">{/* Profile form */}</Tabs.Content>
  <Tabs.Content value="security">{/* Security settings */}</Tabs.Content>
  <Tabs.Content value="notifications">{/* Notification prefs */}</Tabs.Content>
</Tabs>

2. Form controls

Use Field, Input, Select, and Switch for accessible form controls. Each Field renders a proper label association:

import { Field, Input, Select, Switch } from "@ninna-ui/forms";
import { VStack } from "@ninna-ui/layout";

<VStack gap="4">
  <Field label="Display Name"><Input defaultValue="Alice" /></Field>
  <Field label="Email"><Input type="email" defaultValue="alice@example.com" /></Field>
  <Field label="Timezone">
    <Select defaultValue="utc">
      <Select.Item value="utc">UTC</Select.Item>
      <Select.Item value="est">EST</Select.Item>
    </Select>
  </Field>
  <Field label="Email Notifications" hint="Receive product updates">
    <Switch defaultChecked />
  </Field>
</VStack>

3. Sticky save bar

Use a sticky positioned container at the bottom of the page for the save/cancel actions:

import { Button } from "@ninna-ui/primitives";
import { HStack } from "@ninna-ui/layout";

<div className="sticky bottom-0 border-t border-base-200 bg-base-100/95 backdrop-blur p-4">
  <HStack justify="end" gap="3">
    <Button variant="ghost">Cancel</Button>
    <Button color="primary">Save Changes</Button>
  </HStack>
</div>

Component Docs

TabsSwitchFieldInputSelect

FAQ