@o3world/insightkit-ui

Brand-agnostic, themeable React component library for AI-powered insight generation products. Built with React 19, Tailwind CSS v4, Radix UI, and CVA.

Install

pnpm add @o3world/insightkit-ui

Peer dependencies

pnpm add react react-dom tailwindcss lucide-react

| Peer | Version | | --------------- | -------- | | react | >= 19 | | react-dom | >= 19 | | tailwindcss | >= 4 | | lucide-react | >= 0.400 |

Setup

Import the design tokens CSS in your app entry point:

import "@o3world/insightkit-ui/css/tokens.css"

If you use Tailwind v4, add the tokens as a source in your CSS:

@import "tailwindcss";
@import "@o3world/insightkit-ui/css/tokens.css";

Components

UI Primitives

Shadcn/Radix-based building blocks with full asChild polymorphism support.

Button Badge Card Dialog Input Textarea Select Tooltip DropdownMenu Separator Collapsible Pagination

Insights

Domain components for displaying AI pipeline results.

ProcessStep PipelineTimeline FindingCard ExpandableKvCard

Feedback

User interaction and review components.

FeedbackWidget ApprovalFeedback CommentDialog

Outreach

Message display and copy utilities.

OutreachCard CopyButton

Entities

Contact and company display.

EntityCard

Layout

Page-level shells and headers.

PageContainer PageHeader

Status

Live status indicators with CSS-only animations.

PulseIndicator

Usage

import { FindingCard, PipelineTimeline, Button } from "@o3world/insightkit-ui"

All components are tree-shakeable and ship with TypeScript declarations. The bundle includes both ESM and CJS entry points with "use client" directives for Next.js compatibility.

Development

pnpm install
pnpm storybook          # Component docs on port 6006
pnpm test               # Unit tests (Vitest + happy-dom)
pnpm test:storybook     # Browser tests (Vitest + Playwright)
pnpm build              # tsup build to dist/

Dev app

A Next.js 16 playground lives in apps/dev/ with page templates showcasing all components across pharmaceutical, real estate, and construction verticals.

pnpm build                          # Build the library first
pnpm --filter @o3world/insightkit-dev dev  # Start the dev app

Design tokens

All tokens are defined in css/tokens.css using OKLCH color space. The library supports light and dark modes via a .dark class on the root element. Custom animations are registered as Tailwind theme values.

License

Private -- O3 World