kagadmodyaa

Settings 03

New
Settings 02Inbox 01

Billing settings: a plan card, usage meters against the plan's limits, a masked payment method you can replace, an invoice list with downloads, and a change-plan dialog that compares plans and explains proration.

Installation

pnpm dlx shadcn@latest add https://kagadmodyaa.vercel.app/r/settings-03.json

Needs a React + Tailwind project set up with shadcn. Copies the block's files into your project, along with the components it uses, so you can edit all of it.

Files

What the command adds to your project, and where.

  • app/settings/billing/page.tsx

    The page itself, at the route it is meant for. Move or rename it to suit your app.

  • components/settings-03/billing-data.ts

    A component the page imports. Edit it freely.

  • components/settings-03/billing-settings.tsx

    A component the page imports. Edit it freely.

  • components/settings-03/change-plan-dialog.tsx

    A component the page imports. Edit it freely.

  • components/settings-03/icons.tsx

    A component the page imports. Edit it freely.

  • components/settings-03/invoices-table.tsx

    A component the page imports. Edit it freely.

  • components/settings-03/payment-method.tsx

    A component the page imports. Edit it freely.

  • components/settings-03/plan-card.tsx

    A component the page imports. Edit it freely.

  • components/settings-03/usage-meters.tsx

    A component the page imports. Edit it freely.

It also installs the components it is built from, unless you already have them: Avatar, Badge, Button, Dialog, Input, Label, Progress, Radio Group, Table, Toggle Group.

The block uses one accent colour. Installing adds a --brand variable to your global CSS (an existing one is left alone); change it to match your product.

Links, copy and the product name are placeholders; swap in your own. Where a block has a form, its submit handler is a stub for your own request.

More in Settings

See all 3 Settings blocks