Proper UI

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

BoltStackBlitzv0

Settings

Personal info

Update your photo and personal details here.

Name

Email address

Your photo

This will be displayed on your profile.

Olivia Rhye
or drag and drop

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

Role

Country

Country*

Timezone

Timezone*

Bio

Write a short introduction.

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

npx properui@latest add settings-pages

Settings page with sidebar navigation examples

Settings 01
Settings 01 · Page example
Settings 02
Settings 02 · Page example
Settings 03
Settings 03 · Page example
Settings 04
Settings 04 · Page example
Settings 05
Settings 05 · Page example
Settings 06
Settings 06 · Page example
Settings 07
Settings 07 · Page example
Settings 08
Settings 08 · Page example
Settings 09
Settings 09 · Page example
Settings 10
Settings 10 · Page example
Settings 11
Settings 11 · Page example
Settings 12
Settings 12 · Page example
Settings 13
Settings 13 · Page example
Settings 14
Settings 14 · Page example
Settings 15
Settings 15 · Page example
Settings 16
Settings 16 · Page example
Settings 17
Settings 17 · Page example
Settings 18
Settings 18 · Page example
Settings 19
Settings 19 · Page example
Settings 20
Settings 20 · Page example
Settings 21
Settings 21 · Page example