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.
• @hackersent/theme
• 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

• @hackclub/theme-starter: Next.js project using Hack Club Theme & MDX.
• Next.js MDX Blog Starter: Next.js blog starter for building blogs with Next.js, 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.