n/a = we’ll use Chakra default theme settings

Foundations

Style KDS (Github) KDS (Figma)
Colors ✅ Link ✅ Link
Typography ✅ Link ✅ Link
Breakpoints ✅ Link ✅ Link
Spacing n/a ✅ Link
Sizes n/a ✅ Link
Border radius n/a ✅ Link
Shadows ✅ Link ✅ Link

Forms

Component KDS (Github) KDS (Figma)
Button ✅ Link ✅ Link
Checkbox ✅ Link ✅ Link
Input ✅ Link ✅ Link
Radio ✅ Link ✅ Link
Select ✅ Link ✅ Link
Switch ✅ Link ✅ Link
Textarea ✅ Link ✅ Link
...

Data Display

Component KDS (Github) KDS (Figma)
Badge ✅ Link ✅ Link
List ⏳ ✅ Link
Stat ✅ Link ✅ Link
Table ✅ Link ✅ Link
...

Feedback

Component KDS (Github) KDS (Figma)
Alert ✅ Link ✅ Link
Progress ⏳ ⏳
Spinner ⏳ ✅ Link
Toast ✅ Link ✅ Link

Overlay

Component KDS (Github) KDS (Figma)
Alert Dialog ✅ Link ✅ Link
Menu ⏳ ✅ Link
Modal ✅ Link ✅ Link
Popover ✅ Link ✅ Link
...

Disclosure

Component KDS (Github) KDS (Figma)
Stat Accordion ✅ Link ✅ Link
Tabs ✅ Link ✅ Link
...

Navigation

Component KDS (Github) KDS (Figma)
Breadcrumb ✅ Link ✅ Link
Link ⏳ ✅ Link

Media and Icons

Component KDS (Github) KDS (Figma)
Avatar ⏳ ✅ Link
Icon ✅ Link ✅ Link

Custom

Component KDS (Github) KDS (Figma)
Date picker ✅ Single, Range ✅ Link
Card ✅ Link ✅ Link
MediaCard ✅ Link ✅ Link
App Header ✅ Link ✅ Link
Pagination ⏳ ✅ Link
Page Header ✅ Link ✅ Link
Stepper ✅ Link ✅ Link
Timeline ⏳ ✅ Link
...