:::warning AUTO-GENERATED — do not edit This page is generated from the MCP server snapshot content/guide-mcp.json. Edit the source MCP server (not this file), then run npm run generate. :::

Layout Patterns & shadcn Components

Layout patterns

[
  {
    "name": "DashboardGrid",
    "description": "Responsive grid layout for dashboard pages with KPI row and chart grid",
    "usage": "Use for overview/summary pages. KPI row spans full width in a responsive 4-column grid, charts in 2-column grid below.",
    "shadcnDeps": [
      "card"
    ]
  },
  {
    "name": "MasterDetail",
    "description": "Master-detail layout with a list/table on the left and detail panel on the right",
    "usage": "Use for resource management pages (wells, assets, projects). List takes 40% width, detail takes 60%.",
    "shadcnDeps": [
      "card",
      "table",
      "collapsible",
      "button"
    ]
  },
  {
    "name": "FilteredTable",
    "description": "Full-width table with collapsible filter panel above, common for data exploration",
    "usage": "Use for data exploration and reporting pages. Filters collapse to give table maximum vertical space.",
    "shadcnDeps": [
      "table",
      "collapsible",
      "button"
    ]
  },
  {
    "name": "FormWizard",
    "description": "Multi-step form wizard with progress indicator using shadcn Button",
    "usage": "Use for complex configuration or onboarding flows with 3-6 steps.",
    "shadcnDeps": [
      "button",
      "card"
    ]
  },
  {
    "name": "SplitView",
    "description": "Side-by-side comparison or input/output layout",
    "usage": "Use for comparison views, input/output scenarios, or before/after displays. Panels are 50/50 by default.",
    "shadcnDeps": [
      "card"
    ]
  }
]

shadcn components

{
  "preInstalled": {
    "description": "These are included in the scaffold and ready to use.",
    "components": [
      "button",
      "card",
      "skeleton"
    ]
  },
  "recommended": [
    {
      "name": "table",
      "install": "npx shadcn@latest add table",
      "usedBy": "DataTable component"
    },
    {
      "name": "dialog",
      "install": "npx shadcn@latest add dialog",
      "usedBy": "Modal dialogs, confirmations"
    },
    {
      "name": "select",
      "install": "npx shadcn@latest add select",
      "usedBy": "Dropdowns, filter selections"
    },
    {
      "name": "input",
      "install": "npx shadcn@latest add input",
      "usedBy": "Form inputs, search bars"
    },
    {
      "name": "collapsible",
      "install": "npx shadcn@latest add collapsible",
      "usedBy": "FilterPanel component"
    },
    {
      "name": "tooltip",
      "install": "npx shadcn@latest add tooltip",
      "usedBy": "Icon buttons, truncated text"
    },
    {
      "name": "popover",
      "install": "npx shadcn@latest add popover",
      "usedBy": "Rich dropdowns, date pickers"
    },
    {
      "name": "sheet",
      "install": "npx shadcn@latest add sheet",
      "usedBy": "Side panels, mobile navigation"
    },
    {
      "name": "tabs",
      "install": "npx shadcn@latest add tabs",
      "usedBy": "Tabbed content sections"
    },
    {
      "name": "badge",
      "install": "npx shadcn@latest add badge",
      "usedBy": "Status indicators, tags"
    },
    {
      "name": "checkbox",
      "install": "npx shadcn@latest add checkbox",
      "usedBy": "Multi-select filters, forms"
    },
    {
      "name": "switch",
      "install": "npx shadcn@latest add switch",
      "usedBy": "Toggle settings"
    },
    {
      "name": "dropdown-menu",
      "install": "npx shadcn@latest add dropdown-menu",
      "usedBy": "Action menus, context menus"
    },
    {
      "name": "accordion",
      "install": "npx shadcn@latest add accordion",
      "usedBy": "Expandable sections, FAQ"
    },
    {
      "name": "sonner",
      "install": "npx shadcn@latest add sonner",
      "usedBy": "Toast notifications (pre-installed as dep)"
    },
    {
      "name": "separator",
      "install": "npx shadcn@latest add separator",
      "usedBy": "Visual dividers"
    },
    {
      "name": "pagination",
      "install": "npx shadcn@latest add pagination",
      "usedBy": "Table/list pagination"
    },
    {
      "name": "chart",
      "install": "npx shadcn@latest add chart",
      "usedBy": "Recharts ChartContainer wrapper"
    },
    {
      "name": "textarea",
      "install": "npx shadcn@latest add textarea",
      "usedBy": "Multi-line text input"
    },
    {
      "name": "label",
      "install": "npx shadcn@latest add label",
      "usedBy": "Form field labels"
    }
  ],
  "iconLibrary": {
    "name": "lucide-react",
    "install": "Pre-installed in scaffold",
    "usage": "import { IconName } from 'lucide-react'",
    "docs": "https://lucide.dev/icons/"
  }
}