Next.js with Theme UI Starter Kit

Loading...
Loading...
Loading...
Loading...

Themeable Containers, Buttons, Copy Elements...Oh My!#

Features#

The "Next.js with Theme UI Starter Kit" is packaged with a handful of nifty features right out-of-the-box.

All UI components—Images, Video, Buttons, Icons, etc.—are designed with an accessible, mobile-first approach. Components are themeable, by default, and are extensible, which helps with reducing development friction (aka: better developer experience, DX) while elevating the confidence and creative fun in create stunning, consistent user experiencess for various devices and screen sizes.

Note: If you need or fancy a blog, you can create content using MDX or a headless CMS like WordPress.


Example Layouts + Content Utilities#

Content in a ModalSample Sign-up / LoginGrid w/UI Elements

See more examples in the variant styles section below.

Pro Tip: You can create new (sub) pages using straight markdown files that have either the .md or .mdx file extensions, e.g. about/us.mdx, which woud be accessible in via your-website-host/about/us. Any markdown elements will be auto-magically converted to this starter kit's core React UI elements for consistency.


Responsive Video Embeds with Customizable Aspect-Ratios#

3rd-party video assets, like the following one, are deferred from being loaded until they're visible on the user screen to help with initial page load and improving user experience.

Loading...

Multiple, Extensible Themes#

Starter kit comes pre-packaged with a few pre-defined theme color modes, or palettes—tap the following button to cycle through them:

Current theme's mode colors

Text#24292e
Muted#959da5
Paperrgba(0,0,0,0.1)
Accent#acd3ff
Primary#0366d6
Tertiary#032f62
Background#fff
Secondary#ffd33d
Highlight#e1e4e8

If you want to create your own theme for your project, you can and it's pretty straightforward to create and implement: simply define a few required color properties in the theme file as a sub-object under the theme's mode property, and you're set. For example, you'll want to define a backgroundColor, color, an accent and a couple of other properties, as outlined in the above example. You can let your creative juices go wild by creating custom variant styles too.


Avatars, Images & Badges#

Iamges, like the following, are deferred from being loaded until they're visible on the user screen to help with initial page load and improving user experience.

Responsive Full-width Images#

Loading...

Responsive Image Carousels#

Loading...

Sample, free-reusable pictures sourced from Unsplash's API.


Avatars and Badges#

Placeholder image to demonstrate large avatar UI component
Default Badge
Outline Badge
Secondary Badge
Tertiary Badge
...and more!
Placeholder image to demonstrate medium avatar UI component
16

The starter kit also allows you to create image layouts with various size constraints that remain responsive, much like the following photo gallery grid. See more intrinsic Grid layout examples here.

Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...

Discoverability: Data Search and Fetching#

Need to search for local data or fetch remote data? We've got you covered with some components and utilities that are optimized for querying a plethora of data with little-to-no-lag.

Search Component

  • Search Item 1
  • Search Item 2
  • Search Item 3
  • Search Item 4
  • Search Item 5
  • Search Item 6
  • Search Item 7
  • Search Item 8
  • Search Item 9
  • Search Item 10
  • Search Item 11
  • Search Item 12
  • Search Item 13
  • Search Item 14
  • Search Item 15
  • ...more results

Note: Type into the input field for the sample text "search".

Asyncronously fetch data

Using a custom React hook in parallel with the rest of the packaged UI components, fetching remote-data becomes easy-peasy-lemon-squeezy.


Themeable Icons#

The starter kit comes with customizable icons, specifically, Octicons made by the GitHub team. Leveraging Theme UI and composition, these icons can be given responsive CSS style props on-the-fly!

    Loading...