UIDiscovery
Get Pro

Practice studio · Five original web patterns

Try the details.
Take the source.

These small React and Tailwind examples let you test a complete interaction before borrowing the code. Each one is keyboard accessible, responsive and self-contained.

All input stays in the browser while the page is open. The login and plan examples are previews: no account is created, no payment is taken, and none of the demos send data.

Pattern 01

Login form

Visibility control, native constraints and a clear completion state.

Use the controls, then reset to return to the starting state. The source is an independent React component that requires Tailwind CSS.

Download React source

MIT licensed · Original web implementation

Northstar · Account preview

Welcome back

Try the form. Nothing is sent or saved.

Use any email and an eight-character password to preview the complete state.

Pattern 02

Field validation

Linked error messages, corrected input and a successful preview.

Use the controls, then reset to return to the starting state. The source is an independent React component that requires Tailwind CSS.

Download React source

MIT licensed · Original web implementation

Field notes · Form preview

Join the reading list

Errors appear after you try to continue. No address is collected.

Try submitting an empty form to see the validation state.

Pattern 03

Settings

Editable preferences with save feedback and reset.

Use the controls, then reset to return to the starting state. The source is an independent React component that requires Tailwind CSS.

Download React source

MIT licensed · Original web implementation

Northstar · Preferences

Make it yours

Change these settings and preview the saved state. They reset when you leave.

Choose how much room items have.

Your choices stay in this page until you reset or leave.

Pattern 04

Empty state

A useful first action that turns into a populated list.

Use the controls, then reset to return to the starting state. The source is an independent React component that requires Tailwind CSS.

Download React source

MIT licensed · Original web implementation

Field notes · Collection preview

Your reading shelf

A little room for inspiration

Add a title to see how the shelf changes when it has content.

The shelf is empty. No titles are stored or sent.

Pattern 05

Plan choice

Comparable options with an explicit local preview.

Use the controls, then reset to return to the starting state. The source is an independent React component that requires Tailwind CSS.

Download React source

MIT licensed · Original web implementation

Field notes · Plan preview

A little more room to explore

Compare two fictional plans. Prices are illustrative; this demo cannot take payment.

Choose a plan
  • ✓ Unlimited saved notes
  • ✓ Private collections
  • ✓ Export when you need it

Selecting a plan changes this preview only.

Looking for a longer flow? Explore the onboarding study and its interactive demo.