@lla-ma/ui

v0.1.8

Published

4 days ago

Shared UI + design system for the lla.ma ecosystem — tokens, header, footer, button.

0High
0Medium
0Low

@lla-ma/ui

The lla.ma design system — tokens, header, footer, and shadcn-style components, shared across every lla.ma app for one consistent look.

npm i @lla-ma/ui          # brings react peer deps, lucide-react, radix Slot, cva

1. Wire up the tokens (once per app)

Import the palette after Tailwind in your app's global stylesheet, and switch themes with a data-theme attribute on <html>:

/* app/globals.css */
@import "tailwindcss";
@import "@lla-ma/ui/styles.css";

<html data-theme="dark">   <!-- or "light" -->

This defines six brand ramps (olive, mist, terracotta, sage, dusk, cream — each 50→950) plus the semantic light/dark tokens: background, foreground, border, accent, primary, and success / info / warning / danger. Use them as Tailwind utilities (bg-primary, text-foreground, bg-olive-500, border-border) or raw CSS vars (var(--accent), var(--olive-500)).

Note: @theme inline inlines --color-* into the utilities, so reference the raw ramp vars directly (var(--olive-500), not var(--color-olive-500)). The bg-olive-500 utility works either way.

2. Use the components

import { LlamaHeader, LlamaFooter, Button } from '@lla-ma/ui';
// or per-door:
import { Button } from '@lla-ma/ui/button';
import { LlamaHeader } from '@lla-ma/ui/navbar';

export default function Shell({ children, theme, setTheme }) {
  return (
    <>
      <LlamaHeader
        app="base"
        theme={theme}                                   // for the ☯ icon state
        onToggleTheme={() => setTheme(t => t === 'dark' ? 'light' : 'dark')}
        signedIn
        sections={[{ label: 'overview', href: '/', active: true }, { label: 'sql', href: '/sql' }]}
      />
      <Button>Build</Button>
      <Button variant="outline" size="sm">Cancel</Button>
      {children}
      <LlamaFooter />
    </>
  );
}

In a Next.js App Router project, keep LlamaHeader in a client wrapper because the app supplies the interactive onToggleTheme callback. The /navbar and /footer entry points publish explicit client boundaries; the root barrel is also safe when it is imported from an existing client component.

Available components (each also at its own subpath, e.g. @lla-ma/ui/card): Button, Badge, Card (+ CardHeader/CardTitle/CardDescription/CardAction/CardContent/CardFooter), Input, Textarea, Label, Select, Checkbox, plus the LlamaHeader / LlamaFooter shell. Button/Badge follow the standard shadcn API (variant, size, asChild). Select is a styled native <select>; Checkbox is radix-backed.

Colors come from the semantic tokens above. Theme switching is driven by [data-theme]; your app owns that state (e.g. next-themes) and sets the attribute — the components read the resulting CSS vars.

Header structure

LlamaHeader keeps the brand shell consistent across apps in one desktop row:

The lla.ma wordmark and Platform/Base/Apps ecosystem switcher lead the row.
App-owned navigation from sections follows a quiet divider.
Optional subRight and actions, the Sign in/Dashboard link, and the theme control finish the row. The theme control remains at the far right.

Below the lg breakpoint, ecosystem and app navigation collapse into labeled groups in one scrollable drawer while the theme control stays in the header. The drawer closes on navigation, Escape, or transition to the desktop breakpoint, and locks page scroll while open. actions is additive; use showAuth={false} when an app intentionally owns its complete authentication UI.

Footer variants

LlamaFooter defaults to the full brand footer with its wordmark, tagline, grouped link columns, and status row. App dashboards can use the same content in a lower-density shell:

<LlamaFooter
  variant="compact"
  copyright="lla.ma · © 2026 Via Ventures"
  columns={[{
    title: 'APP',
    links: [
      { label: 'Docs', href: '/docs' },
      { label: 'Account', href: '/account' },
      { label: 'API status', href: 'https://api.lla.ma' },
    ],
  }]}
/>

Compact mode omits the tagline, column headings, and status row, then flattens the supplied column links into a responsive single-row footer. The default variant and all existing footer props remain unchanged.

Subpaths = one package, many doors

@lla-ma/ui is a single npm package. /navbar, /footer, /button, /tokens, /styles.css are entry points in the exports map — not separate packages. Add src/input.tsx, add a line to exports + tsup.config.js, bump, publish → @lla-ma/ui/input exists.

Develop

From the repo root:

pnpm dev      # live playground at :5173 (real Tailwind), edits to src/ hot-reload
pnpm build    # build dist/ (esm + cjs + .d.ts + styles.css) — what gets published

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

@lla-ma/ui

1. Wire up the tokens (once per app)

2. Use the components

Header structure

Footer variants

Subpaths = one package, many doors

Develop