Saas UI is an open source React component system built on Chakra UI. Designed to help you build beautiful, consistent SaaS applications.
Pre-built, production-ready components that maintain design consistency, while accelerating development speed and time to market.
Component System
Move fast with a carefully crafted component system built to grow with your product. Easy to use and customize.
Semantic tokens. Our token system gives you intelligent design decisions out of the box—colors, spacing, and sizing that work together harmoniously while remaining easy to customize for your brand.
Recipes. Pre-built component variants and compositions that let developers quickly assemble complex UI patterns without wrestling with CSS or design decisions.
import { defineSemanticTokens } from '@saas-ui/react'
export const semanticColors = defineSemanticTokens.colors({
status: {
success: {
value: { _light: '{colors.green.500}', _dark: '{colors.green.500}' },
},
error: {
value: { _light: '{colors.red.500}', _dark: '{colors.red.500}' },
},
warning: {
value: { _light: '{colors.orange.500}', _dark: '{colors.orange.500}' },
},
info: {
value: { _light: '{colors.blue.500}', _dark: '{colors.blue.500}' },
},
},
})
import { defineRecipe } from '@saas-ui/react'
export const cardRecipe = defineRecipe({
base: {
display: 'flex',
flexDirection: 'column',
},
variants: {
variant: {
primary: {
bg: 'teal.600',
color: 'white',
},
},
},
})
Founder - Aidbase
Founder - LocalXpose
Founder - Heron
Software Engineer - React Hook Form
Software Engineer
CTO - CultureKit
CTO - NotifyLog
Frontend developer
Founder - Startec
Founder - Inkubator
Software Engineer - Mintgate
Founder - Frantic Software
Join hundreds of developers
building better SaaS interfaces.