Build faster with Premium Chakra UI Components 💎

Learn more
Skip to Content
DocsEnterpriseBlogShowcase
Sponsor

Sizes

The list of available size tokens

Tokens

Chakra UI supports the following size tokens out of the box.

tokenSizes

Name

Value

Pixel

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

4.5

1.125rem

18px

5

1.25rem

20px

6

1.5rem

24px

7

1.75rem

28px

8

2rem

32px

9

2.25rem

36px

10

2.5rem

40px

11

2.75rem

44px

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

52

13rem

208px

56

14rem

224px

60

15rem

240px

64

16rem

256px

72

18rem

288px

80

20rem

320px

96

24rem

384px

namedSizes

Name

Value

max

max-content

min

min-content

fit

fit-content

prose

60ch

full

100%

dvh

100dvh

svh

100svh

lvh

100lvh

dvw

100dvw

svw

100svw

lvw

100lvw

vw

100vw

vh

100vh

fractionalSizes

Name

Value

1/2

50%

1/3

33.333333%

2/3

66.666667%

1/4

25%

3/4

75%

1/5

20%

2/5

40%

3/5

60%

4/5

80%

1/6

16.666667%

2/6

33.333333%

3/6

50%

4/6

66.666667%

5/6

83.333333%

1/12

8.333333%

2/12

16.666667%

3/12

25%

4/12

33.333333%

5/12

41.666667%

6/12

50%

7/12

58.333333%

8/12

66.666667%

9/12

75%

10/12

83.333333%

11/12

91.666667%

breakpointSizes

Name

Value

breakpoint-sm

480px

breakpoint-md

768px

breakpoint-lg

1024px

breakpoint-xl

1280px

breakpoint-2xl

1536px

largeSizes

Name

Value

3xs

14rem

2xs

16rem

xs

20rem

sm

24rem

md

28rem

lg

32rem

xl

36rem

2xl

42rem

3xl

48rem

4xl

56rem

5xl

64rem

6xl

72rem

7xl

80rem

8xl

90rem

Previous

Shadows

Next

Spacing