Components (`@sumx/ui`)

@sumx/ui provides shadcn-style primitives shared by kit packages and host apps (@sumx/ssr-auth-react, @sumx/sumx-editor).

Current version: 0.1.2 — includes form controls moved from the editor package.

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.

Tailwind in the host app

Scan compiled kit UI so utility classes are generated with your theme:


/* src/styles/tailwind.css */
@source "../../node_modules/@sumx/ui/dist";
@source "../../node_modules/@sumx/ui/src";
@source "../../node_modules/@sumx/ssr-auth-react/dist";
@source "../../node_modules/@sumx/sumx-editor/dist";
@source "../../node_modules/@sumx/sumx-editor/src";

Define tokens in host tailwind.config.js — kit uses names like gray-gray, gray-lighter, black-soft, primary, not generic Tailwind zinc scales.

Optional: merge theme tokens from @sumx/ui/tailwind.config in the portal tailwind.config.js.

Permission provider (required for gated components)

Wrap your app (inside auth, above pages):


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

Portal example: SumxUiPermissionProvider wires Zustand permissions into PermissionProvider.

Interactive demos

Each component page includes a live demo (same pattern as Button):

Demo	Page
Button	Button
Dialog	Dialog
Input	Input
Label	Label
Slider	Slider
Dropdown menu	Dropdown menu
SumX Editor	SumX Editor

API index

Topic	Page
`Button`, variants, permission props	Button
`Dialog`, `DialogContent`, triggers	Dialog
`Input`	Input
`Label`	Label
`Slider`	Slider
`DropdownMenu` and subcomponents	Dropdown menu
`PermissionProvider`, `usePermission`, gates	Permissions
`cn()` merge helper	cn

Full export list


// Layout & actions
Button, buttonVariants, type ButtonProps
Dialog, DialogTrigger, DialogContent, DialogHeader, DialogFooter,
  DialogTitle, DialogDescription, DialogClose, DialogOverlay, DialogPortal
 
// Form
Input, type InputProps
Label
Slider
 
// Menus
DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem,
  DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuSub,
  DropdownMenuSubTrigger, DropdownMenuSubContent, DropdownMenuCheckboxItem,
  DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuGroup,
  DropdownMenuPortal, DropdownMenuShortcut
 
// Utils
cn
 
// Permissions
PermissionProvider, usePermission, hasPermission, usePermissionGate
type PermissionProviderProps, PermissionCheckFn, PermissionMode, SumxPermission

Consumers

Package	Uses
`@sumx/ssr-auth-react`	`Button`, `Dialog`, permissions
`@sumx/sumx-editor`	`Button`, `Dialog`, `Input`, `Label`, `Slider`, `DropdownMenu`

See SumX Editor for rich-text integration.

Components (@sumx/ui)