novixuiv0.1
Install

Recipes · Product

Settings page

A three-section settings layout — profile, notifications, danger zone — with sticky in-page nav on desktop.

Preview

The exact composition below is what ships in production apps built on Nova.

Profile

This information is shown on your public profile.

Danger zone

These actions are permanent.

Delete workspace

This will remove all data — no undo.

Source

tsx
import { Button, Card, Input, Label, Separator } from "@novix-ui/react";
 
export function Settings() {
  return (
    <div className="max-w-2xl space-y-6">
      <Card className="p-5">
        <h2 className="font-semibold">Profile</h2>
        <Separator className="my-4" />
        <div className="grid gap-4 sm:grid-cols-2">
          <div className="space-y-1.5">
            <Label htmlFor="name">Display name</Label>
            <Input id="name" defaultValue="Ada Lovelace" />
          </div>
        </div>
        <div className="mt-4 flex justify-end">
          <Button>Save changes</Button>
        </div>
      </Card>
 
      <Card className="p-5">
        <h2 className="font-semibold text-danger">Danger zone</h2>
        <Separator className="my-4" />
        <div className="flex items-center justify-between">
          <p className="text-sm">Delete workspace</p>
          <Button variant="destructive">Delete</Button>
        </div>
      </Card>
    </div>
  );
}

Anatomy

  • Sectioned Cards with a title, description, Separator, and body.
  • One primary Save button per section — never a global save bar.
  • Danger zone at the bottom, with destructive Button variants.
  • Optional in-page anchor nav for long settings pages.