3 variants

Settings

The account screens every app needs. A profile that saves only when changed, billing with usage and invoices, and a team you can invite to.

Profile

Name, username and email with an avatar, a save button that wakes only on a change, and a saved note that collapses in.

page.tsx

import { SettingsProfile } from "@/components/blocks/settings-profile";

export default function Page({ user }) {
  return <SettingsProfile initial={user} onSave={saveProfile} />;
}

"use client";

import { type FormEvent, useState } from "react";
import { FormMessage, SubmitButton, TextField } from "@/components/registry/form-kit";
import { cn } from "@/lib/utils";

export interface ProfileValues {
  name: string;
  email: string;
  username: string;
}

93 more lines ship with an easeUI Pro license.

Buy a license

Install

$ bunx --bun shadcn add @easeui-pro/settings-profile

Billing

The current plan, usage against it, and every invoice in a table that scrolls sideways on a phone.

Current plan

Pro

$99 per year · renews Mar 14, 2027

Change plan

API calls this month7,100 / 10,000

Chat4,200Embeddings2,100Vision800

Invoices

Date	Amount	Status
Sep 14, 2026	$99.00	Paid
Mar 14, 2026	$99.00	Paid
Sep 14, 2025	$99.00	Failed

page.tsx

import { SettingsBilling } from "@/components/blocks/settings-billing";

export default function Page({ plan, invoices }) {
  return <SettingsBilling plan={plan} invoices={invoices} />;
}

"use client";

import { Download } from "lucide-react";
import { SECONDARY_BUTTON } from "@/components/registry/form-kit";
import { type UsageCategory, UsageMeter } from "@/components/registry/usage-meter";
import { cn } from "@/lib/utils";

export interface Invoice {
  id: string;
  date: string;
  amount: string;
  status: "paid" | "due" | "failed";

89 more lines ship with an easeUI Pro license.

Buy a license

Install

$ bunx --bun shadcn add @easeui-pro/settings-billing

Team

Invite by email with a role, change roles, and remove people; rows fold in and out instead of jumping.

Team

3 of 5 seats

Ada Lovelace
ada@acme.com
Owner
Grace Hopper
grace@acme.com
Alan Turing
alan@acme.com

page.tsx

import { SettingsTeam } from "@/components/blocks/settings-team";

export default function Page({ members }) {
  return <SettingsTeam members={members} seats={5} onInvite={invite} onRemove={remove} />;
}

"use client";

import { X } from "lucide-react";
import { type FormEvent, useId, useState } from "react";
import { Collapse, INPUT, SubmitButton } from "@/components/registry/form-kit";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/registry/select";
import { cn } from "@/lib/utils";

export type TeamRole = "Owner" | "Admin" | "Member";

export interface TeamMember {
  id: string;

176 more lines ship with an easeUI Pro license.

Buy a license

Install

$ bunx --bun shadcn add @easeui-pro/settings-team