Modal components

Powerful and customizable React modal components built for modern applications and websites. These modals are built using React Aria and styled with Tailwind CSS.

GitHub
React Aria

Ask the assistant

Describe what you need and the assistant will draft it inside this project.

Try one of these

The assistant can make mistakes. Check important details.

Installation

CLI

Manual

npx @properui/cli@latest add modals

Update available

A new version of the workspace is ready. Updating takes about a minute and your work is saved automatically.

Leave without saving?

You have unsaved changes in this document. If you leave now, those changes will be lost.

Destructive stacked left aligned

Bolt StackBlitz v0

Preview

Code

Delete project

Are you sure you want to delete this project? This action cannot be undone and every file inside it will be removed.

Update available

A new version of the workspace is ready. Updating takes about a minute and your work is saved automatically.

Leave without saving?

You have unsaved changes in this document. If you leave now, those changes will be lost.

Delete project

Are you sure you want to delete this project? This action cannot be undone and every file inside it will be removed.

Log in to your account

Welcome back! Please enter your details.

Email*

Password*

Remember for 30 days

Don’t have an account?

Create an account

Start your 30-day free trial. No credit card required.

Name*

Email*

Password*

Must be at least 8 characters.

Already have an account?

Create your workspace

Invite your team later. You can always add people once the space is set up.

Workspace name*

Work email*

Password*

Must be at least 8 characters.

I agree to the Terms of Service and Privacy Policy

Email notifications

Choose what we should email you about. You can change this at any time.

Comments

Someone comments on one of your documents.

Mentions

Someone mentions you in a comment or a task.

Weekly digest

A summary of what changed in your workspace.

Workspace settings

Control how members join and what they can see by default.

Public profile

Anyone with the link can view this workspace.

Allow guest access

Guests can open shared documents without an account.

Weekly summary

Send members a recap every Monday morning.

Share this project

Anyone with this link can view the project in read-only mode.

Project link

Move project

Pick the team this project should belong to.

Team

Rename project

Give this project a name your team will recognise.

Add a label

Labels help your team filter and group work across projects.

Label name*

Keep it under 24 characters.

Olivia Rhye requests access

They asked to join “Quarterly review”. Approving gives them edit access to every file in the project.

Invite team members

Send an invite by email. They will get access as soon as they accept.

Add people

Pick who should have access to “Quarterly review”.

Olivia Rhye
olivia@proper.example
Phoenix Baker
phoenix@proper.example
Lana Steiner
lana@proper.example
Demi Wilkinson
demi@proper.example

Share with your team

Everyone below already has access to this workspace.

Share with your team

Everyone below already has access to this workspace.

Share link

Share with your team

Everyone below already has access to this workspace.

Olivia Rhye
olivia@proper.example
Owner
Phoenix Baker
phoenix@proper.example
Can edit
Lana Steiner
lana@proper.example
Can edit

Check your email

We sent a 4-digit code to olivia@proper.example.

[data-input-otp] { --nojs-bg: white !important; --nojs-fg: black !important; background-color: var(--nojs-bg) !important; color: var(--nojs-fg) !important; caret-color: var(--nojs-fg) !important; letter-spacing: .25em !important; text-align: center !important; border: 1px solid var(--nojs-fg) !important; border-radius: 4px !important; width: 100% !important; } @media (prefers-color-scheme: dark) { [data-input-otp] { --nojs-bg: black !important; --nojs-fg: white !important; } }

Two-factor code

Bolt StackBlitz v0

Preview

Code

Two-factor authentication

Enter the 6-digit code from your authenticator app to continue.

Didn’t get a code?

Password prompt

Bolt StackBlitz v0

Preview

Code

Confirm your password

For your security, please re-enter your password before continuing.

Password*

Centered photo

Bolt StackBlitz v0

Preview

Code

Boards are here

Plan a sprint, group ideas or track a launch, all on a canvas your whole team can edit.

Centered photo carousel

Bolt StackBlitz v0

Preview

Code

Faster search

Results now appear as you type, across every project you have access to.

Centered video carousel

Bolt StackBlitz v0

Preview

Code

Take the 2-minute tour

See how projects, boards and reviews fit together before you invite the rest of your team.

Payment details

Bolt StackBlitz v0

Preview

Code

Payment details

Update the card we charge for your monthly subscription.

Name on card*

Card number*

Expiry*

CVV*

Payment details with image

Bolt StackBlitz v0

Preview

Code

Confirm your purchase

Proper UI Pro, billed annually at $120 per seat.

Name on card*

Card number*

Expiry*

CVV*

Plan 01

Bolt StackBlitz v0

Preview

Code

Change your plan

Upgrade or downgrade at any time. Changes take effect on your next invoice.

Basic$10/mth

Up to 5 projects and 2 GB of storage.

Pro$20/mth

Unlimited projects and 100 GB of storage.

Enterprise$40/mth

Advanced controls, SSO and priority support.

Plan 02

Bolt StackBlitz v0

Preview

Code

Upgrade to Pro

Everything in Basic, plus the features your team keeps asking for.

$20per seat, per month

Unlimited projects and boards
100 GB of shared storage
Advanced permissions and audit log
Priority support within 4 hours

Payment method

Bolt StackBlitz v0

Preview

Code

Payment method

Pick the card we should charge for this workspace.

Visa ending in 1234

Expiry 06/2028

Mastercard ending in 5678

Expiry 11/2027

Date picker

Bolt StackBlitz v0

Preview

Code

Pick a date

Choose the day this project should go live.

Launch date, September 2026

September 2026

mm/dd/yyyy

