Radix UI profile blocks.

They are 100 React profile pages and cards, each for a kind of person or trade, in 10 groups: visual portfolios, writing and words, credentials and proof, schedules and booking, quotes and services, talks and broadcasts, research and learning, team dashboards, personal stats, people and community. A profile here is a working section: it shows the person and lets a visitor do something with it, such as book a time, work out an estimate or filter a portfolio.

Therapist Booking Profile steps through a session, a time and a confirmation inside the profile, and Electrician Services Estimate Profile works a job estimate out from the services added. Freelancer Rates Budget Profile turns a budget into hours per skill, and Photographer EXIF Inspector Profile pairs a photo grid with the details of the picked frame.

In Developer Card Profile, Activity Timeline Profile and the Team dashboards and Personal stats groups the profile is a feed or a set of figures. The sample figures are typed at the top of each file and the totals, shares and streaks are worked out from them.

Every person, clinic, repository and figure in these demos is an invented sample record, typed as data at the top of the file, and avatars are initials rather than photos. Buttons such as Request session or Start a project stay in the page and say so, because no backend is attached.

Replace the typed record at the top of the file (for example `PERSON`, `REPOS` and `LANGUAGES` in Developer Card Profile) with the user's data from your API, then render the component with it. Lists, counts and totals are derived from that data, so they update without further edits.

In-Place Edit Profile has no Save button. Each field is an editable value: Enter commits it, Escape puts the old text back, and every commit adds a line to Recent edits with an Undo. Send your update request from the place where a field commits, and roll back with the Undo path if it fails.

Therapist Booking Profile offers five days and their times from a typed moment, then the foot's Request session ends in the page and says nothing was sent. Replace the typed days with your availability endpoint and send the chosen session, time and plan from that final action.

In Developer Card Profile the Follow button and the Star buttons change local state, moving the counts by one. Call your follow and star endpoints from those handlers and use the response, or an optimistic update, to set the counts.

Electrician Services Estimate Profile works the total from typed prices, a call-out fee that is waived on a big enough job, and an emergency surcharge switch. Edit those prices and times and the estimate, the total and the visit length follow. It is an estimate rather than a quote, so keep that wording if you ship it.

This page lists 100 of the category's 100 profile blocks for React on Radix UI. The category comes in React (Base UI, React Aria, Ark UI and Radix UI), Vue, Svelte and Solid; the framework and UI library pickers at the top of any block's page switch between them.

The profile blocks here are written on Radix UI primitives; the layout, the copy and the theme tokens are the same on every base, and the install path follows it (/r/radix/profile-accountant-dashboard.json). The other bases are one picker away from /profile-block/radix.

Each block is TypeScript and Tailwind CSS v4, styled with your theme's tokens, and imports our components (installed with it) on Radix UI. Icons come from lucide-react.

Open a block, copy its command and run it: `npx shadcn@latest add` with the block's registry URL, such as /r/radix/profile-accountant-dashboard.json for Accountant Filing Deadlines Profile. The code is copied into your project and it's yours to edit.

The block's file and the components it imports: Accountant Filing Deadlines Profile brings Avatar, Badge, Button, Checkbox, Empty, Guides and Toggle Group, installed before it. Nothing else changes in your project.

Use the filters above the grid: 10 kinds of profile block, led by team dashboards (16), personal stats (13), quotes and services (12) and research and learning (11), and sort by popular or name. A good first look: Accountant Filing Deadlines Profile, Activity Timeline Profile and AI Engineer Latency Budget Profile. Each card opens the block's live page.

Every block draws the same page column and side rails with a top rule only (the Guides component), so a profile block lines up with the one above and below it. Stack one per section and the rails read as a single drawing; pick across the what it shows and hiring kinds.

Open its page and use the full-screen viewer (/view/profile/radix/accountant-dashboard) or the device-width previews. Every preview is free for everyone; only the code needs Pro.

Each profile block uses semantic HTML: one heading level, real lists and labelled controls. Interactive parts sit on Radix UI, a headless library that follows the WAI-ARIA patterns, and the layouts use logical properties so they hold in right-to-left languages.

Yes. They use semantic tokens only (bg-card, text-muted-foreground), never palette colors, so they follow your preset, radius and dark mode. The primary color marks one action per block and is never a background.

No animation library: the profile blocks' motion is CSS (transitions, entrance animations and SVG), and it stands still under prefers-reduced-motion.

The previews are free for everyone. The code of all 100 profile blocks is Pro, as is every block: Pro unlocks the code, the install command and the MCP.

Only with a Team or Organization license: client work, SaaS products and anything your users pay for. The Individual license is for personal, non-commercial projects. See the license page for the full terms.

You keep using what you installed in your existing projects, but get no new downloads or updates, and the MCP stops answering. A Lifetime license includes all future updates.

No. You can use them in your own End Products, but not redistribute the code or designs on their own, or in a UI library, kit, template or website builder.

With Pro, yes: the MCP server (22 tools, one personal URL from /dashboard/mcp) lets your agent search_blocks for a profile block, read it with get_block and install it on your React on Radix UI stack.

Pass `category: "profile"` to search_blocks to search only the 100 profile blocks, or to list_blocks for the 10 groups with their blocks. get_block then returns one with its install command.

plan_page plans a page as a stack of blocks for a brief. Pass `sections` with category ids, such as ["hero", "profile", "footer"], to force the order; each section gets a pick and two alternatives, and get_block installs the stack.