chakra documentation container/breakpoints demonstration
github
react-icons

Chakra-ui cheatsheet

  • Black#000000
  • White#FFFFFF
  • gray 50#F7FAFC
  • gray 100#EDF2F7
  • gray 200#E2E8F0
  • gray 300#CBD5E0
  • gray 400#A0AEC0
  • gray 500#718096
  • gray 600#4A5568
  • gray 700#2D3748
  • gray 800#1A202C
  • gray 900#171923
  • red 50#FFF5F5
  • red 100#FED7D7
  • red 200#FEB2B2
  • red 300#FC8181
  • red 400#F56565
  • red 500#E53E3E
  • red 600#C53030
  • red 700#9B2C2C
  • red 800#822727
  • red 900#63171B
  • orange 50#FFFAF0
  • orange 100#FEEBC8
  • orange 200#FBD38D
  • orange 300#F6AD55
  • orange 400#ED8936
  • orange 500#DD6B20
  • orange 600#C05621
  • orange 700#9C4221
  • orange 800#7B341E
  • orange 900#652B19
  • yellow 50#FFFFF0
  • yellow 100#FEFCBF
  • yellow 200#FAF089
  • yellow 300#F6E05E
  • yellow 400#ECC94B
  • yellow 500#D69E2E
  • yellow 600#B7791F
  • yellow 700#975A16
  • yellow 800#744210
  • yellow 900#5F370E
  • green 50#F0FFF4
  • green 100#C6F6D5
  • green 200#9AE6B4
  • green 300#68D391
  • green 400#48BB78
  • green 500#38A169
  • green 600#2F855A
  • green 700#276749
  • green 800#22543D
  • green 900#1C4532
  • teal 50#E6FFFA
  • teal 100#B2F5EA
  • teal 200#81E6D9
  • teal 300#4FD1C5
  • teal 400#38B2AC
  • teal 500#319795
  • teal 600#2C7A7B
  • teal 700#285E61
  • teal 800#234E52
  • teal 900#1D4044
  • blue 50#ebf8ff
  • blue 100#bee3f8
  • blue 200#90cdf4
  • blue 300#63b3ed
  • blue 400#4299e1
  • blue 500#3182ce
  • blue 600#2b6cb0
  • blue 700#2c5282
  • blue 800#2a4365
  • blue 900#1A365D
  • cyan 50#EDFDFD
  • cyan 100#C4F1F9
  • cyan 200#9DECF9
  • cyan 300#76E4F7
  • cyan 400#0BC5EA
  • cyan 500#00B5D8
  • cyan 600#00A3C4
  • cyan 700#0987A0
  • cyan 800#086F83
  • cyan 900#065666
  • purple 50#FAF5FF
  • purple 100#E9D8FD
  • purple 200#D6BCFA
  • purple 300#B794F4
  • purple 400#9F7AEA
  • purple 500#805AD5
  • purple 600#6B46C1
  • purple 700#553C9A
  • purple 800#44337A
  • purple 900#322659
  • pink 50#FFF5F7
  • pink 100#FED7E2
  • pink 200#FBB6CE
  • pink 300#F687B3
  • pink 400#ED64A6
  • pink 500#D53F8C
  • pink 600#B83280
  • pink 700#97266D
  • pink 800#702459
  • pink 900#521B41
  • linkedin.50#E8F4F9
  • linkedin.100#CFEDFB
  • linkedin.200#9BDAF3
  • linkedin.300#68C7EC
  • linkedin.400#34B3E4
  • linkedin.500#00A0DC
  • linkedin.600#008CC9
  • linkedin.700#0077B5
  • linkedin.800#005E93
  • linkedin.900#004471
  • facebook.50#E8F4F9
  • facebook.100#D9DEE9
  • facebook.200#B7C2DA
  • facebook.300#6482C0
  • facebook.400#4267B2
  • facebook.500#385898
  • facebook.600#314E89
  • facebook.700#29487D
  • facebook.800#223B67
  • facebook.900#1E355B
  • messenger.50#D0E6FF
  • messenger.100#B9DAFF
  • messenger.200#A2CDFF
  • messenger.300#7AB8FF
  • messenger.400#2E90FF
  • messenger.500#0078FF
  • messenger.600#0063D1
  • messenger.700#0052AC
  • messenger.800#003C7E
  • messenger.900#002C5C
  • whatsapp.50#dffeec
  • whatsapp.100#b9f5d0
  • whatsapp.200#90edb3
  • whatsapp.300#65e495
  • whatsapp.400#3cdd78
  • whatsapp.500#22c35e
  • whatsapp.600#179848
  • whatsapp.700#0c6c33
  • whatsapp.800#01421c
  • whatsapp.900#001803
  • twitter.50#E5F4FD
  • twitter.100#C8E9FB
  • twitter.200#A8DCFA
  • twitter.300#83CDF7
  • twitter.400#57BBF5
  • twitter.500#1DA1F2
  • twitter.600#1A94DA
  • twitter.700#1681BF
  • twitter.800#136B9E
  • twitter.900#0D4D71
  • telegram.50#E3F2F9
  • telegram.100#C5E4F3
  • telegram.200#A2D4EC
  • telegram.300#7AC1E4
  • telegram.400#47A9DA
  • telegram.500#0088CC
  • telegram.600#007AB8
  • telegram.700#006BA1
  • telegram.800#005885
  • telegram.900#003F5E

Responsive container, resize to see breakpoints
Container maxW={[null, 480, 768, 992, 1280, 1536]} />

Responsive container, resize to see breakpoints
<Container maxW={[null, container.sm, container.md, container.lg, container.xl]} />

Sizes (<Container maxW="id" />)

full

100%

max

max-content

min

min-content

3xs

14rem

224px

2xs

16rem