Su	Mo	Tu	We	Th	Fr	Sa
30	31	1	2	3	4	5
6	7	8	9	10	11	12
13	14	15	16	17	18	19
20	21	22	23	24	25	26
27	28	29	30	1	2	3

File upload

Bolt StackBlitz v0

Preview

Code

Upload files

Attach up to 10 files to this project.

or drag and drop

SVG, PNG, JPG or GIF (max. 800×400px)

quarterly-review.pdf
1 MB
Complete
100%
cover-image.png
703 KB
Uploading...
45%

Profile settings

Bolt StackBlitz v0

Preview

Code

Profile settings

Update your photo and personal details here.

First name*

Last name*

Email*

BioWrite a short introduction.

User selection

Bolt StackBlitz v0

Preview

Code

Assign this task

Only people with access to the project are listed.

Olivia Rhye

olivia@proper.example

Phoenix Baker

phoenix@proper.example

Lana Steiner

lana@proper.example

Demi Wilkinson

demi@proper.example

Form 01

Bolt StackBlitz v0

Preview

Code

Add a team member

They will receive an email invite with the access you choose here.

First name*

Last name*

Email address*

Role

Team

Personal note

Form 02

Bolt StackBlitz v0

Preview

Code

Report an issue

Tell us what happened and we will look into it.

What went wrong?

Issue type

Description*

How urgent is it?

Low

Not blocking anyone right now.

Normal

Annoying, but there is a workaround.

High

Blocking work for the whole team.

Email me when this is resolved

Image crop

Bolt StackBlitz v0

Preview

Code

Crop your photo

Drag to reposition, then use the slider to zoom.

40%

Calendar event

Bolt StackBlitz v0

Preview

Code

Design review

Weekly walkthrough of everything shipped since Monday.

Wednesday, 9 September · 10:00 - 11:00
Meeting room 3 · Also on video
6 people invited

Banner appearance

Bolt StackBlitz v0

Preview

Code

Banner appearance

Choose how the announcement banner looks to your members.

Boards are here

Plan a sprint on a canvas your whole team can edit.

Top of page

Bottom of page

Floating

Behaviour

Dismissible

Members can hide the banner.

Show on mobile

Display the banner on small screens too.

Appearance settings

Bolt StackBlitz v0

Preview

Code

Appearance

Choose how this workspace looks and feels on your device.

Light

Dark

System

Interface

Reduce motion

Turn off non-essential animations.

Compact rows

Fit more items on screen in lists and tables.

AI assistant

Bolt StackBlitz v0

Preview

Code

Ask the assistant

Describe what you need and the assistant will draft it inside this project.

Try one of these

The assistant can make mistakes. Check important details.

User settings

Bolt StackBlitz v0

Preview

Code

Account settings

Manage your personal details, notifications and security.

Personal details

Full name

Username

Notifications

Product updates

News about releases and improvements.

Mentions

When someone mentions you in a comment.

Marketing emails

Occasional tips and offers.

Security

Two-factor authentication

Currently enabled with an authenticator app.

New project

Bolt StackBlitz v0

Preview

Code

New project

Projects hold your files, boards and reviews in one place.

Project name*

Description

Start from a template

Blank project

Start with an empty workspace.

Sprint board

Backlog, in progress and done columns.

Launch checklist

Everything you need before shipping.

Add my team

Everyone in Design gets access straight away.

Text editor

Bolt StackBlitz v0

Preview

Code

Write an update

Everyone following this project will get your update by email.

Share project

Bolt StackBlitz v0

Preview

Code

Share “Quarterly review”

Invite people by email or send them the link.

Olivia Rhye
olivia@proper.example
Phoenix Baker
phoenix@proper.example
Lana Steiner
lana@proper.example

Project link

Create event

Bolt StackBlitz v0

Preview

Code

Create event

Invite your team and we will add it to everyone’s calendar.

Event name*

Date

Start time

End time

Location

Description

Guests

Send a reminder

Guests get a notification 10 minutes before.

Integration

Bolt StackBlitz v0

Preview

Code

Connect Figma

Link a Figma team so designs stay in sync with this project.

Embed live frames in any document
Get a comment when a file changes
Search designs from the command menu

Proper UI will be able to read file names, thumbnails and comments. You can disconnect at any time.

New message empty state

Bolt StackBlitz v0

Preview

Code

New message

Start a conversation with anyone in your workspace.

No recipients yet

Pick someone above and your message will appear here.

New message filled

Bolt StackBlitz v0

Preview

Code

New message

Start a conversation with anyone in your workspace.

Olivia Rhye

Phoenix Baker

Lana Steiner

FAQs

You can control modal visibility using the isOpen and onOpenChange props on the DialogTrigger component. This allows you to programmatically open and close modals, and respond to user interactions that change the modal state.

You can prevent users from closing a modal by setting the isDismissable prop to false on the ModalOverlay component. This will disable the close button, prevent closing when clicking outside the modal, and disable the Escape key for closing.

A complete modal consists of: DialogTrigger (manages open state), ModalOverlay (backdrop and positioning), Modal (container with animations), and Dialog (content wrapper). You can also use CloseButton for manual close functionality.

Modal animations are built-in and use CSS classes for enter/exit transitions. The ModalOverlay handles fade-in/out effects, while the Modal component handles zoom-in/out animations. You can customize these by overriding the animation classes.

Yes, the modal component is built with accessibility in mind using React Aria. It automatically manages focus trapping, supports keyboard navigation (Escape to close), provides proper ARIA attributes, and ensures screen readers announce the modal appropriately.

Metric components Notification components