Skip to main content

Meteor

1. Installation

info

To get started with Meteor and Chakra UI, you must have the Meteor CLI installed.

To create a Chakra UI with meteor project, simply run:

meteor create project-name --chakra-ui

This creates a project with Chakra UI and sets up the ChakraProvider.

ChakraProvider Props

NameTypeDefaultDescription
resetCSSbooleantrueautomatically includes <CSSReset />
themeTheme@chakra-ui/themeoptional custom theme
colorModeManagerStorageManagerlocalStorageManagermanager to persist a users color mode preference in
portalZIndexnumberundefinedcommon z-index to use for Portal
note

You're good to go with steps 1 and 2. However, if you'd love to take it a step further, check out step 3.

2. Optional Setup

Customizing Theme

If you intend to customise the default theme object to match your design requirements, you can extend the theme from @chakra-ui/react.

Chakra UI provides an extendTheme function that deep merges the default theme with your customizations.

// 1. Import the extendTheme function
import { extendTheme } from '@chakra-ui/react';

// 2. Extend the theme to include custom colors, fonts, etc
const colors = {
brand: {
900: '#1a365d',
800: '#153e75',
700: '#2a69ac',
},
};

const theme = extendTheme({ colors });

// 3. Pass the `theme` prop to the `ChakraProvider`
function App() {
return (
<ChakraProvider theme={theme}>
<ErrorBoundary
FallbackComponent={RootErrorFallback}
resetKeys={[router.asPath]}
onReset={() => {
// This ensures the Blitz useQuery hooks will automatically refetch
// data any time you reset the error boundary
queryCache.resetErrorBoundaries();
}}
>
{getLayout(<Component {...pageProps} />)}
</ErrorBoundary>
</ChakraProvider>
);
}
tip

To further customize components or build your own design system, the theme-tools package includes useful utilities. Install @chakra-ui/theme-tools.

Using Chakra Icons

Chakra provides a set of commonly used interface icons you can use in your project.

If you want to use the icons from Chakra UI, install @chakra-ui/icons.

tip

Follow this guide for customising Chakra Icons: Using Chakra UI Icons.

Notes on TypeScript 🚨

Please note that when adding Chakra UI to a TypeScript project, a minimum TypeScript version of 4.1.0 is required.