Slideout menus

A modal panel sliding in from the right: one small base — SlideoutMenu plus Trigger, Header, Content, Footer — and 24 compositions in the same directory.

Specimen

Guidelines

Code

In context

in-context

View in a page

Family

family

SlideoutMenu

SlideoutMenu.Trigger

Filters

SlideoutMenu.Header

SlideoutMenu.Content

SlideoutMenu.Footer

Sizes

cells

Project settingsConfigure your project preferences.

Project nameUpdate your project name and description. This will be visible to all team members and appears in your dashboard.Team permissionsManage who can view, edit, and share your project. You can invite new team members or update existing permissions.Integration settingsConnect your project with external services. Enable notifications and sync data automatically.

Mobile: pl-6 of the 375 sheet, no hairline

Project settingsConfigure your project preferences.

Desktop: md:pl-10 then max-w-100, with the hairline

Layouts

cells

The header

Project settingsConfigure your project preferences.

icon and supporting text

Team members

title only

MessagesEverything addressed to you.

Recent

Groups

Archived

tabbed

Integration

closeButtonSize md

The footer

one group, justify-end

two groups, justify-between

Content

cells

Sharing and delivery settings for the Hollis wedding galleryConfigure your project preferences.

a long title wraps beside the close button

Delivery settingsSet the expiry on shared galleries, whether downloads are watermarked, and who is told when a client saves a favourite.

a long supporting line wraps under the title

Compositions

cells

All 23 Types in the sheet’s order, at Desktop width.

Project settings

Configure your project preferences.

Project name

Update your project name and description. This will be visible to all team members and appears in your dashboard and shared links. Changes will take effect immediately.

Update your project name and description. This will be visible to all team members and appears in your dashboard.

Team permissions

Manage who can view, edit, and share your project. You can invite new team members or update existing permissions for current collaborators at any time.

Manage who can view, edit, and share your project. You can invite new team members or update existing permissions.

Integration settings

Connect your project with external services like Slack, GitHub, or Figma. Enable notifications and sync data automatically to keep your team updated on changes.

Connect your project with external services like Slack, GitHub, or Figma. Enable notifications and sync data automatically.

Placeholder

Freelancer

Olivia Rhye

olivia@untitledui.com

DesignProductUI Design

About

I'm a Designer based in Melbourne. I co-founded Layers Studio™ where we help early stage founders and startups take their product from 0→1.

Melbourne, Australia
layers.studio

Work experience

Founder

Layers Studio™

May 2020 – Present

UX Designer

Sisyphus

Jan 2018 – May 2020

Visual Designer

Catalog

Mar 2017 – Jan 2018

User profile

Messages

Lorem ipsum dolor sit amet.

Recent

Groups

Group chat

Recent

Groups

Payment method

Update your plan payment details.

Visa ending in 1234Expiry 06/2028

Mastercard ending in 1234Expiry 08/2029

Visa ending in 1234Expiry 10/2028

Stripe (Visa ending 1234)Expiry 02/2029

Billing contact

Add a second billing contact email.

Email address*

Payment method

Payment details

Update your plan payment details.

Untitled.

Olivia Rhye

06/28

1234 1234 1234 12341

Untitled.

Olivia Rhye

06/28

1234 1234 1234 12341

Name on card*

Card number*

Expiry*

CVV*

Billing contact

Add a second billing contact email.

Email address*

Payment details

Change your plan

Flexible pricing that grows with you.

Basic plan

$10per month

Limited time only

Includes up to 10 users, 20 GB individual data and access to all features.

Business plan

$20per month

Includes up to 20 users, 40 GB individual data and access to all features.

Enterprise plan

$40per month

Unlimited users, unlimited individual data and access to all features.

Plan

Team members

Design

Product

Marketing

Team members

Upload and attach files

Upload and attach files to this project.

or drag and drop

SVG, PNG, JPG or GIF (max. 800x400px)

Tech design requirements.pdf
200 KB
100%
Dashboard recording.mp4
16 MB
40%
Dashboard prototype FINAL.fig
4.2 MB
80%

File upload

Marketing site redesign

Redesign of untitledui.com

Share project

untitledui.com/project/marketing-site

Team members

The following are working on this project.

Demi Wilkinson

demi@untitledui.com

Project details

Notifications

Manage when you'll receive notifications.

Message mentions

I'm mentioned in a message or comment.

Message replies

Someone replies to any message or comment.

New projects

New projects are created on my team.

Outstanding tasks

I've had outstanding tasks for more than.

New team members

New users have been added to my team.

Notification settings, button groups

Notifications

