Customizing single components for Chakra UI



    Khalid Khan

    Chakra UI companion for Javascript

    This code snippet is used to create your own custom component styles in Chakra UI. A component style consists of baseStyle, sizes, variants and an optional defaultProps to denote the default size or variant.

    Use this code snippet and create your own custom component styles.

    Library: @chakra-ui/react

    Shortcut: chakra.customcomponentstyle

    import { extendTheme } from '@chakra-ui/react'
    const ComponentStyle = {
      style //style object for base or default style
      baseStyle: {},
      size //styles for different sizes ("sm", "md", "lg")
      sizes: {},
      visual //styles for different visual variants ("outline", "solid")
      variants: {},
      default//default values for `size` and `variant`
      defaultProps: {
        size: '',
        variant: '',
    Codiga Logo
    Codiga Hub
    • Rulesets
    • Playground
    • Snippets
    • Cookbooks
    • Security
    • Privacy Policy
    • Code Privacy
    • Terms of Service
    soc-2 icon

    We are SOC-2 Compliance Certified

    G2 high performer medal

    Codiga – All rights reserved 2022.