Next.js with Theme UI Starter Kit

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#

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.

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

If you want to create your own theme for your project, you can and it's relatively low-level effort 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.

Avatars and Badges#

Default Badge

Outline Badge

Secondary Badge

Tertiary Badge

...and more!

16

Gallery-like Layouts for Your Purrty Pics#

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.

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.

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!