@kishek95/malleable-ui-components

React component library for Malibu UI — generated and maintained with Rovocraft.

Installation

pnpm add @kishek95/malleable-ui-components

Usage

import { BarChart, FlipCard, Map } from '@kishek95/malleable-ui-components';

Structure

src/
  components/
    <component-name>/
      <component-name>.tsx          # Component implementation
      <component-name>.test.tsx     # Colocated unit tests
      <component-name>.stories.tsx  # Ladle stories
      README.md                     # Component docs
  core/                             # Shared utilities

Getting Started

Prerequisites

• Node.js >= 20 (see .nvmrc)
• pnpm 9.15.0+

Setup

pnpm install

Scripts

| Command | Description | | -------------------- | ----------------------------------- | | pnpm build | Build the library with tsup | | pnpm typecheck | TypeScript type checking | | pnpm lint | Biome + ast-grep linting (autofix) | | pnpm lint:check | Biome lint check (no autofix) | | pnpm lint:ast | ast-grep architectural rules only | | pnpm format | Format code with Biome | | pnpm test | Run unit tests with Vitest | | pnpm test:watch | Run tests in watch mode | | pnpm test:coverage | Run tests with coverage report | | pnpm ladle | Start Ladle dev server (storybooks) | | pnpm ladle:build | Build Ladle stories for production |

Components

| Component | Description | | --------- | ----------- | | AreaChart | Area chart for visualising trends over time with filled regions | | BarChart | Vertical bar chart for comparing categorical data | | FlipCard | Interactive card with 3D flip animation for revealing content | | FunnelChart | Funnel chart for sequential conversion stages | | Graphic | Curated illustration renderer for empty states and onboarding | | HorizontalTimeline | Horizontal timeline for chronological event sequences | | LineChart | Line chart for displaying continuous data trends | | Map | 2D world map with location pins and zoom controls | | PieChart | Pie/donut chart for part-of-whole relationships | | TextualFunnel | Non-numeric textual funnel for qualitative processes |

LLM Documentation

This package includes an llms.txt file for LLM-friendly component documentation. Import it via the ./llms.txt subpath export.

Tech Stack

• React 18 with TypeScript
• Atlaskit Design System for tokens, primitives, and icons
• Recharts for chart components
• tsup for library builds
• Biome for linting and formatting
• ast-grep for architectural lint rules
• Vitest + React Testing Library for unit tests
• Playwright for integration tests
• Ladle for component storybooks