Skip to content
| Marketplace
Sign in
Visual Studio Code>Snippets>chakra-ui-snippetsNew to Visual Studio Code? Get it now.
chakra-ui-snippets

chakra-ui-snippets

wei hong

|
4,961 installs
| (0) | Free
Chakra UI Snippets is a collection of code snippets for the Chakra UI library for React. It is designed to help developers quickly and easily add Chakra UI components to their projects.
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

Chakra UI Snippets

Visual Studio Marketplace Version Visual Studio Marketplace Installs

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
  • Contact us
  • Jobs
  • Privacy
  • Manage cookies
  • Terms of use
  • Trademarks
© 2025 Microsoft