How to remove Chakra UI blue outline on focus

The simplest method is to set globally in your theme.js:

const theme = extendTheme({ ... components: { ... Button: { baseStyle: { _focus: { boxShadow: 'none', } } } ...

Then import the theme in your _app.js:

import { ChakraProvider } from '@chakra-ui/react' import theme from '../theme/theme' function MyApp({ Component, pageProps }) { return ( <ChakraProvider theme={theme}> <Component {...pageProps} /> </ChakraProvider> ) } export default MyApp

The common mistake is to think that the blue box is an outline but in fact it's a box shadow.