الواجهة التي بُني بها Medal.

ثبّت، ثم نسّق، ثم اعرض الواجهة.

bashالتثبيتcopy
pnpm add @medalsocial/meda lucide-react @dnd-kit/core @dnd-kit/sortable @dnd-kit/utilities @xyflow/react

cssإعداد 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);
}

tsxعرض الواجهةcopy
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>
  );
}