\documentclass[10pt,a4paper]{article}

% Packages
\usepackage{fancyhdr}           % For header and footer
\usepackage{multicol}           % Allows multicols in tables
\usepackage{tabularx}           % Intelligent column widths
\usepackage{tabulary}           % Used in header and footer
\usepackage{hhline}             % Border under tables
\usepackage{graphicx}           % For images
\usepackage{xcolor}             % For hex colours
%\usepackage[utf8x]{inputenc}    % For unicode character support
\usepackage[T1]{fontenc}        % Without this we get weird character replacements
\usepackage{colortbl}           % For coloured tables
\usepackage{setspace}           % For line height
\usepackage{lastpage}           % Needed for total page number
\usepackage{seqsplit}           % Splits long words.
%\usepackage{opensans}          % Can't make this work so far. Shame. Would be lovely.
\usepackage[normalem]{ulem}     % For underlining links
% Most of the following are not required for the majority
% of cheat sheets but are needed for some symbol support.
\usepackage{amsmath}            % Symbols
\usepackage{MnSymbol}           % Symbols
\usepackage{wasysym}            % Symbols
%\usepackage[english,german,french,spanish,italian]{babel}              % Languages

% Document Info
\author{fhefh}
\pdfinfo{
  /Title (chakra-ui-cheat-sheet.pdf)
  /Creator (Cheatography)
  /Author (fhefh)
  /Subject (Chakra UI Cheat Sheet)
}

% Lengths and widths
\addtolength{\textwidth}{6cm}
\addtolength{\textheight}{-1cm}
\addtolength{\hoffset}{-3cm}
\addtolength{\voffset}{-2cm}
\setlength{\tabcolsep}{0.2cm} % Space between columns
\setlength{\headsep}{-12pt} % Reduce space between header and content
\setlength{\headheight}{85pt} % If less, LaTeX automatically increases it
\renewcommand{\footrulewidth}{0pt} % Remove footer line
\renewcommand{\headrulewidth}{0pt} % Remove header line
\renewcommand{\seqinsert}{\ifmmode\allowbreak\else\-\fi} % Hyphens in seqsplit
% This two commands together give roughly
% the right line height in the tables
\renewcommand{\arraystretch}{1.3}
\onehalfspacing

