Default Theme

NextUI default theme is base on Stitches Theme Tokens

Colors

NextUI includes a default color palette out-of-the-box that is a great starting point if you don't have your own specific branding in mind.

You can access the colors through the theme object or usign tokens whitin the css prop or styled components, see the theme object for more information.

import { useTheme, Text } from '@nextui-org/react';

const MyComponent = () => {
  const { theme } = useTheme();

  return (
    <div>
      <p
        style={{
          color: theme.colors.primary.value,
          fontSize: theme.fontSizes.tiny.value,
          padding: `${theme.space[2].value} ${theme.space[4].value}`
        }}
      >
        Using color theme value
      </p>
      <Text
        css={{
          color: '$blue800',
          fontSize: '$tiny',
          padding: '$2 $4'
        }}
      >
        Using tokens
      </Text>
    </div>
  );
};

Brand

The default theme has a brand color palette, each color has its light and dark variants like primaryLight and primaryDark.

Base

We recommend adding a palette that ranges from 100 to 900. You can use tools like Eva Design System or RadixUI Colors to generate a palette.

Accents

Layout

Highlights

Typography

To manage Typography options you can use the following keys:

  • fonts (font families)
  • fontSizes
  • fontWeights
  • lineHeights
  • letterSpacings

1. Fonts

export default {
  // default theme object
  colors: {...}, // color palette object
  fonts: {
    sans: "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto',
    'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;",
    mono: "Menlo, Monaco, 'Lucida Console', 'Liberation Mono',
    'DejaVu Sans Mono', 'Bitstream Vera Sans Mono'"
  }
  ...
};

2. Font sizes

export default {
  // default theme object
  colors: {...}, // color palette object
  fonts: {...}, // font families object
  fontSizes: {
    tiny: '.75rem',
    xs: '0.875rem',
    base: '1rem',
    sm: '1.25rem',
    md: '1.5rem',
    lg: '2.25rem',
    xl: '3rem'
  }
  ...
};

3. Font weights

export default {
  // default theme object
  colors: {...}, // color palette object
  fonts: {...}, // font families object
  fontSizes: {...}, // font sizes object
  fontWeights: {
    hairline: 100,
    thin: 200,
    light: 300,
    normal: 400,
    medium: 500,
    semibold: 600,
    bold: 700,
    extrabold: 800,
    black: 900
  }
  ...
};

4. Line heights

export default {
  // default theme object
  colors: {...}, // color palette object
  fonts: {...}, // font families object
  fontSizes: {...}, // font sizes object
  fontWeights: {...}, // font weights object
  lineHeights: {
    xs: 1,
    sm: 1.25,
    md: 1.5,
    lg: 1.625,
    xl: 1.75
  }
  ...
};

4. Letter Spacings

export default {
  // default theme object
  colors: {...}, // color palette object
  fonts: {...}, // font families object
  fontSizes: {...}, // font sizes object
  fontWeights: {...}, // font weights object
  lineHeights: {...}, // line heights object
  letterSpacings: {
    tighter: '-0.05em',
    tight: '-0.025em',
    normal: '0',
    wide: '0.025em',
    wider: '0.05em',
    widest: '0.1em'
  }
  ...
};

Radius

NextUI provides a set of commons sizes for controlling the border-radius of an element.

export default {
  // default theme object
  colors: {...}, // color palette object
  fonts: {...}, // font families object
  fontSizes: {...}, // font sizes object
  fontWeights: {...}, // font weights object
  lineHeights: {...}, // line heights object
  radii: {
    xs: '7px',
    sm: '9px',
    md: '12px',
    base: '14px',
    lg: '14px', // preferred value by NextUI components
    xl: '18px',
    squared: '33%',
    rounded: '50%',
    pill: '9999px'
  }
  ...
};

Border weights

NextUI includes by default a set of common border weights.

