Proper UI

Settings pages with header navigation

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

Olivia Rhye

@olivia



or drag and drop

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



Country*

Timezone*

Your bio*

Write a short introduction.

I'm a Product Designer based in Melbourne, Australia. I specialise in UX/UI design, brand strategy, and Webflow development. I have spent the last eight years shaping design systems for product teams that ship every week, and I care most about the unglamorous parts — naming, spacing, states, and the documentation that keeps a team honest once the launch is over. Before that I ran a small studio, which taught me how to scope work, say no, and hand a project over cleanly. These days I split my time between design system consulting, mentoring, and writing about the craft of interface design for people who would rather read the source than the marketing page. If any of that sounds useful to you, my inbox is open and I answer every message that is not a pitch.

979 characters left

Portfolio projects

Share a few snippets of your work.

or drag and drop

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

Installation

npx properui@latest add settings-pages-02

Settings page with header navigation examples