Theme Generator

Create Your Perfect Theme

Customize your FlexiUI theme in real-time. Adjust colors, preview components, and export your configuration.

Theme Settings

Color Preview

Primary#761AE8
Secondary#06B6D4

Live Preview

Buttons

Input

Card

Card Title

This is a preview of how your theme will look with different components.

Spinner

Generated Theme Code

import { flexiui } from '@flexi-ui/theme'
import { generateConfigFromColor } from '@flexi-ui/theme'

const themeConfig = generateConfigFromColor('#761AE8', {
  defaultTheme: 'light',
  additionalColors: {
    secondary: '#06B6D4',
  },
})

export default flexiui(themeConfig)