@plex-ui/react

React components for Plex UI (Web PC).

Develop

pnpm --filter @plex-ui/react test
pnpm --filter @plex-ui/react build

# docs / playground live in @plex-ui/site
pnpm --filter @plex-ui/site dev

Component directory convention

Each component lives in src/<name>/ with colocated tests, demos, and docs:

src/button/
  Button.tsx
  button.css
  index.ts
  tests/            # one or more unit test files
    Button.test.tsx
  demos/
    types.tsx
    ...
  index.md          # docs + demos + API (AI-readable)

index.md uses Ant Design / dumi style external demos:

---
title: Button 按钮
name: Button
group: 通用
order: 1
description: ...
---

## 代码演示

<code src="./demos/types.tsx" description="...">按钮类型</code>

## API

| 属性 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |

The documentation site (@plex-ui/site) glob-loads these markdown files and renders them.

Usage

Default — no separate CSS import. Each component pulls its own styles (and shared tokens) via ESM side-effect imports:

import { Button, ConfigProvider } from "@plex-ui/react";

export function App() {
  return (
    <ConfigProvider themeClassName="plex-theme-arco-blue">
      <Button type="primary">Hello</Button>
    </ConfigProvider>
  );
}

Optional full stylesheet (CDN / simple apps that want one file). Do not import this together with the default path — you would ship duplicate rules:

import { Button, ConfigProvider } from "@plex-ui/react";
import "@plex-ui/react/style.css";

With Tailwind, declare layer order before plex styles when using the full file:

@layer theme, base, components, utilities;
@import "tailwindcss";
@import "@plex-ui/react/style.css";

(When using the default component CSS path, styles/base.css already declares the same @layer order.)