getting started

Install

Get the libraries into your project in under five minutes.

Pick the bits you need

plyxui is published as twelve small packages plus one CLI. Pull only what you need; nothing else gets installed.

# The minimum useful set
npm install @plyxui/core @plyxui/styles @plyxui/primitives

Package	Install when	Dev dep?
`@plyxui/core`	Always (tokens, types, hooks). Other packages depend on it.	runtime
`@plyxui/styles`	Always (`ThemeProvider` + `useTheme`). Wraps your app once.	runtime
`@plyxui/primitives`	You need `Box`, `Text`, `Stack`, `Flex`, `Input`, `Button`, `Image`, `Divider`, `Spinner`.	runtime
`@plyxui/hooks`	You need `useDisclosure`, `useClickOutside`, `useMediaQuery`, `useToast` + `ToastProvider`.	runtime
`@plyxui/icons`	You need an `Icon` component + registry.	runtime
`@plyxui/layouts`	You want `AppShell`, `Sidebar`, `ScreenContainer`.	runtime
`@plyxui/navigator`	You want `defineRoutes` + a web/native adapter.	runtime
`@plyxui/forms`	You want `Field`, `Select`, `Checkbox`, `Radio`.	runtime
`@plyxui/comps`	You want `Modal`, `Dropdown`, `Tooltip`, `Tabs`, `Toaster`, `Drawer`.	runtime
`@plyxui/screens`	You want drop-in scaffolds: `AuthLayout`, `EmptyState`, `ErrorScreen`.	runtime
`@plyxui/plugins`	You want heavyweight opt-ins like `CommandPalette`.	runtime
`@plyxui/vscode`	You're shipping a VS Code webview extension and want plyxui to auto-theme to the IDE.	runtime
`@plyxui/mcp`	You want coding agents to install components by name.	tooling

A single line for the lot:

npm install @plyxui/core @plyxui/styles @plyxui/primitives @plyxui/hooks \
  @plyxui/icons @plyxui/layouts @plyxui/navigator @plyxui/forms \
  @plyxui/comps @plyxui/screens @plyxui/plugins

@plyxui/mcp is a CLI you install once and run as an MCP server, not a runtime import:

npm install --save-dev @plyxui/mcp

Pre-bundled, autocomplete-friendly

Every package ships pre-bundled dist/*.{js,cjs,d.ts,d.cts} (built with tsup). Three things this gets you for free:

Any bundler works. Vite, Next, Webpack, Metro, Rollup, plain Node — none of them have to TS-compile from node_modules. No special config required.
Full intellisense. Hover any prop in VS Code and the JSDoc is right there. Same experience you'd get from Mantine or Radix.
Live previews in the docs. Every component page on plyxui.com opens with an editable Sandpack — change a prop, see the result, fork the sandbox.

Native packages ship a react-native condition in the exports field — Metro picks .native.tsx builds automatically, no fork in your codebase.

Three platform targets: web (React + DOM), React Native (Metro picks .native.tsx), and VS Code webview extensions (via @plyxui/vscode — auto-themes to the user's active IDE colors).

Agent-friendly via MCP

npx -y @plyxui/mcp

Drop that command into Claude Desktop, Cursor, Cline, or Continue's mcpServers config and the agent can list, search, get, lint, and install plyxui components by name. The full tool list is at plyxui.com/llms.txt.

Wrap your app in ThemeProvider

import { ThemeProvider } from "@plyxui/styles";

export default function App() {
  return (
    <ThemeProvider>
      <YourApp />
    </ThemeProvider>
  );
}

The provider sets CSS custom properties on documentElement, persists the active mode to localStorage, and follows the OS preference until the user explicitly toggles.

Use a primitive

import { Box, Text, Button } from "@plyxui/primitives";
import { useTheme } from "@plyxui/styles";

export function Hello() {
  const { toggleTheme } = useTheme();
  return (
    <Box surface="primary" padding="lg" radius="lg">
      <Text size="lg" weight="bold">Hello.</Text>
      <Button onClick={toggleTheme}>Flip theme</Button>
    </Box>
  );
}

Brand your own palette

import { registerColorTokens } from "@plyxui/core";

registerColorTokens({
  brandTeal: { light: "#0CB7B7", dark: "#1FF0F0" },
});

The token table lives on globalThis so duplicate-bundled copies of the package (Snackager, certain Webpack configs) all share the same source of truth. Pair with a TypeScript module augmentation if you want colors.brandTeal to autocomplete inside useTheme().

What's next

Playground — a live dashboard demo running both web and React Native, source on GitHub.
Ladder — the package dependency tree, top to bottom.
Box — the polymorphic primitive every other component builds on.