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.
- @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
Component kits
- @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 previewers
- 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.
Project templates
- @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.
- @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.
Other projects
- 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.