Prebuilt Cube Components for Quick Customer-Facing UI

The Challenge: Building Cube UI from Scratch

When building Cube JS User Interface applications, developers often face a common dilemma: spend weeks building custom Cube React components from scratch, or find a way to accelerate development with pre-built solutions.

The official Cube.dev React documentation provides excellent foundation components like QueryRenderer, QueryBuilder, and CubeProvider. However, these are low-level building blocks that require significant development time to create production-ready Cube UI experiences.

The Solution: Prebuilt Cube Components

Prebuilt cube components solve this problem by providing complete, production-ready Cube React components that work out of the box. These components build upon the official Cube.dev React SDK while adding the polish and functionality needed for customer-facing applications.

// 200+ lines of custom code
import { QueryBuilder } from '@cubejs-client/react';
import { useState, useEffect } from 'react';

function CustomQueryBuilder() {
  const [measures, setMeasures] = useState([]);
  const [dimensions, setDimensions] = useState([]);
  const [filters, setFilters] = useState([]);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);
  
  // Custom state management
  // Custom styling
  // Custom error handling
  // Custom loading states
  // Custom mobile responsiveness
  // Custom accessibility features
  
  return (
    <div className="custom-query-builder">
      {/* 200+ lines of JSX */}
    </div>
  );
}

// Just 16 lines of code
import { QueryBuilder } from '@cubekit/react';

function MyAnalyticsApp() {
  return (
    <QueryBuilder
      cubeApi={cubeApi}
      onQueryChange={handleQueryChange}
      theme="cubekit"
      enableFilters={true}
      enableTimeDimensions={true}
    />
  );
}

Why Choose Prebuilt Cube Components?

Essential Prebuilt Cube Components

1. Cube Query Builder Component

Our prebuilt cube components include a complete Query Builder that provides an intuitive interface for building complex Cube queries. This component builds upon the official Cube.dev QueryBuilder while adding professional styling and enhanced functionality.

2. Cube Dashboard Component

Complete dashboard solution with multiple chart types, interactive filters, and export capabilities. This component integrates with the official Cube.dev QueryRenderer to provide a seamless data visualization experience.

3. Cube SQL Editor Component

Professional SQL editor with syntax highlighting, autocomplete, and query formatting. Perfect for power users who need direct SQL access to their Cube data.

Quick Start: Building Customer-Facing Cube UI

Step 1: Install Prebuilt Components

npm install @cubekit/react @cubejs-client/core

Step 2: Set Up Cube Provider

Use the official Cube.dev CubeProvider as the foundation for your application:

import { CubeProvider } from '@cubejs-client/react';
import cube from '@cubejs-client/core';

const cubeApi = cube('your-cube-token', {
  apiUrl: 'https://your-cube-api.com/cubejs-api/v1'
});

function App() {
  return (
    <CubeProvider cubeApi={cubeApi}>
      <YourAnalyticsApp />
    </CubeProvider>
  );
}

Step 3: Add Prebuilt Components

import { QueryBuilder, Dashboard } from '@cubekit/react';

function YourAnalyticsApp() {
  return (
    <div className="analytics-app">
      <QueryBuilder 
        cubeApi={cubeApi}
        onQueryChange={handleQueryChange}
        theme="cubekit"
      />
      <Dashboard 
        cubeApi={cubeApi}
        queries={queries}
        layout="grid"
      />
    </div>
  );
}

Prebuilt vs. Official Cube Components

Perfect Use Cases for Prebuilt Cube Components

Conclusion: Accelerate Your Cube UI Development

Prebuilt cube components bridge the gap between the excellent foundation provided by Cube.dev's official React components and the polished, customer-facing Cube UI experiences your users expect.

By choosing prebuilt cube components, you can focus on what matters most: your data, your business logic, and your user experience. Let us handle the complex Cube React implementation details while you build amazing analytics applications.