Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Profile blocks

Pro

Virtual Assistant Weekly Task Bundle Profile Block for React

A virtual assistant profile as a weekly task bundle: eight recurring tasks with hours a week on checkboxes, the total mapped to the nearest of three packages with its monthly price, hours to spare and response time, and a Request this bundle button.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

Let a client see what a few hours of help a week would cost, with this virtual assistant profile for React with Base UI. A compact header holds the title and one sentence, and the hairline frame under it opens on the assistant: initials, name, role and working days. A list holds eight recurring tasks (inbox triage, scheduling, travel booking, bookkeeping and more), each with the hours it takes a week and an Include Checkbox that spans its row. The hours add up and map to the smallest of three packages that holds them, shown as three cells on shared hairlines (Starter 10 h, Growth 20 h and Full 40 h) with the best fit marked in words and a rule under it. One line says it plainly, "Fits Growth, 3 h spare", and a Data List gives the monthly price and a typed response time. Over 40 hours it says by how much; with nothing ticked it asks for a task. The foot, ruled by Guides, holds a polite status line and a Shine Button that requests the bundle. It's built from Checkbox, Data List, Badge, Avatar, Shine Button and Guides, with a CSS entrance only. For a virtual-assistant marketplace, a freelancer's rate card or any service sold in blocks of hours.

FAQ

How do I fill it with my own tasks and packages?

Edit TASKS: each has an id, a name and the hours it takes a week. PACKS lists the packages with their hours, monthly price and response time, smallest first, and TASKS_AT_LOAD sets what is ticked when the page opens. The total, the best fit, the spare hours and the verdict are worked out from those, so nothing is typed twice. Keep the packages in ascending order of hours, because the best fit is the first one that holds the total.

How is the package chosen?

The smallest package whose hours are at least the total. Seventeen hours fits Growth with three to spare; twenty-one hours moves to Full. Over forty hours no package holds it, so the line says by how many hours and the request refuses until you trim. The cells show which is the best fit in words as well as with a stronger rule, so it never rests on weight alone.

What does Request this bundle do?

Nothing leaves the page. With a valid bundle the status line says Requested in this demo and that nothing was sent; with nothing ticked it asks for a task, and over 40 hours it says how many to trim. To make it real, send the ticked tasks and the package to your own booking API in the submit handler and show its answer in the same line.

Are the prices and times real?

No. Hours, prices and response times are typed samples, and the note under the data list says so. Packages are described as billed monthly, but no billing exists here.

Is it accessible?

Each checkbox is named "Include" followed by its task and described by its hours, and the hit area spans the whole row. The three packages are a list, the verdict is real text, and the status line is a polite live region present from the start. Prices keep their order in a right-to-left layout.

How does it look on a phone?

The tasks come first, each on one line with its hours and checkbox, then the bundle with the three packages side by side in narrower cells. The foot with the request button stays pinned to the bottom of the screen while the panel scrolls, and settles at the panel's end from the medium breakpoint. The working-days badge is hidden below the small breakpoint.

All 100 profile blocks