Resources

Tools, themes, extensions and examples built by the Theme UI community.

Custom themes

@tabetalt/kit: Used in Tabetalt’s e-commerce platform.
@hackclub/theme: Used on Hack Club’s websites.
- Forked by the Innovation Circuit.
@carbonplan/theme: Used on Carbonplan’s websites.
@undataforum/preset: Used on United Nations World Data Forum.
theme-ui-preset-geist: Inspired by/adapted from Geist UI.
theme-ui-preset-nice-boys
indivorg/theme: Used in Indiv's mobile and web applications.

@component-controls/components: Components built for Theme UI.
@cartolab/elements: Themeable React components for map-based web applications.
@carbonplan/components: Shared React components for Carbonplan.
@undataforum/components: Shared React components for UN Data Forum.
prestyled

Theme UI Gallery: Themed components live previewer.
Skin UI: Theme UI live previewer & code editor.
Oh My Theme: Theme UI preset previewer.
Components.ai Theme Generator: Generate, preview, & export random themes.
Controlled Styled Editor: Edit your React components based on System UI constrained design principles.

@lachlanjc/next-theme-starter: Next.js project for getting started with MDX & Theme UI.
@hackclub/theme-starter: Next.js project using Hack Club Theme & MDX.
Next.js MDX Blog Starter: Next.js blog starter for building blogs with MDX, Theme UI, & Vercel.
@mattjennings/nextjs-starter: Next.js project using Theme UI & Framer Motion.
Next.js Frontend Starter Pack: Next.js site template using TypeScript, Jest, & Theme UI.

LekoArts Gatsby Themes: Collection of Gatsby themes built with Theme UI.
@hew/gatsby-theme-ui-starter: Gatsby.js project using Netlify Forms.
@codebushi/gatsby-theme-document: Gatsby.js theme for documentation.
gatsby-theme-glossary: Gatsby.js theme for a glossary to define terminology.

theme-ui-native: Theme UI adapted for React Native projects.
Dripsy: A responsive, theme-based design system for Expo + React Native Web.
Theme UI plugin for Figma: Figma plugin to convert a Theme UI config to Figma Styles.
@fabulas/theme-ui-modifiers: Library for using BEM-style modifiers on Theme UI components.
@mattjennings/react-modal: Library for making animated modals with Theme UI & Framer Motion.
React Layouts: Grab-and-go layouts for React, including Theme UI.
Next Theme UI: Components for using Theme UI with Next.js.
MDXP: MDX-based presentation deck library using the System UI Theme Specification for theming.