mirror of
https://github.com/hanzoai/shadcn.git
synced 2026-10-30 18:22:59 +00:00
zeekay
e0ec477433
- Enable all 15 finance component docs (from .disabled → .mdx) - Create stock-market.mdx, 8 chart docs, 8 block docs, 2 framework docs - Add direction.tsx component (RTL/LTR support from upstream shadcn) - Add xs/icon-xs button sizes, data-variant/data-size attributes - Fix build-registry.mts to handle default exports in namespace re-exports - Add default props to order-entry, positions-list, orders-history, trading-panel - Fix 18 navigation stubs → re-export from root implementations - Add 44 orphaned MDX files to nav (installation, dark-mode, desktop, guides, etc) - Migrate 6 framer-motion imports → motion/react - Bump React 19.2.0→19.2.4, Next.js 16.0.1→16.1.6, motion→12.34.0 - Align lucide-react, sonner v2, tailwind-merge v3, postcss-selector-parser v7 - Remove framer-motion dep (superseded by motion) - Fix @types/react-dom, TypeScript versions across workspaces
638 lines
17 KiB
TypeScript
638 lines
17 KiB
TypeScript
import { Registry } from "@/registry/schema"
|
|
|
|
export const extended: Registry = [
|
|
// Code Components
|
|
{
|
|
name: "code-block",
|
|
type: "components:code",
|
|
dependencies: ["shiki", "react-copy-to-clipboard"],
|
|
files: ["ui/code-block.tsx"],
|
|
description: "Syntax highlighted code block with copy functionality",
|
|
},
|
|
{
|
|
name: "code-editor",
|
|
type: "components:code",
|
|
dependencies: ["@monaco-editor/react"],
|
|
files: ["ui/code-editor.tsx"],
|
|
description: "Full-featured code editor with syntax highlighting",
|
|
},
|
|
{
|
|
name: "code-compare",
|
|
type: "components:code",
|
|
dependencies: ["react-diff-viewer"],
|
|
files: ["ui/code-compare.tsx"],
|
|
description: "Side-by-side code comparison",
|
|
},
|
|
{
|
|
name: "code-diff",
|
|
type: "components:code",
|
|
dependencies: ["diff"],
|
|
files: ["ui/code-diff.tsx"],
|
|
description: "Code difference viewer with highlighting",
|
|
},
|
|
{
|
|
name: "code-explorer",
|
|
type: "components:code",
|
|
dependencies: ["@monaco-editor/react"],
|
|
files: ["ui/code-explorer.tsx"],
|
|
description: "File tree and code explorer interface",
|
|
},
|
|
{
|
|
name: "code-preview",
|
|
type: "components:code",
|
|
dependencies: ["react-live"],
|
|
files: ["ui/code-preview.tsx"],
|
|
description: "Live code preview with editing",
|
|
},
|
|
{
|
|
name: "code-snippet",
|
|
type: "components:code",
|
|
dependencies: ["prism-react-renderer"],
|
|
files: ["ui/code-snippet.tsx"],
|
|
description: "Inline code snippet with syntax highlighting",
|
|
},
|
|
{
|
|
name: "code-terminal",
|
|
type: "components:code",
|
|
dependencies: ["xterm", "xterm-addon-fit"],
|
|
files: ["ui/code-terminal.tsx"],
|
|
description: "Terminal-style code interface",
|
|
},
|
|
|
|
// Project Management Components
|
|
// {
|
|
// name: "gantt",
|
|
// type: "components:ui",
|
|
// dependencies: ["@frappe/gantt"],
|
|
// files: ["ui/gantt.tsx"],
|
|
// description: "Interactive Gantt chart component"
|
|
// },
|
|
{
|
|
name: "kanban",
|
|
type: "components:ui",
|
|
dependencies: ["@dnd-kit/sortable", "@dnd-kit/core"],
|
|
files: ["ui/kanban.tsx"],
|
|
description: "Drag and drop Kanban board",
|
|
},
|
|
{
|
|
name: "list",
|
|
type: "components:ui",
|
|
files: ["ui/list.tsx"],
|
|
description: "Enhanced list component with sorting and filtering",
|
|
},
|
|
{
|
|
name: "table",
|
|
type: "components:ui",
|
|
dependencies: ["@tanstack/react-table"],
|
|
registryDependencies: ["checkbox"],
|
|
files: ["ui/table.tsx"],
|
|
description: "Advanced data table with sorting, filtering, and pagination",
|
|
},
|
|
|
|
// Device Mockups
|
|
{
|
|
name: "android",
|
|
type: "components:ui",
|
|
files: ["ui/android.tsx"],
|
|
description: "Android device mockup frame",
|
|
},
|
|
{
|
|
name: "iphone-15-pro",
|
|
type: "components:ui",
|
|
files: ["ui/iphone-15-pro.tsx"],
|
|
description: "iPhone 15 Pro device mockup",
|
|
},
|
|
{
|
|
name: "safari",
|
|
type: "components:ui",
|
|
files: ["ui/safari.tsx"],
|
|
description: "Safari browser window mockup",
|
|
},
|
|
|
|
// Dock Components
|
|
{
|
|
name: "dock",
|
|
type: "components:ui",
|
|
dependencies: ["motion"],
|
|
files: ["ui/dock.tsx"],
|
|
description: "macOS-style dock with animations",
|
|
},
|
|
{
|
|
name: "limelight-nav",
|
|
type: "components:ui",
|
|
dependencies: ["motion"],
|
|
files: ["ui/limelight-nav.tsx"],
|
|
description: "Animated navigation with limelight effect",
|
|
},
|
|
{
|
|
name: "macos-dock",
|
|
type: "components:ui",
|
|
dependencies: ["motion"],
|
|
files: ["ui/macos-dock.tsx"],
|
|
description: "macOS dock with hover magnification",
|
|
},
|
|
{
|
|
name: "menu-dock",
|
|
type: "components:ui",
|
|
dependencies: ["motion"],
|
|
files: ["ui/menu-dock.tsx"],
|
|
description: "Dock-style menu with icons",
|
|
},
|
|
{
|
|
name: "message-dock",
|
|
type: "components:ui",
|
|
dependencies: ["motion"],
|
|
files: ["ui/message-dock.tsx"],
|
|
description: "Message app dock interface",
|
|
},
|
|
|
|
// Financial Components
|
|
{
|
|
name: "credit-card",
|
|
type: "components:ui",
|
|
dependencies: ["react-credit-cards-2"],
|
|
files: ["ui/credit-card.tsx"],
|
|
description: "Interactive credit card component",
|
|
},
|
|
{
|
|
name: "ticker",
|
|
type: "components:ui",
|
|
dependencies: ["react-ticker"],
|
|
files: ["ui/ticker.tsx"],
|
|
description: "Stock ticker or news ticker component",
|
|
},
|
|
|
|
// Form Components
|
|
{
|
|
name: "choicebox",
|
|
type: "components:ui",
|
|
files: ["ui/choicebox.tsx"],
|
|
description: "Enhanced choice selector",
|
|
},
|
|
{
|
|
name: "color-picker",
|
|
type: "components:ui",
|
|
dependencies: ["react-color"],
|
|
files: ["ui/color-picker.tsx"],
|
|
description: "Advanced color picker with presets",
|
|
},
|
|
{
|
|
name: "combobox",
|
|
type: "components:ui",
|
|
dependencies: ["@radix-ui/react-popover"],
|
|
registryDependencies: ["command"],
|
|
files: ["ui/combobox.tsx"],
|
|
description: "Autocomplete combobox with search",
|
|
},
|
|
{
|
|
name: "dropzone",
|
|
type: "components:ui",
|
|
dependencies: ["react-dropzone"],
|
|
files: ["ui/dropzone.tsx"],
|
|
description: "File upload dropzone",
|
|
},
|
|
{
|
|
name: "editor",
|
|
type: "components:ui",
|
|
dependencies: ["@tiptap/react", "@tiptap/starter-kit"],
|
|
files: ["ui/editor.tsx"],
|
|
description: "Rich text editor",
|
|
},
|
|
{
|
|
name: "minimal-tiptap",
|
|
type: "components:ui",
|
|
dependencies: ["@tiptap/react", "@tiptap/starter-kit"],
|
|
files: ["ui/minimal-tiptap.tsx"],
|
|
description: "Minimal rich text editor",
|
|
},
|
|
{
|
|
name: "image-crop",
|
|
type: "components:ui",
|
|
dependencies: ["react-image-crop"],
|
|
files: ["ui/image-crop.tsx"],
|
|
description: "Image cropping component",
|
|
},
|
|
{
|
|
name: "image-zoom",
|
|
type: "components:ui",
|
|
dependencies: ["react-medium-image-zoom"],
|
|
files: ["ui/image-zoom.tsx"],
|
|
description: "Image zoom on click/hover",
|
|
},
|
|
|
|
// 3D Components
|
|
{
|
|
name: "3d-button",
|
|
type: "components:3d",
|
|
dependencies: ["motion", "three"],
|
|
files: ["ui/3d-button.tsx"],
|
|
description: "Interactive 3D button with depth effects",
|
|
},
|
|
{
|
|
name: "3d-card",
|
|
type: "components:3d",
|
|
dependencies: ["motion"],
|
|
files: ["ui/3d-card.tsx"],
|
|
description: "Card with 3D tilt effect",
|
|
},
|
|
{
|
|
name: "3d-carousel",
|
|
type: "components:3d",
|
|
dependencies: ["motion", "three"],
|
|
files: ["ui/3d-carousel.tsx"],
|
|
description: "3D carousel with perspective rotation",
|
|
},
|
|
{
|
|
name: "3d-grid",
|
|
type: "components:3d",
|
|
dependencies: ["motion", "three"],
|
|
files: ["ui/3d-grid.tsx"],
|
|
description: "Interactive 3D grid layout",
|
|
},
|
|
{
|
|
name: "3d-model-viewer",
|
|
type: "components:3d",
|
|
dependencies: ["three", "@react-three/fiber"],
|
|
files: ["ui/3d-model-viewer.tsx"],
|
|
description: "3D model viewer with controls",
|
|
},
|
|
{
|
|
name: "3d-scene",
|
|
type: "components:3d",
|
|
dependencies: ["three", "@react-three/fiber"],
|
|
files: ["ui/3d-scene.tsx"],
|
|
description: "Complete 3D scene component",
|
|
},
|
|
{
|
|
name: "3d-text",
|
|
type: "components:3d",
|
|
dependencies: ["motion", "three"],
|
|
files: ["ui/3d-text.tsx"],
|
|
description: "3D text with depth and lighting effects",
|
|
},
|
|
|
|
// Animation Components
|
|
{
|
|
name: "animated-background",
|
|
type: "components:animation",
|
|
dependencies: ["motion"],
|
|
files: ["ui/animated-background.tsx"],
|
|
description: "Animated background patterns and effects",
|
|
},
|
|
{
|
|
name: "animated-cursor",
|
|
type: "components:animation",
|
|
dependencies: ["motion"],
|
|
files: ["ui/animated-cursor.tsx"],
|
|
description: "Custom animated cursor",
|
|
},
|
|
{
|
|
name: "animated-icon",
|
|
type: "components:animation",
|
|
dependencies: ["motion"],
|
|
files: ["ui/animated-icon.tsx"],
|
|
description: "Icons with animation effects",
|
|
},
|
|
{
|
|
name: "animated-list",
|
|
type: "components:animation",
|
|
dependencies: ["motion"],
|
|
files: ["ui/animated-list.tsx"],
|
|
description: "List with staggered animations",
|
|
},
|
|
{
|
|
name: "animated-number",
|
|
type: "components:animation",
|
|
dependencies: ["motion"],
|
|
files: ["ui/animated-number.tsx"],
|
|
description: "Number counter with animation",
|
|
},
|
|
{
|
|
name: "animated-text",
|
|
type: "components:animation",
|
|
dependencies: ["motion"],
|
|
files: ["ui/animated-text.tsx"],
|
|
description: "Text with reveal animations",
|
|
},
|
|
{
|
|
name: "apple-cards-carousel",
|
|
type: "components:animation",
|
|
dependencies: ["motion"],
|
|
files: ["ui/apple-cards-carousel.tsx"],
|
|
description: "Apple-style cards carousel",
|
|
},
|
|
{
|
|
name: "grid-pattern",
|
|
type: "components:animation",
|
|
dependencies: ["motion"],
|
|
files: ["ui/grid-pattern.tsx"],
|
|
description: "Animated grid background pattern",
|
|
},
|
|
{
|
|
name: "particles-background",
|
|
type: "components:animation",
|
|
dependencies: ["tsparticles", "@tsparticles/react"],
|
|
files: ["ui/particles-background.tsx"],
|
|
description: "Particle effects background",
|
|
},
|
|
{
|
|
name: "pulse-animation",
|
|
type: "components:animation",
|
|
dependencies: ["motion"],
|
|
files: ["ui/pulse-animation.tsx"],
|
|
description: "Pulsing animation effects",
|
|
},
|
|
{
|
|
name: "reveal-animation",
|
|
type: "components:animation",
|
|
dependencies: ["motion"],
|
|
files: ["ui/reveal-animation.tsx"],
|
|
description: "Element reveal animations on scroll",
|
|
},
|
|
{
|
|
name: "timeline",
|
|
type: "components:animation",
|
|
dependencies: ["motion"],
|
|
files: ["ui/timeline.tsx"],
|
|
description: "Animated timeline component",
|
|
},
|
|
|
|
// UI Elements
|
|
{
|
|
name: "announcement",
|
|
type: "components:ui",
|
|
files: ["ui/announcement.tsx"],
|
|
description: "Announcement banner component",
|
|
},
|
|
{
|
|
name: "banner",
|
|
type: "components:ui",
|
|
files: ["ui/banner.tsx"],
|
|
description: "Banner notification component",
|
|
},
|
|
{
|
|
name: "cursor",
|
|
type: "components:ui",
|
|
dependencies: ["motion"],
|
|
files: ["ui/cursor.tsx"],
|
|
description: "Custom cursor component",
|
|
},
|
|
{
|
|
name: "dialog-stack",
|
|
type: "components:ui",
|
|
dependencies: ["@radix-ui/react-dialog"],
|
|
files: ["ui/dialog-stack.tsx"],
|
|
description: "Stacked dialog windows",
|
|
},
|
|
{
|
|
name: "marquee",
|
|
type: "components:ui",
|
|
dependencies: ["motion"],
|
|
files: ["ui/marquee.tsx"],
|
|
description: "Scrolling marquee text",
|
|
},
|
|
{
|
|
name: "avatar-group",
|
|
type: "components:ui",
|
|
registryDependencies: ["avatar"],
|
|
files: ["ui/avatar-group.tsx"],
|
|
description: "Grouped avatar display",
|
|
},
|
|
{
|
|
name: "pill",
|
|
type: "components:ui",
|
|
files: ["ui/pill.tsx"],
|
|
description: "Pill-shaped badge component",
|
|
},
|
|
{
|
|
name: "tags",
|
|
type: "components:ui",
|
|
files: ["ui/tags.tsx"],
|
|
description: "Tag input and display component",
|
|
},
|
|
|
|
// Navigation Components
|
|
{
|
|
name: "simple-navigation-bar",
|
|
type: "components:ui",
|
|
files: ["ui/navigation/simple-navigation-bar.tsx"],
|
|
description: "Simple navigation bar",
|
|
},
|
|
{
|
|
name: "advanced-navigation-bar",
|
|
type: "components:ui",
|
|
files: ["ui/navigation/advanced-navigation-bar.tsx"],
|
|
description: "Advanced navigation with dropdowns",
|
|
},
|
|
{
|
|
name: "underline-navigation-bar",
|
|
type: "components:ui",
|
|
files: ["ui/navigation/underline-navigation-bar.tsx"],
|
|
description: "Navigation with underline animation",
|
|
},
|
|
{
|
|
name: "e-commerce-navigation-bar",
|
|
type: "components:ui",
|
|
files: ["ui/navigation/e-commerce-navigation-bar.tsx"],
|
|
description: "E-commerce site navigation",
|
|
},
|
|
{
|
|
name: "dashboard-navigation-bar",
|
|
type: "components:ui",
|
|
files: ["ui/navigation/dashboard-navigation-bar.tsx"],
|
|
description: "Dashboard navigation layout",
|
|
},
|
|
{
|
|
name: "icon-navigation-bar",
|
|
type: "components:ui",
|
|
files: ["ui/navigation/icon-navigation-bar.tsx"],
|
|
description: "Icon-based navigation",
|
|
},
|
|
{
|
|
name: "breadcrumb-navigation-bar",
|
|
type: "components:ui",
|
|
files: ["ui/navigation/breadcrumb-navigation-bar.tsx"],
|
|
description: "Breadcrumb navigation",
|
|
},
|
|
{
|
|
name: "two-tier-navigation-bar",
|
|
type: "components:ui",
|
|
files: ["ui/navigation/two-tier-navigation-bar.tsx"],
|
|
description: "Two-level navigation",
|
|
},
|
|
{
|
|
name: "communication-navigation-bar",
|
|
type: "components:ui",
|
|
files: ["ui/navigation/communication-navigation-bar.tsx"],
|
|
description: "Communication app navigation",
|
|
},
|
|
{
|
|
name: "centered-logo-navigation-bar",
|
|
type: "components:ui",
|
|
files: ["ui/navigation/centered-logo-navigation-bar.tsx"],
|
|
description: "Navigation with centered logo",
|
|
},
|
|
{
|
|
name: "context-switcher-navigation-bar",
|
|
type: "components:ui",
|
|
files: ["ui/navigation/context-switcher-navigation-bar.tsx"],
|
|
description: "Navigation with context switcher",
|
|
},
|
|
{
|
|
name: "team-switcher-navigation-bar",
|
|
type: "components:ui",
|
|
files: ["ui/navigation/team-switcher-navigation-bar.tsx"],
|
|
description: "Navigation with team switcher",
|
|
},
|
|
{
|
|
name: "ai-model-selector-navigation-bar",
|
|
type: "components:ui",
|
|
files: ["ui/navigation/ai-model-selector-navigation-bar.tsx"],
|
|
description: "Navigation with AI model selector",
|
|
},
|
|
{
|
|
name: "search-and-toggle-navigation-bar",
|
|
type: "components:ui",
|
|
files: ["ui/navigation/search-and-toggle-navigation-bar.tsx"],
|
|
description: "Navigation with search and toggle",
|
|
},
|
|
{
|
|
name: "breadcrumb-and-filters-navigation-bar",
|
|
type: "components:ui",
|
|
files: ["ui/navigation/breadcrumb-and-filters-navigation-bar.tsx"],
|
|
description: "Navigation with breadcrumbs and filters",
|
|
},
|
|
{
|
|
name: "app-switcher-navigation-bar",
|
|
type: "components:ui",
|
|
files: ["ui/navigation/app-switcher-navigation-bar.tsx"],
|
|
description: "Navigation with app switcher",
|
|
},
|
|
{
|
|
name: "collaboration-navigation-bar",
|
|
type: "components:ui",
|
|
files: ["ui/navigation/collaboration-navigation-bar.tsx"],
|
|
description: "Collaboration tools navigation",
|
|
},
|
|
{
|
|
name: "status-dashboard-navigation-bar",
|
|
type: "components:ui",
|
|
files: ["ui/navigation/status-dashboard-navigation-bar.tsx"],
|
|
description: "Status dashboard navigation",
|
|
},
|
|
|
|
// Effect Components
|
|
{
|
|
name: "animated-beam",
|
|
type: "components:ui",
|
|
dependencies: ["motion"],
|
|
files: ["ui/animated-beam.tsx"],
|
|
description: "Animated beam connection effect",
|
|
},
|
|
{
|
|
name: "magnetic",
|
|
type: "components:ui",
|
|
dependencies: ["motion"],
|
|
files: ["ui/magnetic.tsx"],
|
|
description: "Magnetic hover effect",
|
|
},
|
|
{
|
|
name: "motion-highlight",
|
|
type: "components:ui",
|
|
dependencies: ["motion"],
|
|
files: ["ui/motion-highlight.tsx"],
|
|
description: "Motion-based text highlighting",
|
|
},
|
|
{
|
|
name: "pixel-image",
|
|
type: "components:ui",
|
|
files: ["ui/pixel-image.tsx"],
|
|
description: "Pixelated image effect",
|
|
},
|
|
|
|
// Utility Components
|
|
{
|
|
name: "calendar",
|
|
type: "components:ui",
|
|
dependencies: ["react-day-picker", "date-fns"],
|
|
files: ["ui/calendar.tsx"],
|
|
description: "Full calendar component",
|
|
},
|
|
{
|
|
name: "mini-calendar",
|
|
type: "components:ui",
|
|
dependencies: ["react-day-picker", "date-fns"],
|
|
files: ["ui/mini-calendar.tsx"],
|
|
description: "Compact calendar widget",
|
|
},
|
|
{
|
|
name: "relative-time",
|
|
type: "components:ui",
|
|
dependencies: ["date-fns"],
|
|
files: ["ui/relative-time.tsx"],
|
|
description: "Relative time display (e.g., '2 hours ago')",
|
|
},
|
|
{
|
|
name: "comparison",
|
|
type: "components:ui",
|
|
dependencies: ["react-compare-slider"],
|
|
files: ["ui/comparison.tsx"],
|
|
description: "Before/after comparison slider",
|
|
},
|
|
{
|
|
name: "kbd",
|
|
type: "components:ui",
|
|
files: ["ui/kbd.tsx"],
|
|
description: "Keyboard key component",
|
|
},
|
|
{
|
|
name: "qr-code",
|
|
type: "components:ui",
|
|
dependencies: ["qrcode.react"],
|
|
files: ["ui/qr-code.tsx"],
|
|
description: "QR code generator",
|
|
},
|
|
{
|
|
name: "status",
|
|
type: "components:ui",
|
|
files: ["ui/status.tsx"],
|
|
description: "Status indicator component",
|
|
},
|
|
{
|
|
name: "terminal",
|
|
type: "components:ui",
|
|
dependencies: ["xterm", "xterm-addon-fit"],
|
|
files: ["ui/terminal.tsx"],
|
|
description: "Terminal emulator component",
|
|
},
|
|
{
|
|
name: "video-player",
|
|
type: "components:ui",
|
|
dependencies: ["video.js", "videojs-react-enhanced"],
|
|
files: ["ui/video-player.tsx"],
|
|
description: "Advanced video player component",
|
|
},
|
|
{
|
|
name: "youtube-pip-player",
|
|
type: "components:ui",
|
|
dependencies: ["lucide-react", "class-variance-authority"],
|
|
files: ["ui/youtube-pip-player.tsx"],
|
|
description:
|
|
"YouTube embed with scroll-based Picture-in-Picture, draggable window, and TV effects",
|
|
},
|
|
{
|
|
name: "music-player",
|
|
type: "components:ui",
|
|
dependencies: ["react-h5-audio-player"],
|
|
files: ["ui/music-player.tsx"],
|
|
description: "Advanced music player with playlist support",
|
|
},
|
|
{
|
|
name: "dock",
|
|
type: "components:ui",
|
|
dependencies: ["motion"],
|
|
files: ["ui/dock.tsx"],
|
|
description: "macOS-style dock with animations",
|
|
},
|
|
]
|