Getting Started

NewLive

Install

pnpm add @florexlabs/ui
pnpm add react react-dom tailwindcss
pnpm add @phosphor-icons/react  # optional, recommended

Setup

Add to your main CSS file:

@import "tailwindcss";
@import "@florexlabs/ui/florex.css";

If using Tailwind v4 with a bundler, add the source scan so Tailwind detects classes inside the library:

@source "../../node_modules/@florexlabs/ui/dist";

Quick Start

import { Button, Card, Badge, Input } from "@florexlabs/ui";
import { Plus } from "@phosphor-icons/react";

function App() {
  return (
    <Card variant="hover">
      <Input placeholder="Enter your email" />
      <Button variant="primary">
        <Plus size={16} weight="bold" /> Subscribe
      </Button>
      <Badge tone="brand">New</Badge>
    </Card>
  );
}

MCP Server — AI Integration

Let Claude, Cursor, Kiro, and other AI assistants understand and generate code with @florexlabs/ui.

Claude Desktop

Add to claude_desktop_config.json:

{
  "mcpServers": {
    "florex-ui": {
      "command": "npx",
      "args": ["-y", "@florexlabs/ui-mcp"]
    }
  }
}

Cursor / Kiro

Add to .cursor/mcp.json or .kiro/mcp.json:

{
  "mcpServers": {
    "florex-ui": {
      "command": "npx",
      "args": ["-y", "@florexlabs/ui-mcp"]
    }
  }
}

Available Tools

Tool	Description
`list_components`	Browse all 46+ components by category
`get_component_docs`	Get props, examples for any component
`generate_component_code`	Generate code for a use case
`get_design_tokens`	Get all CSS variables and values
`get_setup_instructions`	Installation guide