Next.js with Theme UI Starter Kit
Themeable Containers, Buttons, Copy Elements...Oh My!#
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.
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
.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.
Responsive Full-width Images#
Avatars and Badges#
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.
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.