{ "$schema": "https://ui.shadcn.com/schema/registry.json", "name": "Registry Starter", "homepage": "https://sap-design-registry.vercel.app/", "items": [ { "name": "registry", "type": "registry:style", "cssVars": { "light": { "primary": "oklch(0.52 0.13 144.17)", "primary-foreground": "oklch(1.0 0 0)", "radius": "0.5rem" }, "dark": { "primary": "oklch(0.52 0.13 144.17)", "primary-foreground": "oklch(1.0 0 0)" } }, "files": [] }, { "name": "theme", "type": "registry:theme", "title": "Global Theme", "description": "Brand themed styles using Tailwind and Shadcn/ui", "files": [ { "path": "src/app/tokens.css", "type": "registry:file", "target": "app/tokens.css" }, { "path": "src/v0/globals.css", "type": "registry:file", "target": "app/globals.css" }, { "path": "src/v0/tailwind.config.ts", "type": "registry:file", "target": "tailwind.config.ts" } ] }, { "name": "blank", "type": "registry:block", "title": "Blank", "description": "A blank application with all brand components and code", "registryDependencies": [], "dependencies": ["@sap-theming/theming-base-content@^11.32.1"], "files": [ { "path": "src/v0/minimal-layout.tsx", "type": "registry:file", "target": "app/layout.tsx" }, { "path": "src/app/demo/[name]/blocks/blank-page.tsx", "type": "registry:page", "target": "app/page.tsx" }, { "path": "src/components/logo.tsx", "type": "registry:component", "target": "components/logo.tsx" }, { "path": "src/v0/tailwind.config.ts", "type": "registry:file", "target": "tailwind.config.ts" }, { "path": "src/app/tokens.css", "type": "registry:file", "target": "app/tokens.css" }, { "path": "src/v0/globals.css", "type": "registry:file", "target": "app/globals.css" }, { "path": "src/components/message-box.tsx", "type": "registry:component", "target": "components/message-box.tsx" }, { "path": "src/components/ui/button.tsx", "type": "registry:file", "target": "components/ui/button.tsx" }, { "path": "src/components/ui/alert-dialog.tsx", "type": "registry:file", "target": "components/ui/alert-dialog.tsx" }, { "path": "src/components/ui/card.tsx", "type": "registry:component", "target": "components/ui/card.tsx" }, { "path": "src/components/ui/badge.tsx", "type": "registry:component", "target": "components/ui/badge.tsx" }, { "path": "src/components/ui/checkbox.tsx", "type": "registry:component", "target": "components/ui/checkbox.tsx" }, { "path": "src/components/brand-header.tsx", "type": "registry:component", "target": "components/brand-header.tsx" }, { "path": "src/components/brand-sidebar.tsx", "type": "registry:component", "target": "components/brand-sidebar.tsx" } ] }, { "name": "dashboard", "type": "registry:block", "title": "Shell page", "description": "A template for your application.", "registryDependencies": [ "button", "avatar", "badge", "accordion", "select", "tooltip", "tabs" ], "files": [ { "path": "src/v0/shell-layout.tsx", "type": "registry:file", "target": "app/layout.tsx" }, { "path": "src/app/demo/[name]/blocks/dashboard-page.tsx", "type": "registry:page", "target": "app/page.tsx" }, { "path": "src/components/logo.tsx", "type": "registry:component", "target": "components/logo.tsx" }, { "path": "src/components/brand-header.tsx", "type": "registry:component", "target": "components/brand-header.tsx" }, { "path": "src/components/brand-sidebar.tsx", "type": "registry:component", "target": "components/brand-sidebar.tsx" }, { "path": "src/v0/tailwind.config.ts", "type": "registry:file", "target": "tailwind.config.ts" }, { "path": "src/app/tokens.css", "type": "registry:file", "target": "app/tokens.css" }, { "path": "src/v0/shell-layout.tsx", "type": "registry:file", "target": "app/layout.tsx" } ] }, { "name": "side-navigation", "type": "registry:block", "title": "Side Navigation", "description": "A side navigation layout with brand themed sidebar component", "registryDependencies": [], "files": [ { "path": "src/v0/shell-layout.tsx", "type": "registry:file", "target": "app/layout.tsx" }, { "path": "src/app/demo/[name]/blocks/side-navigation-page.tsx", "type": "registry:page", "target": "app/page.tsx" }, { "path": "src/components/logo.tsx", "type": "registry:component", "target": "components/logo.tsx" }, { "path": "src/components/brand-sidebar.tsx", "type": "registry:component", "target": "components/brand-sidebar.tsx" }, { "path": "src/v0/tailwind.config.ts", "type": "registry:file", "target": "tailwind.config.ts" }, { "path": "src/app/tokens.css", "type": "registry:file", "target": "app/tokens.css" } ] }, { "name": "store", "type": "registry:block", "title": "Store", "description": "A store application with your brand themed components", "registryDependencies": [ "https://sap-design-registry.vercel.app/r/product-grid.json", "https://sap-design-registry.vercel.app/r/theme.json" ], "files": [ { "path": "src/v0/minimal-layout.tsx", "type": "registry:file", "target": "app/layout.tsx" }, { "path": "src/app/demo/[name]/blocks/store-page.tsx", "type": "registry:page", "target": "app/page.tsx" } ] }, { "name": "blockWithTokens", "type": "registry:block", "title": "Block with tokens", "description": "Block with design tokens only.", "registryDependencies": [], "files": [ { "path": "src/app/tokens.css", "type": "registry:file", "target": "app/tokens.css" } ] }, { "name": "brand-header", "type": "registry:component", "title": "Brand Header", "description": "A styled, simple, reusable header", "registryDependencies": [ "button", "input", "avatar", "sidebar", "https://sap-design-registry.vercel.app/r/sonner.json", "https://sap-design-registry.vercel.app/r/logo.json", "https://sap-design-registry.vercel.app/r/theme.json" ], "files": [ { "path": "src/components/brand-header.tsx", "type": "registry:component" }, { "path": "src/v0/shell-layout.tsx", "type": "registry:file", "target": "app/layout.tsx" }, { "path": "src/app/demo/[name]/blocks/blank-page.tsx", "type": "registry:page", "target": "app/page.tsx" } ] }, { "name": "brand-sidebar", "type": "registry:component", "title": "Brand Sidebar", "description": "A styled, simple, reusable sidebar", "registryDependencies": [ "badge", "button", "sidebar", "brand-header", "https://sap-design-registry.vercel.app/r/sonner.json", "https://sap-design-registry.vercel.app/r/theme.json" ], "files": [ { "path": "src/components/brand-sidebar.tsx", "type": "registry:component" }, { "path": "src/v0/shell-layout.tsx", "type": "registry:file", "target": "app/layout.tsx" }, { "path": "src/app/demo/[name]/blocks/blank-page.tsx", "type": "registry:page", "target": "app/page.tsx" } ] }, { "name": "login", "type": "registry:component", "title": "Login", "description": "Username & password login section with customer quote.", "registryDependencies": [ "badge", "button", "https://sap-design-registry.vercel.app/r/theme.json", "https://sap-design-registry.vercel.app/r/logo.json" ], "files": [ { "path": "src/components/login.tsx", "type": "registry:component" }, { "path": "src/v0/minimal-layout.tsx", "type": "registry:file", "target": "app/layout.tsx" }, { "path": "src/app/demo/[name]/blocks/blank-page.tsx", "type": "registry:page", "target": "app/page.tsx" } ] }, { "name": "logo", "type": "registry:component", "title": "Brand Logo", "description": "A styled, simple, reusable logo", "registryDependencies": [ "https://sap-design-registry.vercel.app/r/theme.json" ], "files": [ { "path": "src/components/logo.tsx", "type": "registry:component" }, { "path": "src/v0/minimal-layout.tsx", "type": "registry:file", "target": "app/layout.tsx" }, { "path": "src/app/demo/[name]/blocks/blank-page.tsx", "type": "registry:page", "target": "app/page.tsx" } ] }, { "name": "hero", "type": "registry:component", "title": "Hero", "description": "Attention-grabbing section for the top of your landing pages.", "registryDependencies": [ "badge", "button", "https://sap-design-registry.vercel.app/r/theme.json" ], "files": [ { "path": "src/components/hero.tsx", "type": "registry:component" }, { "path": "src/v0/minimal-layout.tsx", "type": "registry:file", "target": "app/layout.tsx" }, { "path": "src/app/demo/[name]/blocks/blank-page.tsx", "type": "registry:page", "target": "app/page.tsx" } ] }, { "name": "promo", "type": "registry:component", "title": "Promo", "description": "Attention-grabbing section to display the current promotional deal.", "registryDependencies": [ "button", "https://sap-design-registry.vercel.app/r/theme.json" ], "files": [ { "path": "src/components/promo.tsx", "type": "registry:component" }, { "path": "src/v0/minimal-layout.tsx", "type": "registry:file", "target": "app/layout.tsx" }, { "path": "src/app/demo/[name]/blocks/blank-page.tsx", "type": "registry:page", "target": "app/page.tsx" } ] }, { "name": "product-grid", "type": "registry:component", "title": "Product Grid", "description": "Product grid displaying all products with API to fetch data", "registryDependencies": [ "https://sap-design-registry.vercel.app/r/theme.json" ], "files": [ { "path": "src/components/product-grid.tsx", "type": "registry:component" }, { "path": "src/lib/products.ts", "type": "registry:lib" }, { "path": "src/v0/minimal-layout.tsx", "type": "registry:file", "target": "app/layout.tsx" } ] }, { "name": "accordion", "type": "registry:ui", "title": "Accordion", "description": "A vertically stacked set of interactive headings that each reveal a section of content.", "registryDependencies": [ "accordion", "button", "https://sap-design-registry.vercel.app/r/theme.json" ], "files": [ { "path": "src/components/ui/accordion.tsx", "type": "registry:ui" }, { "path": "src/components/ui/button.tsx", "type": "registry:ui" }, { "path": "src/lib/utils.ts", "type": "registry:lib" }, { "path": "src/v0/minimal-layout.tsx", "type": "registry:file", "target": "app/layout.tsx" } ] }, { "name": "alert", "type": "registry:ui", "title": "Alert", "description": "Displays a callout for user attention.", "registryDependencies": [ "alert", "https://sap-design-registry.vercel.app/r/theme.json" ], "files": [ { "path": "src/components/ui/alert.tsx", "type": "registry:ui" }, { "path": "src/lib/utils.ts", "type": "registry:lib" }, { "path": "src/v0/minimal-layout.tsx", "type": "registry:file", "target": "app/layout.tsx" } ] }, { "name": "avatar", "type": "registry:ui", "title": "Avatar", "description": "An image element with a fallback for representing the user.", "registryDependencies": [ "avatar", "https://sap-design-registry.vercel.app/r/theme.json" ], "files": [ { "path": "src/components/ui/avatar.tsx", "type": "registry:ui" }, { "path": "src/lib/utils.ts", "type": "registry:lib" }, { "path": "src/v0/minimal-layout.tsx", "type": "registry:file", "target": "app/layout.tsx" } ] }, { "name": "badge", "type": "registry:ui", "title": "Badge", "description": "Displays a small count or status indicator.", "registryDependencies": [ "badge", "https://sap-design-registry.vercel.app/r/theme.json" ], "files": [ { "path": "src/components/ui/badge.tsx", "type": "registry:ui" }, { "path": "src/lib/utils.ts", "type": "registry:lib" }, { "path": "src/v0/minimal-layout.tsx", "type": "registry:file", "target": "app/layout.tsx" } ] }, { "name": "breadcrumb", "type": "registry:ui", "title": "Breadcrumb", "description": "Displays the path to the current resource using a hierarchy of links.", "registryDependencies": [ "breadcrumb", "https://sap-design-registry.vercel.app/r/theme.json" ], "files": [ { "path": "src/components/ui/breadcrumb.tsx", "type": "registry:ui" }, { "path": "src/lib/utils.ts", "type": "registry:lib" }, { "path": "src/v0/minimal-layout.tsx", "type": "registry:file", "target": "app/layout.tsx" } ] }, { "name": "button", "type": "registry:ui", "title": "Button", "description": "Allows users to take actions with a single click or tap.", "registryDependencies": [ "button", "https://sap-design-registry.vercel.app/r/theme.json" ], "files": [ { "path": "src/components/ui/button.tsx", "type": "registry:ui" }, { "path": "src/lib/utils.ts", "type": "registry:lib" }, { "path": "src/v0/minimal-layout.tsx", "type": "registry:file", "target": "app/layout.tsx" } ] }, { "name": "calendar", "type": "registry:ui", "title": "Calendar", "description": "A date field component that allows users to enter and edit date.", "registryDependencies": [ "calendar", "https://sap-design-registry.vercel.app/r/theme.json" ], "files": [ { "path": "src/components/ui/calendar.tsx", "type": "registry:ui" }, { "path": "src/lib/utils.ts", "type": "registry:lib" }, { "path": "src/v0/minimal-layout.tsx", "type": "registry:file", "target": "app/layout.tsx" } ] }, { "name": "card", "type": "registry:ui", "title": "Card", "description": "Containers for displaying content and actions about a single subject.", "registryDependencies": [ "card", "https://sap-design-registry.vercel.app/r/theme.json" ], "files": [ { "path": "src/components/ui/card.tsx", "type": "registry:ui" }, { "path": "src/lib/utils.ts", "type": "registry:lib" }, { "path": "src/v0/minimal-layout.tsx", "type": "registry:file", "target": "app/layout.tsx" } ] }, { "name": "chart", "type": "registry:ui", "title": "Chart", "description": "Beautiful charts. Built using Recharts. Copy and paste into your apps.", "registryDependencies": [ "chart", "https://sap-design-registry.vercel.app/r/theme.json" ], "files": [ { "path": "src/components/ui/chart.tsx", "type": "registry:ui" }, { "path": "src/lib/utils.ts", "type": "registry:lib" }, { "path": "src/v0/minimal-layout.tsx", "type": "registry:file", "target": "app/layout.tsx" } ] }, { "name": "checkbox", "type": "registry:ui", "title": "Checkbox", "description": "Allows users to select multiple items from a list of options.", "registryDependencies": [ "checkbox", "https://sap-design-registry.vercel.app/r/theme.json" ], "files": [ { "path": "src/components/ui/checkbox.tsx", "type": "registry:ui" }, { "path": "src/lib/utils.ts", "type": "registry:lib" }, { "path": "src/v0/minimal-layout.tsx", "type": "registry:file", "target": "app/layout.tsx" } ] }, { "name": "date-picker", "type": "registry:ui", "title": "Date Picker", "description": "Displays the path to the current resource using a hierarchy of links.", "registryDependencies": [ "date-picker", "https://sap-design-registry.vercel.app/r/theme.json" ], "files": [ { "path": "src/v0/minimal-layout.tsx", "type": "registry:file", "target": "app/layout.tsx" } ] }, { "name": "dialog", "type": "registry:ui", "title": "Dialog", "description": "A modal dialog that interrupts the user with important content.", "registryDependencies": [ "dialog", "https://sap-design-registry.vercel.app/r/theme.json" ], "files": [ { "path": "src/components/ui/dialog.tsx", "type": "registry:ui" }, { "path": "src/lib/utils.ts", "type": "registry:lib" }, { "path": "src/v0/minimal-layout.tsx", "type": "registry:file", "target": "app/layout.tsx" } ] }, { "name": "dropdown-menu", "type": "registry:ui", "title": "Dropdown", "description": "Displays a menu to the user triggered by a button.", "registryDependencies": [ "dropdown-menu", "https://sap-design-registry.vercel.app/r/theme.json" ], "files": [ { "path": "src/components/ui/dropdown-menu.tsx", "type": "registry:ui" }, { "path": "src/lib/utils.ts", "type": "registry:lib" }, { "path": "src/v0/minimal-layout.tsx", "type": "registry:file", "target": "app/layout.tsx" } ] }, { "name": "input", "type": "registry:ui", "title": "Input", "description": "Displays a form input field or a component that looks like an input field.", "registryDependencies": [ "input", "https://sap-design-registry.vercel.app/r/theme.json" ], "files": [ { "path": "src/components/ui/input.tsx", "type": "registry:ui" }, { "path": "src/lib/utils.ts", "type": "registry:lib" }, { "path": "src/v0/minimal-layout.tsx", "type": "registry:file", "target": "app/layout.tsx" } ] }, { "name": "menu-bar", "type": "registry:ui", "title": "Menu Bar", "description": "A visually persistent menu common in desktop applications that provides quick access to a consistent set of commands.", "registryDependencies": [ "menu-bar", "https://sap-design-registry.vercel.app/r/theme.json" ], "files": [ { "path": "src/components/ui/menubar.tsx", "type": "registry:ui" }, { "path": "src/lib/utils.ts", "type": "registry:lib" }, { "path": "src/v0/minimal-layout.tsx", "type": "registry:file", "target": "app/layout.tsx" } ] }, { "name": "select", "type": "registry:ui", "title": "Select", "description": "Displays a list of options for the user to pick from—triggered by a button.", "registryDependencies": [ "select", "https://sap-design-registry.vercel.app/r/theme.json" ], "files": [ { "path": "src/components/ui/select.tsx", "type": "registry:ui" }, { "path": "src/lib/utils.ts", "type": "registry:lib" }, { "path": "src/v0/minimal-layout.tsx", "type": "registry:file", "target": "app/layout.tsx" } ] }, { "name": "separator", "type": "registry:ui", "title": "Separator", "description": "Visually or semantically separates content.", "registryDependencies": [ "separator", "https://sap-design-registry.vercel.app/r/theme.json" ], "files": [ { "path": "src/components/ui/separator.tsx", "type": "registry:ui" }, { "path": "src/lib/utils.ts", "type": "registry:lib" }, { "path": "src/v0/minimal-layout.tsx", "type": "registry:file", "target": "app/layout.tsx" } ] }, { "name": "skeleton", "type": "registry:ui", "title": "Skeleton", "description": "Use to show a placeholder while content is loading.", "registryDependencies": [ "skeleton", "https://sap-design-registry.vercel.app/r/theme.json" ], "files": [ { "path": "src/components/ui/skeleton.tsx", "type": "registry:ui" }, { "path": "src/lib/utils.ts", "type": "registry:lib" }, { "path": "src/v0/minimal-layout.tsx", "type": "registry:file", "target": "app/layout.tsx" } ] }, { "name": "slider", "type": "registry:ui", "title": "Slider", "description": "An input where the user selects a value from within a given range.", "registryDependencies": [ "slider", "https://sap-design-registry.vercel.app/r/theme.json" ], "files": [ { "path": "src/components/ui/slider.tsx", "type": "registry:ui" }, { "path": "src/lib/utils.ts", "type": "registry:lib" }, { "path": "src/v0/minimal-layout.tsx", "type": "registry:file", "target": "app/layout.tsx" } ] }, { "name": "sonner", "type": "registry:ui", "title": "Sonner", "description": "An opinionated toast component for React.", "registryDependencies": [ "sonner", "https://sap-design-registry.vercel.app/r/theme.json" ], "files": [ { "path": "src/v0/minimal-layout.tsx", "type": "registry:file", "target": "app/layout.tsx" }, { "path": "src/components/ui/sonner.tsx", "type": "registry:file", "target": "components/ui/sonner.tsx" } ] }, { "name": "switch", "type": "registry:ui", "title": "Switch", "description": "A control that allows the user to toggle between checked and not checked.", "registryDependencies": [ "switch", "https://sap-design-registry.vercel.app/r/theme.json" ], "files": [ { "path": "src/components/ui/switch.tsx", "type": "registry:ui" }, { "path": "src/lib/utils.ts", "type": "registry:lib" }, { "path": "src/v0/minimal-layout.tsx", "type": "registry:file", "target": "app/layout.tsx" } ] }, { "name": "table", "type": "registry:ui", "title": "Table", "description": "A responsive table component.", "registryDependencies": [ "table", "https://sap-design-registry.vercel.app/r/theme.json" ], "files": [ { "path": "src/components/ui/table.tsx", "type": "registry:ui" }, { "path": "src/lib/utils.ts", "type": "registry:lib" }, { "path": "src/v0/minimal-layout.tsx", "type": "registry:file", "target": "app/layout.tsx" } ] }, { "name": "tabs", "type": "registry:ui", "title": "Tabs", "description": "A set of layered sections of content—known as tab panels—that are displayed one at a time.", "registryDependencies": [ "tabs", "https://sap-design-registry.vercel.app/r/theme.json" ], "files": [ { "path": "src/components/ui/tabs.tsx", "type": "registry:ui" }, { "path": "src/lib/utils.ts", "type": "registry:lib" }, { "path": "src/v0/minimal-layout.tsx", "type": "registry:file", "target": "app/layout.tsx" } ] }, { "name": "icon-tab-bar", "type": "registry:component", "title": "Icon Tab Bar", "description": "SAP-styled tab bar with minimal design, icons, and bottom border indicators for active tabs.", "registryDependencies": [ "icon-tab-bar", "https://sap-design-registry.vercel.app/r/theme.json" ], "files": [ { "path": "src/components/icon-tab-bar.tsx", "type": "registry:component" }, { "path": "src/lib/utils.ts", "type": "registry:lib" }, { "path": "src/v0/minimal-layout.tsx", "type": "registry:file", "target": "app/layout.tsx" } ] }, { "name": "toggle-group", "type": "registry:ui", "title": "Toggle Group", "description": "A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.", "registryDependencies": [ "toggle-group", "https://sap-design-registry.vercel.app/r/theme.json" ], "files": [ { "path": "src/components/ui/toggle-group.tsx", "type": "registry:ui" }, { "path": "src/lib/utils.ts", "type": "registry:lib" }, { "path": "src/v0/minimal-layout.tsx", "type": "registry:file", "target": "app/layout.tsx" } ] }, { "name": "tooltip", "type": "registry:ui", "title": "Tooltip", "description": "A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.", "registryDependencies": [ "tooltip", "https://sap-design-registry.vercel.app/r/theme.json" ], "files": [ { "path": "src/components/ui/tooltip.tsx", "type": "registry:ui" }, { "path": "src/lib/utils.ts", "type": "registry:lib" }, { "path": "src/v0/minimal-layout.tsx", "type": "registry:file", "target": "app/layout.tsx" } ] }, { "name": "radio-group", "type": "registry:ui", "title": "Radio Group", "description": "A set of radio buttons allowing a single selection.", "registryDependencies": [ "radio-group", "https://sap-design-registry.vercel.app/r/theme.json" ], "files": [ { "path": "src/components/ui/radio-group.tsx", "type": "registry:ui" }, { "path": "src/lib/utils.ts", "type": "registry:lib" }, { "path": "src/v0/minimal-layout.tsx", "type": "registry:file", "target": "app/layout.tsx" } ] }, { "name": "progress", "type": "registry:ui", "title": "Progress", "description": "Displays a progress bar indicating completion.", "registryDependencies": [ "progress", "https://sap-design-registry.vercel.app/r/theme.json" ], "files": [ { "path": "src/components/ui/progress.tsx", "type": "registry:ui" }, { "path": "src/lib/utils.ts", "type": "registry:lib" }, { "path": "src/v0/minimal-layout.tsx", "type": "registry:file", "target": "app/layout.tsx" } ] }, { "name": "sheet", "type": "registry:ui", "title": "Sheet", "description": "A sheet component for overlays.", "registryDependencies": [ "sheet", "https://sap-design-registry.vercel.app/r/theme.json" ], "files": [ { "path": "src/components/ui/sheet.tsx", "type": "registry:ui" }, { "path": "src/lib/utils.ts", "type": "registry:lib" }, { "path": "src/v0/minimal-layout.tsx", "type": "registry:file", "target": "app/layout.tsx" } ] }, { "name": "drawer", "type": "registry:ui", "title": "Drawer", "description": "A drawer component for overlays.", "registryDependencies": [ "drawer", "https://sap-design-registry.vercel.app/r/theme.json" ], "files": [ { "path": "src/components/ui/drawer.tsx", "type": "registry:ui" }, { "path": "src/lib/utils.ts", "type": "registry:lib" }, { "path": "src/v0/minimal-layout.tsx", "type": "registry:file", "target": "app/layout.tsx" } ] }, { "name": "collapsible", "type": "registry:ui", "title": "Collapsible", "description": "A collapsible component for hiding content.", "registryDependencies": [ "collapsible", "https://sap-design-registry.vercel.app/r/theme.json" ], "files": [ { "path": "src/components/ui/collapsible.tsx", "type": "registry:ui" }, { "path": "src/lib/utils.ts", "type": "registry:lib" }, { "path": "src/v0/minimal-layout.tsx", "type": "registry:file", "target": "app/layout.tsx" } ] } ] }