Create great components
for your next project
Set of basic Figma and code components. Sane defaults. Framework-agnostic. Based on Tailwind CSS. Open source. AI native.
| Task | Priority | Tags | |
|---|---|---|---|
| Redesign form inputs in UI Kit | High | Components |
|
| Audit button variants in Figma | Medium | Tokens |
|
| Update shadow tokens | Low | Tokens |
|
| Redesign radio buttons | Low | Components |
Primary
Danger
Secondary
Outline
Ghost
Link
Upgrade account
Turn on Kaida
Discuss. Design. Develop. Repeat!
Bridging the gap between des & dev
We enable designers and developers to use the same components and help stakeholders speak the same language.
<button
name="button"
type="button"
class="flex gap-8px items-center justify-center whitespace-nowrap py-4px px-16px text-btn2 [&>svg]:w-16px [&>svg]:h-16px rounded-8px text-white dark:text-black-900 border disabled:opacity-30 focus:shadow-[0_0_0_2px_#FFFFFF,0_0_0_4px_#0F172A] dark:focus:shadow-[0_0_0_2px_#2d2e33,0_0_0_4px_#FFFFFF] bg-black border-black hover:bg-black-700 hover:border-black-700 focus:bg-black-700 focus:border-black-700 active:bg-black-500 active:border-black-500 dark:bg-white dark:border-white dark:hover:bg-black-200 dark:hover:border-black-200 dark:focus:bg-black-200 dark:focus:border-black-200 dark:active:bg-black-400 dark:active:border-black-400"
title="Primary">
Primary
</button>Streamlined Design, Ready for Code.
Well-thought-out system of components
Thoughtful naming, states, and variants in Figma, plus open-source component code for development.
