Settings pages with sidebar navigation

Powerful and customizable React settings page examples with a vertical sidebar navigation layout, built for modern products and web apps. These settings pages are built using React Aria and styled with Tailwind CSS.

Settings page with sidebar navigation example

Preview

Code

Settings

My details

Profile

Password

Team

Plan

Billing

Email

Notifications2

Integrations

API

Personal info

Update your photo and personal details here.

Name

First name*

Last name*

Email address

Email address*

Your photo

This will be displayed on your profile.

or drag and drop

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

Role

Role*

Country

Country*

Timezone

Timezone*

Bio

Write a short introduction.

Bio

Portfolio projects

Share a few snippets of your work.

or drag and drop

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

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

Installation

CLI

Manual

npx @properui/cli@latest add settings-pages

On this page

Installation
Settings page with sidebar navigation examples