FAQ

Is there a Datepicker in Chakra UI?#

No, currently we don't provide a datepicker component. We recommend building your own custom datepicker with Chakra UI and either react-datepicker or dayzed.

In case you have wrapped a Tooltip around a disabled Button and you still want to show the Tooltip, you need to provide the shouldWrapChildren prop to the Tooltip.

Please be aware that this prop will break the borderRadius of the buttons within a ButtonGroup because it wraps a span around the disabled buttons.

How can I get Storybook to work with Chakra UI?#

If you're facing an issue where Storybook isn't working with Chakra UI, here's a work around 👇

In your .storybook/main.js file, you'll need to config the features and webpackFinal properties like so:

module.exports = {
  stories: ['../**/*.stories.mdx', '../**/*.stories.@(js|jsx|ts|tsx)'],
  addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
  framework: '@storybook/react',
  // unpins Storybook's dependence on Emotion 10 so that build can compile successfully
  features: { emotionAlias: false },
  webpackFinal: async (config, { configType }) => {
    // `configType` has a value of 'DEVELOPMENT' or 'PRODUCTION'
    // You can change the configuration based on that.
    // 'PRODUCTION' is used when building the static version of storybook.

    // https://github.com/polkadot-js/extension/issues/621#issuecomment-759341776
    // framer-motion uses the .mjs notation and we need to include it so that webpack will
    // transpile it for us correctly (enables using a CJS module inside an ESM).
    config.module.rules.push({
      test: /\.mjs$/,
      include: /node_modules/,
      type: 'javascript/auto',
    })
    // Return the altered config
    return config
  },
}

FAQ

Tooltip does not work around disabled Button#

How can I get Storybook to work with Chakra UI?#