Skip to content

Skip to Content

Components Landing Introduction

Registry Themes

Blocks All blocks Dashboard Dashboard 01 Sign in Dashboard management Profile settings Kanban board Tasks Data table Calendar Settings dialog Notifications Command centre Pipeline File manager Email inbox Conversations Sidebar Desktop

Accordion Alert Aspect ratio Auth Auto height Avatar Avatar group Badge Breadcrumb Bubble Button Calendar Card Carousel Chat Checkbox Code block Collapsible Color picker Color swatches Combobox Command menu Confirmation dialog Context menu Copy button Countdown Date picker Diagram Dialog Disclosure Drawer Dropdown menu EmptyState Field and inline validation Fieldset Form Highlight text Hotkey recorder Hover card Image zoom Inline edit Input group Inset group Item Kanban Keyboard shortcuts Knob List Mention input Message Message Scroller MultiStepForm Navigation menu Page transition Pagination Pinned list Popover Preview card Progress Reorderable tabs Reveal Search input Segmented control Select Separator Sheet Sidebar Skeleton Slider Spinner Stepper Switch Table Tabs Tag input Theme toggler Time picker Timeline Toast Toggle Toggle group Tooltip User menu

Examples API reference

Platform

Palette

Dark · macOS · Menlo

Blocks

Profile settings

A profile page with a photo, contact details and tabbed settings

Profile settings

Manage your account and how the library greets you.

Profile picture

A photo, or your initials when there is none.

Personal details

The name and contact the account answers to.

First nameSurnameEmailPhone

Block source on GitHubapps/docs/src/components/docs/blocks.tsx

Edit this page on GitHubapps/docs/content/docs/blocks/profile-settings.mdx

Dashboard management

A settings console with a workspace rail and one column of service sections

Kanban board

A hunter's contract board with counted columns