getting started

Install

Get the libraries into your project in under five minutes.

Pick the bits you need

plyxui is published as eight small packages. 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). The 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.	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/comps`	You want Modal, Dropdown (Tooltip + Tabs coming).	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/icons \
  @plyxui/layouts @plyxui/navigator @plyxui/comps

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

npm install --save-dev @plyxui/mcp

Wrap your app in ThemeProvider

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

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

That's it. 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>
  );
}

What's next

ThemeProvider covers extending tokens, runtime registration, and the Electron title-bar bridge.
Box is the polymorphic primitive every other comp builds on.
Icons explains the registry pattern and how to bring your own SVGs.