Skip to Content

Build faster with Premium Chakra UI Components 💎

Learn more
Sponsor
  • Getting Started
  • Styled System
  • Components
  • Hooks
  • Figma
  • Community
  • Playground

Layout

Aspect Ratio
Box
Center
Container
Flex
Grid
SimpleGrid
Stack
Wrap

Forms

Button
Checkbox
Editable
Form Control
Icon Button
Input
Number Input
Pin Input
Radio
Range Slider
Select
Slider
Switch
Textarea

Data Display

Badge
Card
Code
Divider
Kbd
List
Stat
Table
Tag

Feedback

Alert
Circular Progress
Progress
Skeleton
Spinner
Toast

Typography

Text
Heading
Highlight

Overlay

Alert Dialog
Drawer
Menu
Modal
Popover
Tooltip

Disclosure

Accordion
Tabs
Visually Hidden

Navigation

Breadcrumb
Link
LinkOverlay
SkipNav
StepperNew

Media and icons

Avatar
Icon
Image

Other

Close Button
Portal
Show / Hide
Transitions

Image

The Image component is used to display images with support for fallback.

    Source@chakra-ui/image
  • Usage
  • Props

Props#

Props#

Edit this page on GitHub

Proudly made inNigeria by Segun Adebayo

Deployed by â–² Vercel

On this page

  • Props
Convert Figma Designs to Chakra UI code