256px

xs

20rem

320px

sm

24rem

384px

md

28rem

448px

lg

32rem

512px

xl

36rem

576px

2xl

42rem

672px

3xl

48rem

768px

4xl

56rem

896px

5xl

64rem

1024px

6xl

72rem

1152px

7xl

80rem

1280px

8xl

90rem

1440px

container.sm

640px

container.md

768px

container.lg

1024px

container.xl

1280px

  • Font Sizes

  • xs
    0.75rem
    12px
  • sm
    0.875rem
    14px
  • md
    1rem
    16px
  • lg
    1.125rem
    18px
  • xl
    1.25rem
    20px
  • 2xl
    1.5rem
    24px
  • 3xl
    1.875rem
    30px
  • 4xl
    2.25rem
    36px
  • 5xl
    3rem
    48px
  • 6xl
    3.75rem
    60px
  • 7xl
    4.5rem
    72px
  • 8xl
    6rem
    96px
  • 9xl
    8rem
    128px

  • Font Weight

  • hairline
    100
  • thin
    200
  • light
    300
  • normal
    400
  • medium
    500
  • semibold
    600
  • bold
    700
  • extrabold
    800
  • black
    900

  • Line Height

  • none
    1
  • shorter
    1.25
  • short
    1.375
  • base
    1.5
  • tall
    1.625
  • taller
    2
  • 3
    0.75rem
  • 4
    1rem
  • 5
    1.25rem
  • 6
    1.5rem
  • 7
    1.75rem
  • 8
    2rem
  • 9
    2.25rem
  • 10
    2.5rem

  • Letter Spacing

  • tighter
    -0.05em
  • tight
    -0.025em
  • normal
    0
  • wide
    0.025em
  • wider
    0.05em
  • widest
    0.1em

  • Radius

  • none
    0
  • sm
    0.125rem
  • base
    0.25rem
  • md
    0.375rem
  • lg
    0.5rem
  • xl
    0.75rem
  • 2xl
    1rem
  • 3xl
    1.5rem
  • full
    9999px

  • ZIndices

  • hide
    -1
  • auto
    auto
  • base
    0
  • docked
    10
  • dropdown
    1000
  • sticky
    1100
  • banner
    1200
  • overlay
    1300
  • modal
    1400
  • popover
    1500
  • skipLink
    1600
  • toast
    1700
  • tooltip
    1800

  • Breakpoints

  • sm
    30em
    480px
  • md
    48em
    768px
  • lg
    62em
    992px
  • xl
    80em
    1280px
  • 2xl
    96em
    1536px

  • Spaces

  • px
    1px
    0
  • 0
    0
    1px
  • 0.5
    0.125rem
    2px
  • 1
    0.25rem
    4px
  • 1.5
    0.375rem
    6px
  • 2
    0.5rem
    8px
  • 2.5
    0.625rem
    10px
  • 3
    0.75rem
    12px
  • 3.5
    0.875rem
    14px
  • 4
    1rem
    16px
  • 5
    1.25rem
    20px
  • 6
    1.5rem
    24px
  • 7
    1.75rem
    28px
  • 8
    2rem
    32px
  • 9
    2.25rem
    36px
  • 10
    2.5rem
    40px
  • 12
    3rem
    48px
  • 14
    3.5rem
    56px
  • 16
    4rem
    64px
  • 20
    5rem
    80px
  • 24
    6rem
    96px
  • 28
    7rem
    112px
  • 32
    8rem
    128px
  • 36
    9rem
    144px
  • 40
    10rem
    160px
  • 44
    11rem
    176px
  • 48
    12rem
    192px
  • 56
    14rem
    224px
  • 60
    15rem
    240px
  • 64
    16rem
    256px
  • 72
    18rem
    288px
  • 80
    20rem
    320px
  • 96
    24rem
    384px
  • xs
  • sm
  • base
  • md
  • lg
  • xl
  • 2xl
  • dark-lg
  • outline
  • inner
  • <AddIcon />
  • <ArrowBackIcon />
  • <ArrowDownIcon />
  • <ArrowForwardIcon />
  • <ArrowLeftIcon />
  • <ArrowRightIcon />
  • <ArrowUpIcon />
  • <ArrowUpDownIcon />
  • <AtSignIcon />
  • <AttachmentIcon />
  • <BellIcon />
  • <CalendarIcon />
  • <ChatIcon />
  • <CheckIcon />
  • <CheckCircleIcon />
  • <ChevronDownIcon />
  • <ChevronLeftIcon />
  • <ChevronRightIcon />
  • <ChevronUpIcon />
  • <CloseIcon />
  • <CopyIcon />
  • <DeleteIcon />
  • <DownloadIcon />
  • <DragHandleIcon />
  • <EditIcon />
  • <EmailIcon />
  • <ExternalLinkIcon />
  • <HamburgerIcon />
  • <InfoIcon />
  • <InfoOutlineIcon />
  • <LinkIcon />
  • <LockIcon />
  • <MinusIcon />
  • <MoonIcon />
  • <NotAllowedIcon />
  • <PhoneIcon />
  • <PlusSquareIcon />
  • <QuestionIcon />
  • <QuestionOutlineIcon />
  • <RepeatIcon />
  • <RepeatClockIcon />
  • <SearchIcon />
  • <Search2Icon />
  • <SettingsIcon />
  • <SmallAddIcon />
  • <SmallCloseIcon />
  • <SpinnerIcon />
  • <StarIcon />
  • <SunIcon />
  • <TimeIcon />
  • <TriangleDownIcon />
  • <TriangleUpIcon />
  • <UnlockIcon />
  • <UpDownIcon />
  • <ViewIcon />
  • <ViewOffIcon />
  • <WarningIcon />
  • <WarningTwoIcon />