New

RoleSelector

Account type picker with icon cards for Developer, Designer, Team Lead with descriptions and selection state.

Auth & Onboardingroleonboardingselectionaccount-type

Dependencies

shadcn/ui components needed:

npx shadcn@latest add lucide-react

How to use this component

Copy the code below into your project. Make sure you have the required shadcn/ui dependencies installed. Then import and use the component in your pages or layouts.

Code

1"use client";
2
3import { useState } from "react";
4import { Code2, Figma, Users, Check, ArrowRight } from "lucide-react";
5
6const roles = [
7  { id: "developer", label: "Developer", description: "Build and ship products with code. Access APIs, CLIs, and dev tools.", icon: Code2, gradient: "from-blue-500 to-cyan-500" },
8  { id: "designer", label: "Designer", description: "Craft beautiful experiences. Access design systems and prototyping tools.", icon: Figma, gradient: "from-pink-500 to-rose-500" },
9  { id: "lead", label: "Team Lead", description: "Manage your team and projects. Access analytics and admin dashboards.", icon: Users, gradient: "from-amber-500 to-orange-500" },
10];
11
12export default function RoleSelector() {
13  const [selected, setSelected] = useState<string | null>(null);
14
15  return (
16    <div className="mx-auto w-full max-w-lg rounded-2xl border border-zinc-200 bg-white p-8 shadow-xl dark:border-zinc-800 dark:bg-zinc-950">
17      <div className="mb-6 text-center">
18        <h2 className="text-2xl font-bold tracking-tight text-zinc-900 dark:text-zinc-50">What describes you best?</h2>
19        <p className="mt-1 text-sm text-zinc-500 dark:text-zinc-400">We&apos;ll personalize your experience based on your role</p>
20      </div>
21
22      <div className="space-y-3">
23        {roles.map((role) => (
24          <button
25            key={role.id}
26            onClick={() => setSelected(role.id)}
27            className={`flex w-full items-start gap-4 rounded-xl border-2 p-4 text-left transition-all ${
28              selected === role.id
29                ? "border-violet-500 bg-violet-50/50 shadow-md shadow-violet-500/10 dark:bg-violet-900/10"
30                : "border-zinc-100 hover:border-zinc-200 hover:bg-zinc-50/50 dark:border-zinc-800 dark:hover:border-zinc-700 dark:hover:bg-zinc-900/50"
31            }`}
32          >
33            <div className={`flex h-11 w-11 shrink-0 items-center justify-center rounded-lg bg-gradient-to-br ${role.gradient}`}>
34              <role.icon className="h-5 w-5 text-white" />
35            </div>
36            <div className="flex-1">
37              <h3 className="text-sm font-semibold text-zinc-900 dark:text-zinc-100">{role.label}</h3>
38              <p className="mt-0.5 text-xs text-zinc-500 dark:text-zinc-400">{role.description}</p>
39            </div>
40            <div className={`flex h-6 w-6 shrink-0 items-center justify-center rounded-full border-2 transition-all ${
41              selected === role.id ? "border-violet-500 bg-violet-500" : "border-zinc-300 dark:border-zinc-600"
42            }`}>
43              {selected === role.id && <Check className="h-3.5 w-3.5 text-white" />}
44            </div>
45          </button>
46        ))}
47      </div>
48
49      <button disabled={!selected} className="mt-6 flex w-full items-center justify-center gap-2 rounded-lg bg-violet-600 px-4 py-2.5 text-sm font-semibold text-white shadow-md transition-all hover:bg-violet-500 active:scale-[0.98] disabled:opacity-50">
50        Continue <ArrowRight className="h-4 w-4" />
51      </button>
52    </div>
53  );
54}