CLI

configuration

NOTE: You only need to do this once.

1. Create a cli.json file

Create a cli.json file at the root of your application or project.

{
  "baseDir": "./src/components/redpanda-ui",
  "commands": {}
}

Replace the baseDir with the path to the directory where you would like the UI registry components to be located.

2. Install and configure Tailwind CSS

The UI Registry uses Tailwind CSS for styling. You'll need to configure the Tailwind compiler in your project.

bun add tailwindcss tw-animate-css
bun add @tailwindcss/postcss -D

Then, create a postcss.config.mjs file at the root of your application or project.

export default {
  plugins: {
    '@tailwindcss/postcss': {
      content: ['./src/**/*.{js,ts,jsx,tsx}'],
    },
  },
};

3. Import the UI registry styles

yes | bunx @fumadocs/cli add --dir https://redpanda-ui-registry.netlify.app/r theme

Create a globals.css file within your project's src directory and add the following:

@import "./components/redpanda-ui/style/theme.css"; // or wherever you specified in the `baseDir` + `/style/theme.css`
@import "tailwindcss";
@import "tw-animate-css";

It's important that you add these imports in this order 👆.

add

Use the add command to add components and dependencies to your project.

yes | bunx @fumadocs/cli add --dir https://redpanda-ui-registry.netlify.app/r button

You can add as many components as you want, eg:

yes | bunx @fumadocs/cli add --dir https://redpanda-ui-registry.netlify.app/r card accordion calendar

update

The add command can also be used to update components. Use the same script as you would to install a component. It'll prompt you to override your existing component (if necessary).

dependencies

After installing a component, the CLI will prompt you to install the dependencies. If you are using an AI Agent, it'll like get stuck here, so make sure you call yes | eg: yes | bun x --bun @fumadocs/cli add --dir https://redpanda-ui-registry.netlify.app/r avatar when installing via an AI Agent (if you're not using the MCP).