% Commands
\newcommand{\SetRowColor}[1]{\noalign{\gdef\RowColorName{#1}}\rowcolor{\RowColorName}} % Shortcut for row colour
\newcommand{\mymulticolumn}[3]{\multicolumn{#1}{>{\columncolor{\RowColorName}}#2}{#3}} % For coloured multi-cols
\newcolumntype{x}[1]{>{\raggedright}p{#1}} % New column types for ragged-right paragraph columns
\newcommand{\tn}{\tabularnewline} % Required as custom column type in use

% Font and Colours
\definecolor{HeadBackground}{HTML}{333333}
\definecolor{FootBackground}{HTML}{666666}
\definecolor{TextColor}{HTML}{333333}
\definecolor{DarkBackground}{HTML}{48BB78}
\definecolor{LightBackground}{HTML}{F3FAF6}
\renewcommand{\familydefault}{\sfdefault}
\color{TextColor}

% Header and Footer
\pagestyle{fancy}
\fancyhead{} % Set header to blank
\fancyfoot{} % Set footer to blank
\fancyhead[L]{
\noindent
\begin{multicols}{3}
\begin{tabulary}{5.8cm}{C}
    \SetRowColor{DarkBackground}
    \vspace{-7pt}
    {\parbox{\dimexpr\textwidth-2\fboxsep\relax}{\noindent
        \hspace*{-6pt}\includegraphics[width=5.8cm]{/web/www.cheatography.com/public/images/cheatography_logo.pdf}}
    }
\end{tabulary}
\columnbreak
\begin{tabulary}{11cm}{L}
    \vspace{-2pt}\large{\bf{\textcolor{DarkBackground}{\textrm{Chakra UI Cheat Sheet}}}} \\
    \normalsize{by \textcolor{DarkBackground}{fhefh} via \textcolor{DarkBackground}{\uline{cheatography.com/57684/cs/28844/}}}
\end{tabulary}
\end{multicols}}

\fancyfoot[L]{ \footnotesize
\noindent
\begin{multicols}{3}
\begin{tabulary}{5.8cm}{LL}
  \SetRowColor{FootBackground}
  \mymulticolumn{2}{p{5.377cm}}{\bf\textcolor{white}{Cheatographer}}  \\
  \vspace{-2pt}fhefh \\
  \uline{cheatography.com/fhefh} \\
  \end{tabulary}
\vfill
\columnbreak
\begin{tabulary}{5.8cm}{L}
  \SetRowColor{FootBackground}
  \mymulticolumn{1}{p{5.377cm}}{\bf\textcolor{white}{Cheat Sheet}}  \\
   \vspace{-2pt}Published 12th August, 2021.\\
   Updated 10th September, 2021.\\
   Page {\thepage} of \pageref{LastPage}.
\end{tabulary}
\vfill
\columnbreak
\begin{tabulary}{5.8cm}{L}
  \SetRowColor{FootBackground}
  \mymulticolumn{1}{p{5.377cm}}{\bf\textcolor{white}{Sponsor}}  \\
  \SetRowColor{white}
  \vspace{-5pt}
  %\includegraphics[width=48px,height=48px]{dave.jpeg}
  Measure your website readability!\\
  www.readability-score.com
\end{tabulary}
\end{multicols}}




\begin{document}
\raggedright
\raggedcolumns

% Set font size to small. Switch to any value
% from this page to resize cheat sheet text:
% www.emerson.emory.edu/services/latex/latex_169.html
\footnotesize % Small font.

\begin{multicols*}{4}

\begin{tabularx}{3.833cm}{x{0.85825 cm} x{2.57475 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{3.833cm}}{\bf\textcolor{white}{Font}}  \tn
% Row 0
\SetRowColor{LightBackground}
body & system-ui, sans-serif \tn 
% Row Count 1 (+ 1)
% Row 1
\SetRowColor{white}
heading & Georgia, serif \tn 
% Row Count 2 (+ 1)
% Row 2
\SetRowColor{LightBackground}
mono & Menlo, monospace \tn 
% Row Count 3 (+ 1)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{3.833cm}{p{0.92691 cm} x{2.50609 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{3.833cm}}{\bf\textcolor{white}{Size}}  \tn
% Row 0
\SetRowColor{LightBackground}
max & max-content \tn 
% Row Count 1 (+ 1)
% Row 1
\SetRowColor{white}
min & min-content \tn 
% Row Count 2 (+ 1)
% Row 2
\SetRowColor{LightBackground}
full & 100\% \tn 
% Row Count 3 (+ 1)
% Row 3
\SetRowColor{white}
3xs & 14rem \tn 
% Row Count 4 (+ 1)
% Row 4
\SetRowColor{LightBackground}
2xs & 16rem \tn 
% Row Count 5 (+ 1)
% Row 5
\SetRowColor{white}
xs & 20rem \tn 
% Row Count 6 (+ 1)
% Row 6
\SetRowColor{LightBackground}
sm & 24rem \tn 
% Row Count 7 (+ 1)
% Row 7
\SetRowColor{white}
md & 28rem \tn 
% Row Count 8 (+ 1)
% Row 8
\SetRowColor{LightBackground}
lg & 32rem \tn 
% Row Count 9 (+ 1)
% Row 9
\SetRowColor{white}
xl & 36rem \tn 
% Row Count 10 (+ 1)
% Row 10
\SetRowColor{LightBackground}
2xl & 42rem \tn 
% Row Count 11 (+ 1)
% Row 11
\SetRowColor{white}
3xl & 48rem \tn 
% Row Count 12 (+ 1)
% Row 12
\SetRowColor{LightBackground}
4xl & 56rem \tn 
% Row Count 13 (+ 1)
% Row 13
\SetRowColor{white}
5xl & 64rem \tn 
% Row Count 14 (+ 1)
% Row 14
\SetRowColor{LightBackground}
6xl & 72rem \tn 
% Row Count 15 (+ 1)
% Row 15
\SetRowColor{white}
7xl & 80rem \tn 
% Row Count 16 (+ 1)
% Row 16
\SetRowColor{LightBackground}
8xl & 90rem \tn 
% Row Count 17 (+ 1)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{3.833cm}}{The sizes key allows you to customize the global sizing of components you build for your project. By default these sizes value can be referenced by the width, height, and maxWidth, minWidth, maxHeight, minHeight styles.}  \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{3.833cm}{p{0.92691 cm} x{2.50609 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{3.833cm}}{\bf\textcolor{white}{Font Size}}  \tn
% Row 0
\SetRowColor{LightBackground}
xs & 0.75rem \tn 
% Row Count 1 (+ 1)
% Row 1
\SetRowColor{white}
sm & 0.875rem \tn 
% Row Count 2 (+ 1)
% Row 2
\SetRowColor{LightBackground}
md & 1rem \tn 
% Row Count 3 (+ 1)
% Row 3
\SetRowColor{white}
lg & 1.125rem \tn 
% Row Count 4 (+ 1)
% Row 4
\SetRowColor{LightBackground}
xl & 1.25rem \tn 
% Row Count 5 (+ 1)
% Row 5
\SetRowColor{white}
2xl & 1.5rem \tn 
% Row Count 6 (+ 1)
% Row 6
\SetRowColor{LightBackground}
3xl & 1.875rem \tn 
% Row Count 7 (+ 1)
% Row 7
\SetRowColor{white}
4xl & 2.25rem \tn 
% Row Count 8 (+ 1)
% Row 8
\SetRowColor{LightBackground}
5xl & 3rem \tn 
% Row Count 9 (+ 1)
% Row 9
\SetRowColor{white}
6xl & 3.75rem \tn 
% Row Count 10 (+ 1)
% Row 10
\SetRowColor{LightBackground}
7xl & 4.5rem \tn 
% Row Count 11 (+ 1)
% Row 11
\SetRowColor{white}
8xl & 6rem \tn 
% Row Count 12 (+ 1)
% Row 12
\SetRowColor{LightBackground}
9xl & 8rem \tn 
% Row Count 13 (+ 1)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{3.833cm}{x{1.7165 cm} x{1.7165 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{3.833cm}}{\bf\textcolor{white}{Line Height}}  \tn
% Row 0
\SetRowColor{LightBackground}
normal & normal \tn 
% Row Count 1 (+ 1)
% Row 1
\SetRowColor{white}
none & 1 \tn 
% Row Count 2 (+ 1)
% Row 2
\SetRowColor{LightBackground}
shorter & 1.25 \tn 
% Row Count 3 (+ 1)
% Row 3
\SetRowColor{white}
short & 1.375 \tn 
% Row Count 4 (+ 1)
% Row 4
\SetRowColor{LightBackground}
base & 1.5 \tn 
% Row Count 5 (+ 1)
% Row 5
\SetRowColor{white}
tall & 1.625 \tn 
% Row Count 6 (+ 1)
% Row 6
\SetRowColor{LightBackground}
taller & 2 \tn 
% Row Count 7 (+ 1)
% Row 7
\SetRowColor{white}
3 & 0.75rem \tn 
% Row Count 8 (+ 1)
% Row 8
\SetRowColor{LightBackground}
4 & 1rem \tn 
% Row Count 9 (+ 1)
% Row 9
\SetRowColor{white}
5 & 1.25rem \tn 
% Row Count 10 (+ 1)
% Row 10
\SetRowColor{LightBackground}
6 & 1.5rem \tn 
% Row Count 11 (+ 1)
% Row 11
\SetRowColor{white}
7 & 1.75rem \tn 
% Row Count 12 (+ 1)
% Row 12
\SetRowColor{LightBackground}
8 & 2rem \tn 
% Row Count 13 (+ 1)
% Row 13
\SetRowColor{white}
9 & 2.25rem \tn 
% Row Count 14 (+ 1)
% Row 14
\SetRowColor{LightBackground}
10 & 2.5rem \tn 
% Row Count 15 (+ 1)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{3.833cm}{p{1.13289 cm} x{2.30011 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{3.833cm}}{\bf\textcolor{white}{Border radius}}  \tn
% Row 0
\SetRowColor{LightBackground}
none & 0 \tn 
% Row Count 1 (+ 1)
% Row 1
\SetRowColor{white}
sm & 0.125rem \tn 
% Row Count 2 (+ 1)
% Row 2
\SetRowColor{LightBackground}
base & 0.25rem \tn 
% Row Count 3 (+ 1)
% Row 3
\SetRowColor{white}
md & 0.375rem \tn 
% Row Count 4 (+ 1)
% Row 4
\SetRowColor{LightBackground}
lg & 0.5rem \tn 
% Row Count 5 (+ 1)
% Row 5
\SetRowColor{white}
xl & 0.75rem \tn 
% Row Count 6 (+ 1)
% Row 6
\SetRowColor{LightBackground}
2xl & 1rem \tn 
% Row Count 7 (+ 1)
% Row 7
\SetRowColor{white}
3xl & 1.5rem \tn 
% Row Count 8 (+ 1)
% Row 8
\SetRowColor{LightBackground}
full & 9999px \tn 
% Row Count 9 (+ 1)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{3.833cm}}{Chakra provides a set of smooth corner radius values.}  \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{3.833cm}{x{2.57475 cm} p{0.85825 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{3.833cm}}{\bf\textcolor{white}{Font Weight}}  \tn
% Row 0
\SetRowColor{LightBackground}
hairline & 100 \tn 
% Row Count 1 (+ 1)
% Row 1
\SetRowColor{white}
thin & 200 \tn 
% Row Count 2 (+ 1)
% Row 2
\SetRowColor{LightBackground}
light & 300 \tn 
% Row Count 3 (+ 1)
% Row 3
\SetRowColor{white}
normal & 400 \tn 
% Row Count 4 (+ 1)
% Row 4
\SetRowColor{LightBackground}
medium & 500 \tn 
% Row Count 5 (+ 1)
% Row 5
\SetRowColor{white}
semibold & 600 \tn 
% Row Count 6 (+ 1)
% Row 6
\SetRowColor{LightBackground}
bold & 700 \tn 
% Row Count 7 (+ 1)
% Row 7
\SetRowColor{white}
extrabold & 800 \tn 
% Row Count 8 (+ 1)
% Row 8
\SetRowColor{LightBackground}
black & 900 \tn 
% Row Count 9 (+ 1)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{3.833cm}{x{1.61351 cm} x{1.81949 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{3.833cm}}{\bf\textcolor{white}{Letter Spacing}}  \tn
% Row 0
\SetRowColor{LightBackground}
tighter & -0.05em \tn 
% Row Count 1 (+ 1)
% Row 1
\SetRowColor{white}
tight & -0.025em \tn 
% Row Count 2 (+ 1)
% Row 2
\SetRowColor{LightBackground}
normal & 0 \tn 
% Row Count 3 (+ 1)
% Row 3
\SetRowColor{white}
wide & 0.025em \tn 
% Row Count 4 (+ 1)
% Row 4
\SetRowColor{LightBackground}
wider & 0.05em \tn 
% Row Count 5 (+ 1)
% Row 5
\SetRowColor{white}
widest & 0.1em \tn 
% Row Count 6 (+ 1)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{3.833cm}{p{0.6066 cm} x{1.60749 cm} p{0.81891 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{3}{x{3.833cm}}{\bf\textcolor{white}{Spacing}}  \tn
% Row 0
\SetRowColor{LightBackground}
px & 1px & 1px \tn 
% Row Count 1 (+ 1)
% Row 1
\SetRowColor{white}
0.5 & 0.125rem & 2px \tn 
% Row Count 2 (+ 1)
% Row 2
\SetRowColor{LightBackground}
1 & 0.25rem & 4px \tn 
% Row Count 3 (+ 1)
% Row 3
\SetRowColor{white}
1.5 & 0.375rem & 6px \tn 
% Row Count 4 (+ 1)
% Row 4
\SetRowColor{LightBackground}
2 & 0.5rem & 8px \tn 
% Row Count 5 (+ 1)
% Row 5
\SetRowColor{white}
2.5 & 0.625rem & 10px \tn 
% Row Count 6 (+ 1)
% Row 6
\SetRowColor{LightBackground}
3 & 0.75rem & 12px \tn 
% Row Count 7 (+ 1)
% Row 7
\SetRowColor{white}
3.5 & 0.875rem & 14px \tn 
% Row Count 8 (+ 1)
% Row 8
\SetRowColor{LightBackground}
4 & 1rem & 16px \tn 
% Row Count 9 (+ 1)
% Row 9
\SetRowColor{white}
5 & 1.25rem & 20px \tn 
% Row Count 10 (+ 1)
% Row 10
\SetRowColor{LightBackground}
6 & 1.5rem & 24px \tn 
% Row Count 11 (+ 1)
\hhline{>{\arrayrulecolor{DarkBackground}}---}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{3.833cm}{x{2.30011 cm} p{1.13289 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{3.833cm}}{\bf\textcolor{white}{z-index values}}  \tn
% Row 0
\SetRowColor{LightBackground}
hide & -1 \tn 
% Row Count 1 (+ 1)
% Row 1
\SetRowColor{white}
auto & auto \tn 
% Row Count 2 (+ 1)
% Row 2
\SetRowColor{LightBackground}
base & 0 \tn 
% Row Count 3 (+ 1)
% Row 3
\SetRowColor{white}
docked & 10 \tn 
% Row Count 4 (+ 1)
% Row 4
\SetRowColor{LightBackground}
dropdown & 1000 \tn 
% Row Count 5 (+ 1)
% Row 5
\SetRowColor{white}
sticky & 1100 \tn 
% Row Count 6 (+ 1)
% Row 6
\SetRowColor{LightBackground}
banner & 1200 \tn 
% Row Count 7 (+ 1)
% Row 7
\SetRowColor{white}
overlay & 1300 \tn 
% Row Count 8 (+ 1)
% Row 8
\SetRowColor{LightBackground}
modal & 1400 \tn 
% Row Count 9 (+ 1)
% Row 9
\SetRowColor{white}
popover & 1500 \tn 
% Row Count 10 (+ 1)
% Row 10
\SetRowColor{LightBackground}
skipLink & 1600 \tn 
% Row Count 11 (+ 1)
% Row 11
\SetRowColor{white}
toast & 1700 \tn 
% Row Count 12 (+ 1)
% Row 12
\SetRowColor{LightBackground}
tooltip & 1800 \tn 
% Row Count 13 (+ 1)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{3.833cm}}{Chakra provides a minimal set of z-indeces out of the box to help control the stacking order of components.}  \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}


% That's all folks
\end{multicols*}

\end{document}