A blocking panel centred over the page: a small base — trigger, overlay, modal, dialog, header, actions — and 51 compositions pairing 1:1 with the sheet.
Modals
A blocking panel centred over the page: a small base — trigger, overlay, modal, dialog, header, actions — and 51 compositions pairing 1:1 with the sheet.
Specimen
Guidelines
Code
Demo
hero
Blog post published
This blog post has been published. Team members will be able to edit this post and republish changes.
Type*
Header align*
Actions layout*
import { CheckCircle } from "@untitledui/icons";
import { Heading as AriaHeading } from "react-aria-components";
import {
Dialog,
DialogTrigger,
Modal,
ModalActions,
ModalHeader,
ModalOverlay,
} from "@/components/application/modals/modal";
import { Button } from "@/components/base/buttons/button";
import { FeaturedIcon } from "@/components/foundations/featured-icon/featured-icon";
<DialogTrigger>
<Button color="secondary">Open the modal</Button>
<ModalOverlay isDismissable>
<Modal className="sm:max-w-100">
<Dialog>
{({ close }) => (
<>
<ModalHeader
onClose={close}
paddingBottom
>
<div className="relative w-max">
<FeaturedIcon color="success" size="md" theme="modern" icon={CheckCircle} />
</div>
<div className="flex flex-col gap-0.5">
<AriaHeading slot="title" level={2} className="text-md text-primary font-semibold">
Blog post published
</AriaHeading>
<p className="text-tertiary text-sm">This blog post has been published. Team members will be able to edit this post and republish changes.</p>
</div>
</ModalHeader>
<ModalActions>
<Button color="secondary" size="md" onClick={close}>
Cancel
</Button>
<Button color="primary" size="md" onClick={close}>
Confirm
</Button>
</ModalActions>
</>
)}
</Dialog>
</Modal>
</ModalOverlay>
</DialogTrigger>
Five of the thirteen ceilings the family draws, smallest first.
Invite your teamAdd colleagues by email address.
sm:max-w-100
Invite your teamAdd colleagues by email address.
sm:max-w-120
Invite your teamAdd colleagues by email address.
sm:max-w-136
Invite your teamAdd colleagues by email address.
sm:max-w-160
Invite your teamAdd colleagues by email address.
sm:max-w-200
Layouts
cells
The header
Blog post publishedTeam members will be able to edit this post.
align left
Delete blog postAre you sure you want to delete this post?
align horizontal
Share this projectAnyone with the link can view this project.
align center
Invite your teamAdd colleagues by email address.
Content begins here, under the rule.
paddingBottom and divider
Invite your teamAdd colleagues by email address.
Content begins here, under the rule.
divider, paddingBottom off
Create a new projectUpload an image to create a new project.
no featured icon
Blog post publishedTeam members will be able to edit this post.
no close button
Delete blog postAre you sure you want to delete this post?
below sm: tighter padding, horizontal stacks
The action row
layout fill
layout stacked
layout end, both leading slots filled
layout end, destructive
below sm, the row reverses: Confirm on top
below sm, layout end: the leading pair shares one row
Compositions
cells
All 51 Types at their own widths, in the sheet’s groups.
Confirmations
Blog post publishedThis blog post has been published. Team members will be able to edit this post and republish changes.This blog post has been published. Team members will be able to edit this post.
Stacked left aligned
Unsaved changesDo you want to save or discard changes?
Warning stacked left aligned
Delete blog postAre you sure you want to delete this post?
Destructive stacked left aligned
Blog post publishedThis blog post has been published. Team members will be able to edit this post and republish changes.This blog post has been published. Team members will be able to edit this post.
Checkboxes
Blog post publishedThis blog post has been published. Team members will be able to edit this post and republish changes.This blog post has been published. Team members will be able to edit this post.
Toggles
Blog post publishedThis blog post has been published. Team members will be able to edit this post and republish changes.This blog post has been published. Team members will be able to edit this post.
Team member*
Dropdown
Blog post publishedThis blog post has been published. Team members will be able to edit this post and republish changes.This blog post has been published. Team members will be able to edit this post.
Link field
Candice has requested edit accessOne of your team has requested edit access to your project Marketing Website Design.
Candice Wu
candice@untitledui.com
Access request
Project createdPlease enter a name for this project.
Input field
Blog post publishedThis blog post has been published. Team members will be able to edit this post and republish changes.This blog post has been published. Team members will be able to edit this post.
Horizontal
Unsaved changesDo you want to save or discard changes?
Warning horizontal
Delete blog postAre you sure you want to delete this post?
Destructive horizontal
Team
You’ve been added to the team!Thanks for accepting the invite. You’ve now been added to the team as an editor.
Stacked with team
Invite your teamYou’ve created a new project! Invite colleagues to collaborate on this project.
Stacked with team and link
Add your team membersYou’ve created a new project! Invite colleagues to collaborate on this project.
Candice Wu
@candice
Admin
Demi Wilkinson
@demi
Admin
Drew Cano
@drew
Editor
Natali Craig
@natali
Editor
Stacked with team and invites
Media
Blog post publishedThis blog post has been published. Team members will be able to edit this post and republish changes.
Centered photo
Welcome to your dashboardWe’re glad to have you onboard. Here are some quick tips to get you up and running.
Centered photo carousel
0:00
-0:00
0:00
-0:00
0:00
-0:00
0:00
-0:00
Welcome to your dashboardHere are some tips to get you up and running.
Centered video carousel
Codes and sign-in
Please enter your passwordEnter your password to make this change.
Password prompt
Log in to your accountWelcome back! Please enter your details.
Create an accountStart your free 30-day trial. Cancel anytime.
OR
Sign up 02
Please check your email.We’ve sent a code to olivia@untitledui.com
3
0
6
6
Didn’t get a code? .
3
0
6
6
Didn’t get a code? .
Verification code
Set up two-factor authenticationTo authorise transactions, please scan this QR code with your Google Authenticator App and enter the verification code below.
0
0
0
-
0
0
0
Didn’t get a code? .
2FA code
Money, plans and files
Change your planFlexible pricing that grows with you.
Plan 01
Change your payment methodUpdate your plan payment details.
Payment method
Update payment methodUpdate your card details.
Payment details
Untitled.
Olivia Rhye
06/28
1234 1234 1234 12341
Update payment methodUpdate your card details.
Payment details with image
Purchase seatsSelect how many seats you need.
32
Price per seat$10Total$320
User selection
Upload and attach filesUpload and attach files to this project.
or drag and drop
SVG, PNG, JPG or GIF (max. 800x400px)
Tech design requirements.pdf
200 KB of 200 KB
Complete
100%
Dashboard recording.mp4
6.4 MB of 16 MB
Uploading...
40%
Dashboard prototype FINAL.fig
3.4 MB of 4.2 MB
Uploading...
80%
File upload
Select planSimple and flexible per-user pricing.
Plan 02
People and sharing
Invite collaboratorsYour new project has been created. Invite colleagues to collaborate on this project.
Email invite
Share with peopleThe following users have access to this project:
Candice Wu
candice@untitledui.com
DW
Demi Wilkinson
demi@untitledui.com
Drew Cano
drew@untitledui.com
Team member*
User invite
Add labels to projectLabels help organize projects.
In progressDesignWeb
Labels
JAN10
Invitation: Product demoSienna Hewitt @ Friday, Jan 8, 2028
DetailsFriday, Jan 8, 20281:30 PM - 3:30 PM10 min before
Organizer
Sienna Hewitt
sienna@untitledui.com
Attendees
OR
6 guests5 yes1 awaiting
Calendar event
Connect Untitled to LinearPrioritize work based on customer needs and build a tighter feedback loop with customers.
Untitled would like to
Access basic company information and detailsAccess basic company information
Access and edit bug reports and create new issuesEdit bug reports and create new issues
Change issue status and assignee of issuesChange issue status and assignee
Open and resolve Intercom conversationsOpen and resolve Intercom conversations
Add or remove users and change user rolesAdd or remove users and change roles
untitledui.com/integrations/linear
Integration
Share this projectInvite your team to review and collaborate.
Anyone with the link
untitledui.com/project/untitled
Who has accessInvite others to view and edit this project.
Sienna Hewitt
sienna@untitledui.com
Ammar Foley
ammar@untitledui.com
Mathilde Lewis
mathilde@untitledui.com
Share project
Forms, editors and settings
Create a new projectUpload an image to create a new project.
or drag and drop
SVG, PNG, JPG or GIF (max. 800x400px)
Team*
New project
Complete your profileChoose a username and write a brief intro.
6 guests5 yes1 awaiting
