`@sumx/ui`

shadcn-style primitives for kit packages and host apps: Button, Dialog, form controls, cn, and permission-aware wrappers.

Version: 0.1.2+ adds Input, Label, Slider, DropdownMenu (used by @sumx/sumx-editor).

Install & peers


pnpm add @sumx/ui

Peers: react, react-dom, @radix-ui/react-dialog, @radix-ui/react-dropdown-menu, @radix-ui/react-label, @radix-ui/react-slider, @radix-ui/react-slot, class-variance-authority, clsx, tailwind-merge, lucide-react.

Component docs

Component	Page
Overview & Tailwind	Components
`Button`	Button
`Dialog`	Dialog
`Input`	Input
`Label`	Label
`Slider`	Slider
`DropdownMenu`	Dropdown menu
Permissions	Permissions
`cn()`	cn

Permission-aware components


import { Button, Dialog, DialogTrigger, DialogContent } from '@sumx/ui';
 
<Button permission={['po-create']} permissionMode="hide" variant="primary">
  Create PO
</Button>

See Permissions.

Host app provider (portal)


import { PermissionProvider } from '@sumx/ui';
 
<PermissionProvider checkPermission={(keys) => yourStore.has(keys)}>
  {children}
</PermissionProvider>

Tailwind

Scan kit output in host tailwind.css:


@source "../../node_modules/@sumx/ui/dist";
@source "../../node_modules/@sumx/ui/src";

Host tailwind.config.js owns theme tokens (gray.gray, primary, …). Kit components use those class names.

Used by

@sumx/ssr-auth-react — session dialogs, Button
@sumx/sumx-editor — variable picker, image crop dialog