analytics

Components for Data Insights

Get Looker's UI components for data analysis, for founders and startups
intermediate30 minutes💵 Free + open-source
70 stars38 forksTypeScriptGuide quality 8/10 · reviewed Jun 30Updated 4/2/2026100% free · open source
What it is

You use these components to create interactive dashboards with Looker's design infrastructure.

Real use case example

"A founder wanting to track sales and customer growth for their e-commerce business would first create a new project in Looker, then select the relevant components to use (e.g., UI charts, data visualizations), and finally connect them to their database to visualize their sales and customer growth."

Best insideClaude DesktopClaude Code
When to use it
  • When building a data-driven application and needing a consistent, professional-looking UI
  • When integrating data analysis and visualization into an existing web application
  • When prototyping a data-driven product and needing to quickly test and validate UI components
Ready-to-paste prompt
import { Visualization } from '@looker/components'; <Visualization query={{ model: 'my_model', fields: ['my_field'] }} />
Heads up: Make sure you have Node.js version 14 or higher installed, as the components are built with modern JavaScript features and may not be compatible with older versions
Saves to your device
Use with Claude
New

Skip the builder — one click puts this in Claude, Cursor, Antigravity and more.

✅ Light setup

Installs with a command or two; your AI agent can do it for you.

Try it instantly — no install
Claude Code
mkdir -p ~/.claude/skills/components && curl -fsSL https://workflowstacks.com/api/skills/components/claude-skill -o ~/.claude/skills/components/SKILL.md
Open in another AI app

Opens the app with this repo with the prompt ready to go — no copy-paste needed.

Connect the whole catalog (MCP)
claude mcp add --transport http workflowstacks https://workflowstacks.com/api/mcp

Adds a WorkflowStacks connector to Claude Code: search and load any skill here by chatting.

What's inside — free to inspect

No purchase needed

Read the entire source before you build — unlike paid marketplaces that hide it behind a buy button.

2
top-level files
1
folders
493.1M
source size
MIT
license
Key files
README.md
File tree
packages/
LICENSE.md
README.md
Quick Actions
Details
Creator
looker-open-source
Language
TypeScript
Category
analytics
Published
10/31/2019

Are you the creator of this tool? and earn 85% of every sale.

Show it off in your README:

Featured on WorkflowStacks
[![Featured on WorkflowStacks](https://workflowstacks.com/api/badge/components.svg)](https://workflowstacks.com/skills/components?utm_source=github&utm_medium=badge)
🔥 Hot this week, in your inbox
Skills like this, every Monday.

The five fastest-growing open-source AI skills, ranked by GitHub star growth. One email a week, unsubscribe anytime.

Do this with a working workflow

Pages we wrote and tested that put a skill like this to work — importable n8n templates, outcome guides and Claude Desktop configs.

Ready-to-run pack · one-time $29

Competitor Watch

Get emailed the moment a rival changes their price or pitch.

Includes the tested workflow and a written setup playbook. Needs: No extra API — just watches the pages you list.

See what you get