◆

@florexlabs/ui

Open Source

Build dark-first interfaces with speed

46+ accessible React components, design tokens, and Tailwind CSS v4 integration.

Press ⌘ + K to search components in Storybook

Preview

See it in action

Button

Card

Nested Card

Composable surfaces

Badge

BrandSuccessWarningDangerNeutral

Alert

Input

Switch

Progress

Avatar

FLJOAB

Status

OnlineDegradedOffline

Features

Why @florexlabs/ui?

Dark First

Designed for dark interfaces with green/lime brand accents.

46+ Components

Forms, data display, feedback, navigation, overlays, and layout.

Accessible

Semantic HTML, ARIA attributes, and keyboard navigation.

Tree-shakeable

ESM + CJS output. Import only what you use.

TypeScript

Full type safety with exported types for every component.

Phosphor Icons

9,000+ icons integration with @phosphor-icons/react.

Components

Everything you need

Forms

ButtonIconButtonInputTextareaSelectCheckboxRadioGroupSwitchLabelFormMessage

Data Display

CardTableDataListStatAvatarBadgeTagStatusTimeline

Typography

HeadingTextCodeCodeBlockBlockquoteHighlightListKbd

Feedback

AlertProgressSpinnerSkeletonEmptyStateTooltip

Navigation

NavbarTabsBreadcrumbPaginationStepsMenuAccordion

Overlays

ModalDrawerPopover

Layout

ContainerSectionStackDividerTreeViewCopyCommandVisuallyHidden

Usage

Simple, composable API

App.tsx
import { Button, Card, CardContent, Input, Label, Stack } from "@florexlabs/ui";

export function LoginCard() {
  return (
    <Card padding="lg">
      <CardContent>
        <Stack direction="column" gap="md">
          <Label htmlFor="email">Email</Label>
          <Input id="email" placeholder="you@example.com" />
          <Label htmlFor="password">Password</Label>
          <Input id="password" type="password" />
          <Button variant="primary">Sign in</Button>
        </Stack>
      </CardContent>
    </Card>
  );
}

Import what you need. Compose freely. Ship fast.

AI Integration

Works with your AI assistant

Use the MCP server to let Claude, Cursor, and other AI tools understand and generate @florexlabs/ui code.

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:

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

Components

46+

Tests

153

MDX Docs

50

TypeScript

100%