Theme

The theme config is where you define your design system like color palette, spacing, fonts, border radius, breakpoints, etc.

Theme structure#

const config = {  theme: {    breakpoints: {      sm: '640px',      md: '768px',      lg: '1024px',      xl: '1280px',      '2xl': '1536px',    },    colors,    spacings: {      0: 0,      1: 4,      2: 8,      3: 12,      4: 16,      5: 20,      6: 24,      7: 28,      8: 32,      9: 36,      10: 40,      11: 44,      12: 48,      14: 56,      16: 64,      20: 80,      24: 96,      28: 112,      32: 128,      36: 144,      40: 160,      44: 176,      48: 192,      52: 208,      56: 224,      60: 240,      64: 256,      72: 288,      80: 320,      96: 384,    },    fontSizes: {      xs: 12,      sm: 14,      base: 16,      lg: 18,      xl: 20,      '2xl': 24,      '3xl': 30,      '4xl': 36,      '5xl': 48,      '6xl': 60,      '7xl': 72,      '8xl': 96,      '9xl': 128,    },    lineHeights: {      none: 1,      tight: 1.25,      snug: 1.375,      normal: 1.5,      relaxed: 1.625,      loose: 2,    },    letterSpacings: {      tighter: '-0.9px',      tight: '-0.45px',      normal: '0px',      wide: '0.45px',      wider: '0.9px',      widest: '1.8px',    },    radii: {      none: 0,      sm: 2,      base: 4,      md: 6,      lg: 8,      xl: 12,      '2xl': 16,      '3xl': 24,      full: 9999,    },    shadows: {      sm: '0 1px 3px rgba(0, 0, 0, 0.12), 0 0 1px rgba(0,0,0,0.01)',      base: '0 2px 4px rgba(0, 0, 0, 0.12), 0 0 2px rgba(0,0,0,0.02)',      md: '0 4px 8px rgba(0, 0, 0, 0.12), 0 0 2px rgba(0,0,0,0.02)',      lg: '0 8px 16px rgba(0, 0, 0, 0.12), 0 0 2px rgba(0,0,0,0.02)',      xl: '0 14px 24px rgba(0, 0, 0, 0.16), 0 0 2px rgba(0,0,0,0.02)',      '2xl': '0 24px 48px rgba(0, 0, 0, 0.2), 0 0 2px rgba(0,0,0,0.02)',      inner: 'inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)',      outline: '0 0 0 3px rgba(66, 153, 225, 0.5)',      none: 'none',    },    fontWeights: {      hairline: 100,      thin: 200,      light: 300,      normal: 400,      medium: 500,      semibold: 600,      bold: 700,      extrabold: 800,      black: 900,    },  },}

How to customize theme?#

You can build your own design by customizing theme, read more about customizing design system: