Installation

1. Install

npm install matcha-ui

2. Tailwind CSS v4

In your global stylesheet (for example app/globals.css), import Tailwind, the animation plugin, scan the package for class names, and apply Matcha theme tokens.

@import "tailwindcss";
@plugin "tailwindcss-animate";
@source "./node_modules/matcha-ui/src/**/*.tsx";
@import "matcha-ui/styles";

3. Next.js (optional)

import type { NextConfig } from "next";

const nextConfig: NextConfig = {
  transpilePackages: ["matcha-ui"],
};

export default nextConfig;

4. Use components

import { Button } from "matcha-ui";

export function Example() {
  return <Button>Hello Matcha</Button>;
}

Icons (optional)

For Phosphor icons in your app (recommended for parity with Matcha chart cards), install phosphor-react. See Phosphor icons in the docs.

npm install phosphor-react