Getting Started with CubeKit: Build Analytics UIs in Minutes

The Problem with Building Analytics UIs

If you've worked with Cube.dev before, you know it's incredibly powerful for building analytics applications. The semantic layer, caching, and APIs are top-notch. But when it comes to building the actual user interface, you're often stuck writing repetitive boilerplate code.

Setting up query builders, creating visualizations, handling loading states, managing filters – it all takes time. And if you want to create something that looks professional and works well across different screen sizes? Even more time.

Enter CubeKit

CubeKit solves this problem by providing high-level, ready-to-use React components that work seamlessly with your Cube.dev setup. Instead of building everything from scratch, you can focus on your data and business logic while CubeKit handles the UI complexity.

Core Components Overview

CubeKit includes five main high-level components, each designed to solve specific use cases in analytics applications:

1. QueryBuilder

The QueryBuilder provides a no-code interface for business users to create their own analytics queries. Users can drag and drop measures and dimensions, apply filters, and see results instantly.

npm install @cubekit/query-builder

Installing QueryBuilder components...

Ready to use!

2. SQL Builder

For power users who prefer writing SQL, the SQL Builder provides a sophisticated code editor with syntax highlighting, auto-completion, and direct integration with Cube's SQL API endpoint.

3. Schema Visualization

The Schema Visualization component creates an interactive explorer that shows cube relationships, measures, dimensions, and metadata. Perfect for helping users understand your data model.

4. Dashboard Builder

Create drag-and-drop dashboard interfaces where users can compose multiple visualizations, arrange layouts, and create interactive filters that affect multiple charts simultaneously.

5. AI Chat Bot

The AI Chat Bot allows users to ask questions in natural language and get back relevant data insights. It translates natural language queries into Cube queries and presents results in an intuitive format.

Quick Start Example

Here's how easy it is to get started with CubeKit. Let's create a basic analytics dashboard:

import { QueryBuilder } from '@cubekit/query-builder';

import { DashboardBuilder } from '@cubekit/dashboard';

function AnalyticsDashboard() {

  return (

    <DashboardBuilder

      cubeApi={cubeApi}

      defaultQueries={[

        { measures: ['Orders.count'] }

      ]}

    />

  );

}

That's it! You now have a fully functional dashboard with drag-and-drop capabilities, responsive design, and all the features your users expect.

Theme Integration

CubeKit works seamlessly with DaisyUI themes, giving you access to 30+ professionally designed color schemes. You can also create custom themes that match your brand perfectly.

What's Next?

This is just the beginning. CubeKit is designed to grow with your needs, whether you're building a simple analytics dashboard or a complex multi-tenant analytics platform.

In upcoming posts, we'll dive deeper into each component, share best practices, and show you advanced customization techniques. We'll also cover integration patterns, performance optimization, and how to extend CubeKit with your own custom components.