Chord

Setup

How to get started with Chord.

Prerequisites

There are 2 base requirements that are needed in your project to make Chord work.

Tailwind CSS

Chord is built on top of Tailwind CSS, so you need to have it installed in your project. You can install it by running the following command. You can find the installation guide

Base UI

Chord is built on top of Base UI primitives, so you need to have it installed in your project. You can install it by running the following command. You can find the installation guide

Required Additonal Packages

Chord requires the following packages to be installed in your project. These are required to power the component primitivaes and the animations etc. You can run the following command to install all of them.

npm install @radix-ui/colors @phosphor-icons/react motion tailwind-merge clsx

CSS Files

Add the following CSS files to your project.

Helper Files

Add the following helper file to your project. This utility merges Tailwind classes safely and is used across all Chord components.

helpers/classname-helper.ts

import { type ClassValue, clsx } from "clsx";import { twMerge } from "tailwind-merge";export function cn(...inputs: ClassValue[]) {  return twMerge(clsx(inputs));}

Choosing Your Colors

Chord uses two color axes that you can customise to match your brand: a grayscale for backgrounds, borders, and text, and an accent for interactive elements and highlights.

Grayscale

In theme.css, the default :root block maps --color-grayscale-* to gray. Change it to any of the available grayscale palettes:

Accent

Similarly, the --color-accent-* variables default to blue. Swap it to any of the accent palettes:

To apply your choice, set the data-grayscale and data-accent attributes on your root element (e.g. <html data-grayscale="slate" data-accent="violet">), or change the default values directly in the :root block of theme.css.

Color Pairings

When choosing a grayscale to pair with your accent, you have two approaches.

Neutral pairing

If you want a neutral vibe, or you want to keep things simple, gray will work well with any hue or palette.

Natural pairing

Alternatively, choose the grayscale which is saturated with the hue closest to your accent. The difference is subtle, but this creates a more colorful and harmonious vibe.

Neutral pairing — works with any accent color.

Works with all accent colors

Pairs naturally with pink and purple hues.
Pairs naturally with blue hues.
Pairs naturally with green hues.
Pairs naturally with lime and grass hues.
Pairs naturally with warm, earthy hues.

Understanding the Scale

Each Radix color palette has 12 steps, and each step is designed for a specific use case. Read more on the Radix Colors documentation.