@lareys/laxa-ui

Host shadcn UI primitives for authoring Laxa admin-panel plugins.

A distributed (Composer-packaged, dist-built) plugin can't bundle its own copy of the host's shadcn components without shipping a second React tree and duplicate styles. This package is a thin shim: at build time your plugin externalizes it to the host's window.LaxaUI global, so import { Button } from '@lareys/laxa-ui' resolves to the host's single live component instead of a bundled duplicate.

import { Button, Card, CardContent } from '@lareys/laxa-ui';

export default function MyPluginPage() {
    return (
        <Card>
            <CardContent>
                <Button variant="outline">Host UI button</Button>
            </CardContent>
        </Card>
    );
}

Build setup

The laxa:plugin scaffold wires this up for you. In a hand-rolled plugin build, externalize the module and map it to the window.LaxaUI global:

// vite.config.ts (library mode)
rollupOptions: {
    external: ['react', 'react-dom', '@lareys/laxa-extensions', '@lareys/laxa-ui'],
    output: {
        globals: {
            react: 'React',
            'react-dom': 'ReactDOM',
            '@lareys/laxa-extensions': 'window',
            '@lareys/laxa-ui': 'window.LaxaUI',
        },
    },
},

What's included

A curated set of lightweight primitives: Accordion, Alert, AlertDialog, Avatar, Badge, Button, Card, Checkbox, Dialog, DropdownMenu, Input, Kbd, Label, Popover, Progress, RadioGroup, Select, Separator, Sheet, Skeleton, Slider, Spinner, Switch, Table, Tabs, Textarea, Tooltip (and their sub-components / variant helpers).

Components with heavy transitive dependencies are intentionally not exposed, so the host's eager bundle stays lean: chart (recharts), calendar (react-day-picker), carousel (embla), command / combobox (cmdk / @base-ui), code-editor, drawer (vaul), resizable, input-otp, and sidebar. A plugin that needs one of those should bundle it directly.

In-app extensions (built with the host via @lareys/laxa-vite-plugin) are unaffected — they import any component directly through the @laxa/ui/* alias.