Skip to content

Page layout examples

A selection of basic page layouts to help you get started building your app.

They can be combined with one of the example applications to form a complete starter.

Sections of each layout are clearly defined either by comments or use of separate files, making it simple to extract parts of a page (such as a "hero unit", or footer, for example) for reuse in other pages.

For multi-part examples, a table in the README at the linked source code location describes the purpose of each file.

For complete ready-to-go examples with multiple page layouts, check out the premium themes section.

Dashboard

A minimal dashboard with taskbar and mini variant draw. The chart is courtesy of Recharts, but it is simple to substitute an alternative.

Sign In

A simple Sign In page.

Sign-in side

A simple Sign In side page.

Sign Up

A simple Sign Up page.

Blog

A sophisticated blog page layout. Markdown support is courtesy of markdown-to-jsx but is easily replaced.

Checkout

A step-by-step checkout page layout. Adapt the number of steps to suit your needs, or make steps optional.

Album

A responsive album / gallery page layout with a hero unit and footer.

Pricing

Quickly build an effective pricing table for your potential customers with this page layout.

Sticky footer

Attach a footer to the bottom of the viewport when page content is short.

If while using these examples you make changes or enhancements that could improve the developer experience, or you would like to contribute an additional example, please consider creating a pull request on GitHub.

So far we have demos for:

  • A dashboard
  • A Sign In page
  • A Sign Up page
  • A blog page
  • A checkout flow
  • An album page
  • A pricing page
  • A sticky footer page