An opinionated design language and UI Library for building beautiful web applications.
Pick a grayscale and an accent color to get started.
Grayscale Color
Accent Color
Ready to copy code for your project.
import Button from "@/components/public/Button";<Button variant="primary"> Click me</Button><Button variant="secondary"> Secondary</Button>Chord components
A layered surface for grouped interface content.
import Card from "@/components/public/Card";<Card className="max-w-xs"> <Card layer={1} className="p-4"> <p>Chord components</p> </Card></Card><Card layer={1} hoverable className="max-w-xs p-4"> <p>Interactive card</p></Card>import TextLink from "@/components/public/TextLink";<TextLink href="/about"> Learn more</TextLink>A quick look at the product and what it does.
import Card from "@/components/public/Card";import { Tabs } from "@/components/public/Tabs";<Card layer={1} className="w-80 max-w-full gap-0 overflow-hidden"> <Tabs.Root defaultValue="one"> <div className="border-b border-grayscale-3 p-2"> <Tabs.List> <Tabs.Tab value="one">Tab One</Tabs.Tab> <Tabs.Tab value="two">Tab Two</Tabs.Tab> <Tabs.Indicator /> </Tabs.List> </div> <div className="p-3"> <Tabs.Panel value="one">Content one</Tabs.Panel> <Tabs.Panel value="two">Content two</Tabs.Panel> </div> </Tabs.Root></Card>import { Switch } from "@/components/public/Switch";<Switch.Composed /><Switch.Composed defaultChecked />