Chakra UI Snippets

Chakra UI Snippets Extension is designed to help developers quickly and easily add components to their projects.

Currently just support some imports, hooks and components if you have anyone idea, can submit PR or Issue

Supported Languages

• JavaScript(.js)
• TypeScript(.ts)
• JavaScriptReact(.jsx)
• TypeScriptReact(.tsx)

Snippets

Imports
i-aspect-rato
i-box
i-center
i-container
i-flex
i-grid
i-simple-grid
i-stack
i-h-stack
i-v-stack
i-wrap
i-text
i-heading
i-highlight
i-avatar
i-avatar-badge
i-avatar-group
i-icon
i-image
i-use-boolean
i-use-breakpoint-value
i-use-clipboard
i-use-const
i-use-controllable-state
i-use-dimensions
i-use-disclosure
i-use-media-query
i-use-merge-refs
i-use-outside-click
i-use-prefers-reduced-motion
i-use-theme
i-use-token
i-btn,i-button
i-button-group
i-checkbox
i-checkbox-group
i-editable
i-form-control
i-form-label
i-form-error-message
i-form-helper-text
i-icon-btn,i-icon-button
i-input
i-number-input
i-number-input
i-radio
i-radio-group
i-select
i-switch
i-textarea
i-range-slider
i-slider
i-badge
i-code
i-divider
i-kbd
i-tag

Hooks
chakra-use-theme
chakra-use-out-side-click
chakra-use-disclosure
chakra-use-clipboard
chakra-hook-use-boolean
chakra-hook-use-breakpoint-value
chakra-hook-use-const
chakra-hook-use-dimensions
chakra-hook-use-controllableState
chakra-hook-use-mediaQuery
chakra-use-merge-refs
chakra-use-prefers-reduced-motion
chakra-use-token

Components
chakra-aspect-ratio
chakra-box
chakra-center
chakra-container
chakra-flex
chakra-grid
chakra-simple-grid
chakra-stack
chakra-hstack
chakra-vstack
chakra-wrap
chakra-btn,chakra-button
chakra-checkbox
chakra-checkbox-group
chakra-editable
chakra-editable-preview
chakra-editable-input
chakra-editable-textarea
chakra-form-control
chakra-form-label
chakra-form-error-message
chakra-form-helper-text
chakra-icon-btn,chakra-icon-button
chakra-input
chakra-number-input
chakra-number-input-field
chakra-number-input-stepper
chakra-number-increment-stepper
chakra-number-decrement-stepper
chakra-pin-input
chakra-pin-input-field
chakra-radio-group
chakra-radio
chakra-range-slider
chakra-range-slider-track
chakra-range-slider-filled-track
chakra-range-slider-thumb
chakra-select
chakra-slider
chakra-slider-track
chakra-slider-filled-track
chakra-slider-thumb
chakra-switch
chakra-textarea
chakra-badge
chakra-code
chakra-divider
chakra-kbd
chakra-tag
chakra-avatar
chakra-icon
chakra-image
chakra-text
chakra-heading
chakra-highlight