Cube

Installation

Add Cube to a React app with Tailwind CSS.

Requirements

React 18 or later and Tailwind CSS v4. Components install with the shadcn CLI, so a project already set up for shadcn/ui is ready as it is. Any React framework works: Next.js, Vite, React Router.

Add a component

Add the Sheet

This copies the component into your project and installs its dependencies, the core included.

npx shadcn@latest add https://ui.usecube.io/r/sheet.json

Import its styles

In the CSS file where you import Tailwind:

app/globals.css
@import "tailwindcss";
@import "../components/sheet/sheet.css";

@custom-variant dark (&:where(.dark, .dark *));

Make a store and render it

The store holds the data. The Sheet fills the box you put it in and scrolls inside it.

app/pipeline.tsx
'use client'

import { Sheet } from '@/components/sheet/Sheet'
import { sheetStore } from '@/components/sheet/store'

const store = sheetStore(
  {
    columns: {
      name: { name: 'Candidate', type: 'text', order: 1 },
      stage: { name: 'Stage', type: 'enum', order: 2, enum: ['Screen', 'Offer'] },
    },
    rows: {
      r1: { order: 1, cells: { name: 'Maya Chen', stage: 'Interview' } },
      r2: { order: 2, cells: { name: 'Daniel Okafor', stage: 'Screen' } },
    },
  },
  { name: 'pipeline' },
)

export function Pipeline() {
  return (
    <div className="h-[480px]">
      <Sheet store={store} />
    </div>
  )
}

Give the agent its tools

store.tools() returns pipeline_read and pipeline_propose. Hand them to your model; its edits appear in the Sheet as suggestions. Agents has the code for each SDK.

const tools = store.tools({ by: 'Claude' })

Without the CLI

Install the core, then copy the files from the registry into your project.

npm install usecube

The component's files are listed in sheet.json. They also need lucide-react. The core is on npm.