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 clsxCSS 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.
Works with all accent colors
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.