MEDAApache-2.0 · TypeScript først

UI-skallet Medal er bygget med.

Meda er det delte UI-skallet og kjøretidsprimitivene bak Medals apper — navigasjon, paneler, innloggingskontroller, oppskrifter, temabroer, kommandopalett og workbench-oppsett. Publisert som @medalsocial/meda.

$pnpm add @medalsocial/medacopy Se på GitHub npm

Kom i gang

Installer, tematiser, rendre skallet.

bashInstallercopy
pnpm add @medalsocial/meda lucide-react @dnd-kit/core @dnd-kit/sortable @dnd-kit/utilities @xyflow/react

Peer-avhengigheter

Meda forventer react 19 eller nyere og react-dom 19 eller nyere, pluss de påkrevde peer-pakkene lucide-react, @dnd-kit/core, @dnd-kit/sortable, @dnd-kit/utilities og @xyflow/react i prosjektet ditt (next-themes, react-markdown og @react-three/fiber er valgfrie). Pakken leveres med en styles.css med designtokens; importer den én gang fra hovedstilarket og legg dine egne overstyringer etter den, slik at like spesifikke deklarasjoner vinner på rekkefølge.

cssOppsett for Tailwind CSS v4copy
@import 'tailwindcss';
@import '@medalsocial/meda/styles.css';

:root {
  /* Overrides go after the Meda import so they win by source order. */
  --color-brand-500: oklch(0.62 0.18 245);
}

tsxRendre skalletcopy
import { AppShell, MedaShellProvider } from '@medalsocial/meda/shell';
import { Inbox } from 'lucide-react';

export function App() {
  const workspace = { id: 'workspace', name: 'Workspace' };
  const apps = [{ id: 'inbox', label: 'Inbox', icon: Inbox }];

  return (
    <MedaShellProvider workspace={workspace} apps={apps}>
      <AppShell
        variant="workspace"
        iconRail={{ mainItems: [{ id: 'inbox', label: 'Inbox', icon: Inbox, to: '/inbox' }] }}
      >
        {/* your app */}
      </AppShell>
    </MedaShellProvider>
  );
}

Det samme skallet vi selv kjører

Meda driver Medals egne apper, så navigasjonen, kommandopaletten og workbench-oppsettet du får er det vi kjører i produksjon — ikke et demosett.

meda på GitHub @medalsocial/meda på npm NextMedal nettstedsmotor