For AI Agents
Hand your agent this brief or the ReUI MCP, not a screenshot. Installs with a ReUI Pro or Ultimate license.
Best for: A single Card profile with a date and half hour slot availability picker, specialty chips and an available to hire switch
When to use
- New record entry: an invoice with line items, a product, an app launch, an onboarding plan or a member invite
- Editing a record already on file, such as a user profile, a support ticket or a business verification
- Admin configuration pages for hosted checkout, sign-in methods and lockout rules, or API keys
When not to use
- Booking a meeting for invited members with a date, start and end times: use the Create Schedule block
- Personal details in one card with a verified email badge, a phone input and a timezone: use the Personal Profile block
- An account area that swaps team, notification and billing panels from a side rail or tabs: use the Profile blocks
- A list of toggles for notification channels, app integrations or workspace options: use the Settings blocks
- A create, invite or connect flow that opens over the current page in a modal: use the Dialog blocks
Agent notes
- Replace
DEFAULT_PROFILE_FORM_VALUES,SPECIALTY_OPTIONSandAVAILABILITY_TIME_SLOTS, whose open and blocked slots repeat for every date handleSubmitreads no field, and name, company, phone, specialties and the hireSwitchstay uncontrolled throughdefaultValueordefaultChecked- Cancel only shows a discarded toast through
showProfileToastand restores nothing, and the photo stays a localuseFileUploadpreview - Each submit handler calls
preventDefaultand sends no request; post the values to your API from it - Save feedback calls
toastfromsonner; mount the sonner Toaster once in your layout or no message shows - Each block sets its own
min-h-svhwrapper, padding and max width in page.tsx or its root component; drop them inside an app shell
Third-party API docs
- date-fns v4: docs
- Sonner v2: API reference, docs
- React DayPicker v9: API reference, docs, through shadcn Calendar
https://web.dev.reui.io/blocks/application/form/form-1.mdget_block("form-1")npx shadcn@latest add @reui/form-1Shadcn Profile Settings Block
Profile settings card form with completion badge and date-plus-time availability picker. Part of the ReUI Shadcn Application Form blocks collection.
Profile settings Card form: avatar upload, birth date and availability date-time Calendar pickers, multi-select specialty Combobox chips, visibility Select, available-to-hire Switch, completion Badge. For account settings, edit profile, preferences.
It is composed from Avatar, Badge, Button, Calendar, Card, Combobox, Field, Input, and more, so every part of it is a primitive you can restyle with your own design tokens.
What You Can Build With the Profile Settings Block
- Install it with the ReUI registry command in the toolbar above, then swap the placeholder content, data wiring, and business logic for your own.
- Compare it across all eight ReUI styles and both the Base UI and Radix bases in the customizer before committing to one direction.
- Combine it with the other Shadcn Application Form blocks to assemble a full screen instead of a single section.
All Shadcn Application Form Blocks
The rest of this category, each on its own page with a live preview, the components it is built from, and the install command.
- Business Verification Business Verification Review Page with Editable Detail Sections and Dialog Forms
- Checkout Setup Hosted checkout setup form with label-and-control rows, Select dropdowns, and checkbox groups
- Invoice Creator Invoice creator form with editable line-items table and live discount, tax, and total summary
- Auth Method Settings Authentication settings form with line tabs for email, phone, password, passkey, and lockout policy
- Member Profile Admin Tabbed user profile settings form with sticky audit rail and activity heatmap
- Ticket Properties Inline-editable ticket details panel with per-row save, status and SLA badges, tags and owner chips
- API Keys Manager API keys management panel with per-stack env snippet quick-copy and reveal, rotate, revoke rows
- Role Permission Invite Enterprise member invite form with searchable role permission tree and access guardrails
- Customer Onboarding Customer onboarding intake form in a Card with labeled rows and multi-owner combobox
- Deploy App Setup New App Launch Form with Gradient Summary Banner and Label-Control Rows
- New Product Form Ecommerce product creation form with image upload, pricing, inventory, and collections combobox
Related Shadcn Application Block Categories
- App Shell (35) App shell layouts with sidebar, rail, or top bar navigation for dashboards, settings panels, and multi-page apps.
- Auth (20) Login, register, forgot password, and two-factor authentication page layouts.
- Card (43) Card components for content display, data summaries, and interactive elements.
- Dashboard (8) Dashboard components and layouts that combine stats, charts, and tables into a complete overview screen.
- Dialog (14) Dialog components for modal windows, alerts, confirmations, and content overlays.
- Empty State (14) Empty state screens and no-data placeholders with recovery actions, onboarding prompts, and contextual guidance.
All Shadcn Block Groups
Browse the full ReUI Shadcn blocks library by product surface. Each group bundles category-level blocks you can mix and match across your project.
- Shadcn Application Blocks (303) Browse 303 Shadcn Application blocks across 23 categories.
- Shadcn Data Grid Blocks (47) Browse 47 Shadcn Data Grid blocks across 9 categories.
- Shadcn Charts Blocks (52) Browse 52 Shadcn Charts blocks across 10 categories.
- Shadcn Solutions Blocks (76) Browse 76 Shadcn Solutions blocks across 11 categories.
- Shadcn AI & Agents Blocks (22) Browse 22 Shadcn AI & Agents blocks across 3 categories.
- Shadcn eCommerce Blocks (87) Browse 87 Shadcn eCommerce blocks across 13 categories.
- Shadcn Marketing Blocks (67) Browse 67 Shadcn Marketing blocks across 8 categories.
Frequently Asked Questions
When should I use the Profile Settings block?
Use it for a single Card profile with a date and half hour slot availability picker, specialty chips and an available to hire switch.
The Form category fits:
- New record entry: an invoice with line items, a product, an app launch, an onboarding plan or a member invite
- Editing a record already on file, such as a user profile, a support ticket or a business verification
- Admin configuration pages for hosted checkout, sign-in methods and lockout rules, or API keys
For booking a meeting for invited members with a date, start and end times, use the Create Schedule block. For personal details in one card with a verified email badge, a phone input and a timezone, use the Personal Profile block. For an account area that swaps team, notification and billing panels from a side rail or tabs, use the Profile blocks. For a list of toggles for notification channels, app integrations or workspace options, use the Settings blocks. For a create, invite or connect flow that opens over the current page in a modal, use the Dialog blocks.
What is the Profile Settings block built with?
Can I restyle the Profile Settings block?
How should I use Shadcn form blocks in a real project?
Start building with ReUI Pro today.
Every Pro block, every style, and every future addition, with one license for unlimited projects.
From $249, once. Lifetime updates.