Unread
Phoenix BakerJust now
Added a file to Marketing site redesign
Tech requirements.pdf
720 KB
Unread
Lana Steiner2 mins ago
Was invited to the team by Alisa Hester
Unread
Demi Wilkinson2 mins ago
Was invited to the team by Alisa Hester
Unread
Candice Wu3 hours ago
Commented in Marketing site redesign
Candice Wu3 hours ago
Was added to Marketing site redesign
Natali Craig6 hours ago
Added 3 labels to the project Marketing site redesign
Natali Craig6 hours ago
Invited to the team Lana Steiner
Orlando Diggs11 hours ago
Created 7 tasks in Marketing site redesign
Drew Cano12 hours ago
Added a file to Marketing site redesign
Design brief and ideas.txt
2.2 MB
Drew Cano12 hours ago
Created the project Marketing site redesign
Kate Morrison5:20pm 20 Jan 2027
Sent you a message
"We should ask Oli about this today."
Koray Okumus4:16pm 20 Jan 2027
Sent you a file
Prototype draft 03.mp4
6.6 MB
Koray Okumus4:16pm 20 Jan 2027
Sent you a message
@olivia This is starting to look really good! I'll polish it up a bit and send it.
Ava Wright2 mins ago
Invited to the team Alisa Hester
Unread
Eve Leroy2 mins ago
Invited to the team Ava Wright

Notifications

Order summary

4 items

$49.00

Shipping method

Discount code

Discount

FRIENDS

10% ($4.90)

Express shipping

$3.99

Subtotal

$48.09

Order summary

JAN

Product demo

Details

Friday, Jan 10, 2027

1:30 PM - 3:30 PM

10 min before

Organizer

Attendees

6 guests

5 yes

1 awaiting

About this event

Sienna is inviting you to a scheduled Zoom meeting.

Topic: Product demo for the new dashboard and Q&A session.

Join Zoom Meeting: https://us02web.zoom.us/j/86341969512

Meeting ID: 863 4196 9512

Calendar event

Sienna Hewitt

@siennahewitt

Followers: 32,086
Following: 4,698
Posts: 128
Collections: 24

Name*

Last name*

Email*

Verified 2 Jan, 2027

Username*

untitledui.com/@

CountryEstimates based on recent IP address.

User settings

Hi Olivia,

Welcome back! How can I help?

I'm here to help tackle your tasks. Choose from the prompts below or tell me what you need!

A.I. assistant intro

Welcome back! How can I help?
I’ve got a lunch meeting with Sarah tomorrow at noon. Can you adjust my schedule to fit this in?
Okay! Here’s what I recommend:
Sync with Rhea move to 1:30 PM.
Strategy session with Sienna move to Thursday at 3 PM.
Shall I update your calendar and notify Sienna and the team?
Yes, but can we do the strategy session on Friday instead?
00:28
Typing

A.I. assistant message

Share this project

Invite your team to review and collaborate.

Anyone with the link

untitledui.com/project/untitled

Who has access

Invite others to view and edit this project.

Sienna Hewitt
sienna@untitledui.com
Ammar Foley
ammar@untitledui.com
Mathilde Lewis
mathilde@untitledui.com
Julius Vaughan
julius@untitledui.com
FC
Fleur Cook
fleur@untitledui.com

Share project

Create event

Add details to schedule your event.

Title*

Location

Description

Guest permissions

Modify event

Invite others

See guest list

Create event

Connect Untitled to Linear

Prioritize work based on customer needs and build a tighter feedback loop with customers.

Untitled would like to

Access basic information and details

Access bug reports and create issues

Change issue status and assignee of issues

Open and resolve Intercom conversations

Add or remove users and change user roles

untitledui.com/integrations/linear

Integration

Behaviour

cells

Team members

Olivia Rhye
Product Designer
Natali Craig
UX Designer
Drew Cano
Frontend Developer
Orlando Diggs
Backend Developer
Phoenix Baker
Product Manager
Lana Steiner
QA Engineer
Demi Wilkinson
UX Copywriter
Candice Wu
Fullstack Developer
Andi Lane
Product Designer

nine rows in a fixed-height panel: only the list scrolls

The page behind the panelBody copy, a rule, and a block of colour — enough texture that the blur has something to work on.

bg-overlay/70, blurred, over content

the overlay, live: open it

Loading

cells

People

User profile, photo and name skeleton, field labels real

Team members, four rows skeleton, role select real and disabled

Conversations

Messages, five rows skeleton, tabs and title real

Message chat, three rows skeleton, tabs and composer real

A.I. assistant message, the reply skeleton, composer real

Records

Notifications, four rows skeleton, title real

Order summary, four rows skeleton, total label and dividers real

Forms

Project details, text and circles skeleton, footer real

Plan, three rows skeleton, header and footer real