Custom Slots Override

// Slot Component Signature
type SlotComponent = React.FC; // No props passed

{
  "type": "collectionPage",
  "collectionPage": {
    "components": [
      {
        "type": "custom",
        "id": "topBanner" // Matches override key
      },
      {
        "type": "collection",
        "collection": { "collectionId": "items" }
      }
    ]
  }
}

// components/slots/TopBanner.tsx
import { Card, Text } from '@wix/design-system';

export const TopBanner = () => (
  <Card>
    <Card.Content>
      <Text>Welcome to the dashboard</Text>
    </Card.Content>
  </Card>
);

// components/slots/index.tsx
import { TopBanner } from './TopBanner';
export const useSlots = () => ({ topBanner: TopBanner });

// 1. Add import (keep all existing imports)
import { useSlots } from './components/slots';

// 2. Add hook call (keep all existing hook calls)
const slots = useSlots();

// 3. Add slots to PatternsWizardOverridesProvider value (keep ALL existing overrides)