Koan is a react component library inspired by Chakra UI, Styled System and Braid that implements CultureAmp's Kaizen design system. It emphasises a ‘lego bricks’ approach to building UIs. Inside you'll find a set of composable and flexible building blocks so that you can focus on creating awesome web apps while producing simple and maintainable react code with almost zero CSS.
Getting Started
Install Koan with npm install koan-design or yarn add koan-design.
After installing, add the KoanProvider somewhere near the root of your app.
Example
Here's an example of what it looks like to build something using Koan:
Plus
Verified
·
Richmond
Modern, Chic Penthouse with City Views
$119/night
4.84
(190)
<Stack p="md" bg="gray200" radius="sm">
<Stack>
<Box h="16xl" radius="xs" htmlAttributes={{ style: { backgroundImage: "url(./penthouse.jpg)", backgroundSize: "cover" } }} />
<Inline gap="sm" alignY="center">
<Tag color="green200" radius="xs" px="sm">Plus</Tag>
<Tag color="blue200" radius="xs" px="sm">Verified</Tag>
<Text weight="bold" size="sm">·</Text>
<Text weight="bold" size="xs">Richmond</Text>
</Inline>
</Stack>
<Text weight="semiBold">Modern, Chic Penthouse with City Views</Text>
<Text>$119/night</Text>
<Inline gap="sm" alignY="center">
<Icon id="StarOn" color="yellow500" />
<Text size="sm" weight="bold">4.84</Text>
<Text size="sm">(190)</Text>
</Inline>
</Stack>