# Flikkui

A modern React component library built with TypeScript, Tailwind CSS v4, and Framer Motion. 150+ components following the shadcn philosophy with complete `className` override support.

## MCP Server

Flikkui ships with an MCP (Model Context Protocol) server that gives AI coding tools full knowledge of the component library — component APIs, props, theme tokens, and code generation.

### What It Does

| Tool | Description |
|------|-------------|
| `get_component` | Look up any component's full API — props, types, sub-components, theme tokens, and code examples |
| `search_components` | Find components by name, category (`core`, `forms`, `charts`, etc.), or pattern type (`compound`, `simple`, etc.) |
| `get_theme_tokens` | Get all CSS variables with correct Tailwind syntax (`bg-[var(--color-primary)]`) |
| `generate_code` | Generate production-ready Flikkui code from a description |

### Setup for Claude Code

Add the following to your project's `.mcp.json`:

```json
{
  "mcpServers": {
    "flikkui": {
      "command": "npx",
      "args": ["@flikk/mcp"]
    }
  }
}
```

Or if you're working from a local clone of this repo:

```json
{
  "mcpServers": {
    "flikkui": {
      "command": "node",
      "args": ["./packages/mcp/dist/index.js"]
    }
  }
}
```

### Building from Source

```bash
cd packages/mcp
npm install
npm run extract   # Parse component source files into registry.json
npm run build     # Compile TypeScript
```