export default {
  // default theme object
  type: '...', // theme type
  colors: {...}, // color palette object
  fonts: {...}, // font families object
  fontSizes: {...}, // font sizes object
  fontWeights: {...}, // font weights object
  lineHeights: {...}, // line heights object
  radii: {...}, // border radius object
  borderWeights: {
    light: '1px',
    normal: '2px',
    bold: '3px',
    extrabold: '4px',
    black: '5px'
  }
  ...

Spacing

NextUI has a set of most common spaces values which allows you to customize the global spacing and sizing scale for your project. By default these spacing value can be referenced by the padding, margin, and top, left, right, bottom, width, height and more styles.

You can see the complete space list on Stitches Property Mapping

export default {
  // default theme object
  // ... previous theme properties
  spacing: {
    0: '0rem',
    xs: '0.5rem',
    sm: '0.75rem',
    md: '1rem',
    lg: '1.375rem',
    xl: '2.25rem',
    px: '1px',
    1: '0.125rem',
    2: '0.25rem',
    3: '0.375rem',
    4: '0.5rem',
    5: '0.625rem',
    6: '0.75rem',
    7: '0.875rem',
    8: '1rem',
    9: '1.25rem',
    10: '1.5rem',
    11: '1.75rem',
    12: '2rem',
    13: '2.25rem',
    14: '2.5rem',
    15: '2.75rem',
    16: '3rem',
    17: '3.5rem',
    18: '4rem',
    20: '5rem',
    24: '6rem',
    28: '7rem',
    32: '8rem',
    36: '9rem',
    40: '10rem',
    44: '11rem',
    48: '12rem',
    52: '13rem',
    56: '14rem',
    60: '15rem',
    64: '16rem',
    72: '18rem',
    80: '20rem',
    96: '24rem'
  }
  ...
};
NameSpacePixels
00rem0px
px1px1px
10.125rem2px
20.25rem4px
30.375rem6px
4 (xs)0.5rem8px
50.625rem10px
6 (sm)0.75rem12px
70.875rem14px
8 (md)1rem16px
9 (lg)1.25rem20px
101.5rem24px
111.75rem28px
122rem32px
13 (xl)2.25rem36px
142.5rem40px
152.75rem44px
163rem48px
173.75rem60px
184rem64px
205rem80px
246rem96px
287rem112px
328rem128px
369rem144px
4010rem160px
4411rem176px
4812rem192px
5213rem208px
5614rem224px
6015rem240px
6416rem256px
7218rem288px
8020rem320px
9624rem384px

Breakpoints

NextUI exposes to you a predefined set of commonly used breakpoints which are used on components like Container and Grid.

export default {
  // default theme object
  // ... previous theme properties
  breakpoints: {
    xs: '650px',
    sm: '960px',
    md: '1280px',
    lg: '1400px',
    xl: '1920px'
  }
  ...
};

z-index values

NextUI provides a minimal set of z-Indices out of the box to help control the stacking order of components.

export default {
  // default theme object
  // ... previous theme properties
  zIndices: {
    1: '100',
    2: '200',
    3: '300',
    4: '400',
    5: '500',
    10: '1000',
    max: '9999'
  }
  ...
};

Shadows

NextUI provides a curated set of predefined shadows for light and dark themes.

// light theme
export const lightTheme = {
  // default theme object
  // ... previous theme properties
  shadows: {
    xs: '-4px 0 4px rgb(0 0 0 / 5%);',
    sm: '0 5px 20px -5px rgba(0, 0, 0, 0.1)',
    md: '0 8px 30px rgba(0, 0, 0, 0.15)',
    lg: '0 30px 60px rgba(0, 0, 0, 0.15)',
    xl: '0 40px 80px rgba(0, 0, 0, 0.25)'
  }
  ...
};
// dark theme
export const darkTheme = {
  // default theme object
  // ... previous theme properties
  shadows: {
    xs: '-4px 0 15px rgb(0 0 0 / 50%)',
    sm: '0 5px 20px -5px rgba(20, 20, 20, 0.1)',
    md: '0 8px 30px rgba(20, 20, 20, 0.15)',
    lg: '0 30px 60px rgba(20, 20, 20, 0.15)',
    xl: '0 40px 80px rgba(20, 20, 20, 0.25)'
  }
  ...
};