Labsco
vercel-labs logo

marketplace-build-component

★ 3

by vercel · part of vercel-labs/sitecore-skills

Builds UI components using the Blok design system for Sitecore Marketplace apps. Use when the user wants to create UI, add components, build a page layout, or…

🔥🔥✓ VerifiedFreeNeeds API keys
#automation#git#design
🔌 This skill ships inside the sitecore-skills plugin — installing the plugin keeps everything updated together.

This is the playbook your agent receives when the skill activates — you don't need to read it to use the skill, but it's here to audit before installing.

by vercel

Builds UI components using the Blok design system for Sitecore Marketplace apps. Use when the user wants to create UI, add components, build a page layout, or… npx skills add https://github.com/vercel-labs/sitecore-skills --skill marketplace-build-component Download ZIPGitHub3

Build UI with Blok Design System

You are helping the user build UI components for a Sitecore Marketplace app using the Blok design system (Sitecore's shadcn-based component library).

Key Principles

  • Always use Blok components — they match the Sitecore host UI and support light/dark themes automatically

  • SDK data integration — use loading states (Skeleton) and error states (Alert) when fetching SDK data

  • Extension point awareness — different extension types have different UI constraints (see below)

  • Responsive — components render inside iframes of varying sizes

UI Patterns by Extension Type

Compact Field (custom-field)

  • Very limited space (~300px wide, variable height)

  • Use: Input, Select, Badge, small inline components

  • Avoid: Tables, large layouts, modals

Dashboard Widget

  • Medium space (~400x300px default, resizable)

  • Use: Cards, Charts, Stats, compact Tables

  • Good for: Summary data, quick actions

Pages Context Panel

  • Side panel (~350px wide, full height)

  • Use: Vertical layouts, Lists, Accordion, Tabs

  • Good for: Contextual info about current page, actions

Fullscreen

  • Full viewport within the Sitecore shell

  • Use: Any components, complex layouts, Tables, Forms

  • Good for: Full CRUD interfaces, dashboards, settings

Standalone

  • Independent page, not in Sitecore shell

  • Use: Any components, full creative freedom

  • Good for: Public-facing pages, OAuth callbacks

SDK Data Integration Pattern

"use client";

import { useEffect, useState } from "react";
import { useMarketplaceClient, useAppContext } from "@/components/providers/marketplace";
import { Skeleton } from "@/components/ui/skeleton";
import { Alert, AlertDescription } from "@/components/ui/alert";

export function MyComponent() {
 const { client } = useMarketplaceClient();
 const appContext = useAppContext();
 const [error, setError] = useState (null);

 const loading = !appContext;

 if (loading) return ;
 if (error) return {error} ;

 return {/* Render data */}
;
}

Reference Files