Account Card: free React component

Install

Run this in any project set up for the shadcn CLI. It copies the Account Card source into your components folder, so the code is yours to change.

npx shadcn@latest add https://devl.dev/r/account-card.json

Use it

Import it and render it. Every prop has a typed default, so it works straight away, and you pass your own data when you’re ready.

import { AccountCard } from "@/components/account-card";

export default function Page() {
  return <AccountCard />;
}

Built with

A free React component in the Workspace collection, written in TypeScript with Tailwind CSS on coss ui. MIT licensed.

coss ui: kbd, segmented-control
npm: lucide-react, motion

Props

Read from the Account Card source. Everything is optional unless it says required.

Prop	Type	Default
userrequired	{ name: string; email: string; initials: string; plan?: string }	—
itemsrequired	AccountCardItem[]	—
steps	AccountCardStep[]	[]
theme	ThemeChoice	—
onThemeChange	(theme: ThemeChoice) => void	—
onSelect	(id: string) => void	—
onSignOut	() => void	—
className	string	—

More in Workspace

114

Launcher

A search button that grows into a keyboard launcher, with grouped actions and their shortcuts, your recent picks, a highlight that glides as you arrow through and pages you can step into.

115

File Tree

A project tree that feels like your editor: arrow keys to open folders, git changes marked in colour, F2 to rename and drag to tidy things up.

116

Week Agenda

Your week on one strip and your day on a timeline, where you can drag a meeting to a new time and see straight away if it clashes with another.

117

Task Card

A task card you can read at a glance: checklist progress, who's on it, and a due date that warms from grey to amber to red as it slips.