Chord

Chord

by

dqnamo

An opinionated design language and UI Library for building beautiful web applications.

First, let's choose your colors.

Pick a grayscale and an accent color to get started.

Grayscale Color

Accent Color

The Components

Ready to copy code for your project.

The Button

import Button from "@/components/public/Button";<Button variant="primary">  Click me</Button><Button variant="secondary">  Secondary</Button>

The Text Link

import TextLink from "@/components/public/TextLink";<TextLink href="/about">  Learn more</TextLink>

The Tabs

A quick look at the product and what it does.

import { Tabs } from "@/components/public/Tabs";<Tabs.Root defaultValue="one">  <Tabs.List>    <Tabs.Tab value="one">Tab One</Tabs.Tab>    <Tabs.Tab value="two">Tab Two</Tabs.Tab>    <Tabs.Indicator />  </Tabs.List>  <Tabs.Panel value="one">Content one</Tabs.Panel>  <Tabs.Panel value="two">Content two</Tabs.Panel></Tabs.Root>

The Switch

import { Switch } from "@/components/public/Switch";<Switch.Composed /><Switch.Composed defaultChecked />