{ "$schema": "https://ui.shadcn.com/schema/registry.json", "name": "ballmac", "homepage": "https://ui.ballmac.com", "items": [ { "name": "accordion", "type": "registry:ui", "title": "Accordion", "description": "Vertically stacked disclosure sections on Radix Accordion, single or multiple open, with hairline dividers, a rotating plus and height animation.", "author": "Ballmac ", "dependencies": [ "radix-ui", "lucide-react" ], "devDependencies": [ "tw-animate-css" ], "registryDependencies": [ "utils" ], "files": [ { "path": "registry/ballmac/components/accordion.tsx", "type": "registry:ui", "target": "@components/ballmac/accordion.tsx" } ], "categories": [ "primitives" ], "meta": { "schema": 1, "tier": "free", "tags": [ "accordion", "disclosure", "faq", "collapsible", "radix" ], "version": "1.0.0", "updated": "2026-09-28", "ai": { "summary": "Show and hide sections of content one at a time (type=\"single\" collapsible) or several at once (type=\"multiple\").", "whenToUse": [ "FAQ sections", "Settings or docs with optional detail", "Long content where readers scan headings first" ], "whenNotToUse": [ "A single show/hide toggle (use reasoning-disclosure or a Radix Collapsible)", "Navigation between views (use tabs)" ], "composesWith": [ "badge" ], "a11y": [ { "keys": "Enter / Space", "action": "Toggles the focused section" }, { "keys": "↓ / ↑", "action": "Moves focus between section headers" }, { "keys": "Home / End", "action": "Moves focus to the first or last header" } ], "customization": [ "type: single | multiple", "collapsible (single): allow closing the open section", "defaultValue / value for open sections" ] }, "source": { "name": "shadcn/ui Accordion", "url": "https://github.com/shadcn-ui/ui", "license": "MIT", "copyright": "Copyright (c) 2023 shadcn", "modified": true }, "examples": [ "accordion-demo", "accordion-multiple" ], "url": "https://ui.ballmac.com/components/accordion" } }, { "name": "accordion-demo", "type": "registry:example", "title": "Accordion: Default", "description": "Default example of Accordion.", "registryDependencies": [ "https://ui.ballmac.com/r/accordion.json" ], "files": [ { "path": "registry/examples/accordion-demo.tsx", "type": "registry:example", "target": "@components/ballmac/examples/accordion-demo.tsx" } ], "categories": [ "primitives" ], "meta": { "example": true, "of": "accordion", "tier": "free" } }, { "name": "accordion-multiple", "type": "registry:example", "title": "Accordion: Multiple open", "description": "Multiple open example of Accordion.", "registryDependencies": [ "https://ui.ballmac.com/r/accordion.json" ], "files": [ { "path": "registry/examples/accordion-multiple.tsx", "type": "registry:example", "target": "@components/ballmac/examples/accordion-multiple.tsx" } ], "categories": [ "primitives" ], "meta": { "example": true, "of": "accordion", "tier": "free" } }, { "name": "activity-feed", "type": "registry:ui", "title": "Activity Feed", "description": "A compact actor and action feed with timestamps and an empty state.", "author": "Ballmac ", "registryDependencies": [ "utils", "https://ui.ballmac.com/r/i18n.json" ], "files": [ { "path": "registry/ballmac/components/activity-feed.tsx", "type": "registry:ui", "target": "@components/ballmac/activity-feed.tsx" } ], "categories": [ "data-display" ], "meta": { "schema": 1, "tier": "free", "tags": [ "activity", "history", "events" ], "version": "1.0.0", "updated": "2026-09-30", "ai": { "summary": "A compact actor and action feed with timestamps and an empty state.", "whenToUse": [ "Show recent changes made by people or the system" ], "whenNotToUse": [ "Use Timeline for milestone progression" ], "composesWith": [ "timeline" ], "a11y": [ { "keys": "None", "action": "Static content is announced with semantic structure" } ], "customization": [ "Content, layout, and token-based className styling" ] }, "examples": [ "activity-feed-demo", "activity-feed-states" ], "url": "https://ui.ballmac.com/components/activity-feed" } }, { "name": "activity-feed-demo", "type": "registry:example", "title": "Activity Feed: Overview", "description": "Overview example of Activity Feed.", "registryDependencies": [ "https://ui.ballmac.com/r/activity-feed.json" ], "files": [ { "path": "registry/examples/activity-feed-demo.tsx", "type": "registry:example", "target": "@components/ballmac/examples/activity-feed-demo.tsx" } ], "categories": [ "data-display" ], "meta": { "example": true, "of": "activity-feed", "tier": "free" } }, { "name": "activity-feed-states", "type": "registry:example", "title": "Activity Feed: States and variants", "description": "States and variants example of Activity Feed.", "registryDependencies": [ "https://ui.ballmac.com/r/activity-feed.json" ], "files": [ { "path": "registry/examples/activity-feed-states.tsx", "type": "registry:example", "target": "@components/ballmac/examples/activity-feed-states.tsx" } ], "categories": [ "data-display" ], "meta": { "example": true, "of": "activity-feed", "tier": "free" } }, { "name": "agent-plan", "type": "registry:ui", "title": "Agent Plan", "description": "A live task plan for agents: a vertical timeline with pending, running, done, failed and skipped steps, nested substeps, expandable output, segmented progress and retry on failure.", "author": "Ballmac ", "dependencies": [ "motion@^12", "lucide-react" ], "registryDependencies": [ "utils", "https://ui.ballmac.com/r/i18n.json" ], "files": [ { "path": "registry/ballmac/components/agent-plan.tsx", "type": "registry:ui", "target": "@components/ballmac/agent-plan.tsx" } ], "categories": [ "ai" ], "meta": { "schema": 1, "tier": "free", "tags": [ "ai", "agent", "plan", "steps", "timeline", "tasks" ], "version": "1.0.0", "updated": "2026-09-30", "ai": { "summary": "steps is [{ id, title, status, description?, duration?, detail?, error?, steps? }]. Update statuses as the agent works and the timeline, progress bar and screen reader summary follow. onRetry adds a Retry button to failed steps.", "whenToUse": [ "Showing what an agent will do and is doing", "Multi-step workflows that can fail part-way" ], "whenNotToUse": [ "A single tool invocation; use tool-call-card", "Onboarding checklists; use onboarding-checklist" ], "composesWith": [ "tool-call-card", "approval-card", "thinking-indicator" ], "a11y": [ { "keys": "Enter / Space", "action": "Expands or collapses a step's output" }, { "keys": "Screen readers", "action": "Each step reads its status first; a polite status line announces the current step" }, { "keys": "Color", "action": "Every state has an icon and, for running and failed, a word" } ], "customization": [ "expanded / onExpandedChange", "onRetry", "actions slot", "nested steps" ] }, "examples": [ "agent-plan-demo", "agent-plan-failed" ], "url": "https://ui.ballmac.com/components/agent-plan" } }, { "name": "agent-plan-demo", "type": "registry:example", "title": "Agent Plan: Plan that runs", "description": "Plan that runs example of Agent Plan.", "registryDependencies": [ "https://ui.ballmac.com/r/agent-plan.json" ], "dependencies": [ "lucide-react" ], "files": [ { "path": "registry/examples/agent-plan-demo.tsx", "type": "registry:example", "target": "@components/ballmac/examples/agent-plan-demo.tsx" } ], "categories": [ "ai" ], "meta": { "example": true, "of": "agent-plan", "tier": "free" } }, { "name": "agent-plan-failed", "type": "registry:example", "title": "Agent Plan: Failure with retry", "description": "Failure with retry example of Agent Plan.", "registryDependencies": [ "https://ui.ballmac.com/r/agent-plan.json" ], "files": [ { "path": "registry/examples/agent-plan-failed.tsx", "type": "registry:example", "target": "@components/ballmac/examples/agent-plan-failed.tsx" } ], "categories": [ "ai" ], "meta": { "example": true, "of": "agent-plan", "tier": "free" } }, { "name": "ai-chat", "type": "registry:ui", "title": "AI Chat", "description": "The layout for a chat UI: a message log that sticks to the bottom while replies stream unless the reader scrolls up, a jump-to-latest button, an empty state with suggestions and a footer.", "author": "Ballmac ", "dependencies": [ "lucide-react", "motion@^12" ], "registryDependencies": [ "https://ui.ballmac.com/r/button.json", "https://ui.ballmac.com/r/motion-presets.json", "utils", "https://ui.ballmac.com/r/i18n.json" ], "files": [ { "path": "registry/ballmac/components/ai-chat.tsx", "type": "registry:ui", "target": "@components/ballmac/ai-chat.tsx" } ], "categories": [ "ai" ], "meta": { "schema": 1, "tier": "free", "tags": [ "ai", "chat", "conversation", "llm", "scroll", "streaming", "layout" ], "version": "1.0.0", "updated": "2026-09-28", "ai": { "summary": "Layout only: (a full-height column) > (role=log, auto-scroll) + . Put ai-message items inside ChatMessages and a prompt-input inside ChatFooter. It holds no chat state, so any source works (Vercel AI SDK useChat, your own fetch stream).", "whenToUse": [ "Building an assistant, support bot or copilot panel from ai-message and prompt-input", "Any log that receives streaming content and should follow the newest line unless the reader scrolls up", "A first-run screen with suggested prompts (ChatEmpty + ChatSuggestions)" ], "whenNotToUse": [ "A single one-off AI answer on a page (use ai-message or streaming-text alone)", "Terminal-style command output (use terminal)" ], "composesWith": [ "ai-message", "prompt-input", "streaming-text", "tool-call-card", "reasoning-disclosure" ], "a11y": [ { "keys": "Tab", "action": "Focuses the message log (scroll with arrow keys / Page Up / Page Down), then the jump-to-latest button when shown" }, { "keys": "Enter / Space", "action": "On a suggestion, sends it through onSelect" }, { "keys": "—", "action": "The log is role=log with aria-live=polite; set aria-busy on ChatMessages while a reply streams to avoid announcing every token" } ], "customization": [ "Give Chat (or its parent) a height; ChatMessages fills the remaining space and scrolls", "contentClassName on ChatMessages and ChatFooter sets the message column width (max-w-3xl by default)", "useChatScroll() inside Chat returns { isAtBottom, scrollToBottom } — call scrollToBottom() when the user sends a message", "Keep ChatMessages mounted and render ChatEmpty inside it when there are no messages", "AI SDK wiring: const { messages, sendMessage, status, stop } = useChat(); render messages in ChatMessages and sendMessage({ text })} /> in ChatFooter" ] }, "examples": [ "ai-chat-demo", "ai-chat-empty" ], "url": "https://ui.ballmac.com/components/ai-chat" } }, { "name": "ai-chat-demo", "type": "registry:example", "title": "AI Chat: Default", "description": "Default example of AI Chat.", "registryDependencies": [ "https://ui.ballmac.com/r/ai-chat.json", "https://ui.ballmac.com/r/ai-message.json", "https://ui.ballmac.com/r/prompt-input.json", "https://ui.ballmac.com/r/streaming-text.json" ], "files": [ { "path": "registry/examples/ai-chat-demo.tsx", "type": "registry:example", "target": "@components/ballmac/examples/ai-chat-demo.tsx" } ], "categories": [ "ai" ], "meta": { "example": true, "of": "ai-chat", "tier": "free" } }, { "name": "ai-chat-empty", "type": "registry:example", "title": "AI Chat: Empty state with suggestions", "description": "Empty state with suggestions example of AI Chat.", "registryDependencies": [ "https://ui.ballmac.com/r/ai-chat.json" ], "dependencies": [ "lucide-react" ], "files": [ { "path": "registry/examples/ai-chat-empty.tsx", "type": "registry:example", "target": "@components/ballmac/examples/ai-chat-empty.tsx" } ], "categories": [ "ai" ], "meta": { "example": true, "of": "ai-chat", "tier": "free" } }, { "name": "ai-message", "type": "registry:ui", "title": "AI Message", "description": "A chat message with user, assistant and system roles: right-aligned user bubbles, full-width assistant prose, an avatar slot, hover-revealed actions and a hydration-safe timestamp.", "author": "Ballmac ", "dependencies": [ "lucide-react" ], "registryDependencies": [ "https://ui.ballmac.com/r/button.json", "utils", "https://ui.ballmac.com/r/i18n.json" ], "files": [ { "path": "registry/ballmac/components/ai-message.tsx", "type": "registry:ui", "target": "@components/ballmac/ai-message.tsx" } ], "categories": [ "ai" ], "meta": { "schema": 1, "tier": "free", "tags": [ "ai", "chat", "message", "llm", "assistant", "copy" ], "version": "1.0.0", "updated": "2026-09-28", "ai": { "summary": "Render one chat turn. wraps , , (with and ) and . It takes plain children, so it works with the Vercel AI SDK, LangChain or any stream.", "whenToUse": [ "Rendering each turn of an assistant or chatbot conversation", "Showing copy, regenerate and feedback buttons under an assistant reply", "A system note inside a conversation, such as 'Model switched to a smaller context window'" ], "whenNotToUse": [ "The scrolling conversation layout itself (use ai-chat and put messages inside ChatMessages)", "Threaded comments or email-style lists where both sides look alike" ], "composesWith": [ "ai-chat", "prompt-input", "streaming-text", "tool-call-card", "reasoning-disclosure", "code-block" ], "a11y": [ { "keys": "Tab", "action": "Moves through the action buttons; focusing any of them reveals the action row" }, { "keys": "Enter / Space", "action": "Runs the focused action" } ], "customization": [ "role: user | assistant | system (sets alignment and bubble styling through context)", "MessageActions visibility: hover (default; always visible on touch devices) | always", "MessageAction requires a label (used as aria-label and title); pass aria-pressed for thumbs up/down", "MessageTimestamp formats with locale (en-US default) and timeZone; without timeZone it formats after hydration in the viewer's zone, or pass preformatted children", "Render markdown yourself inside MessageContent; it styles lists, code and spacing lightly", "AI SDK: messages.map(m => {m.parts.map(p => p.type === 'text' ? p.text : null)})" ] }, "examples": [ "ai-message-demo", "ai-message-actions" ], "url": "https://ui.ballmac.com/components/ai-message" } }, { "name": "ai-message-demo", "type": "registry:example", "title": "AI Message: Default", "description": "Default example of AI Message.", "registryDependencies": [ "https://ui.ballmac.com/r/ai-message.json" ], "files": [ { "path": "registry/examples/ai-message-demo.tsx", "type": "registry:example", "target": "@components/ballmac/examples/ai-message-demo.tsx" } ], "categories": [ "ai" ], "meta": { "example": true, "of": "ai-message", "tier": "free" } }, { "name": "ai-message-actions", "type": "registry:example", "title": "AI Message: With actions", "description": "With actions example of AI Message.", "registryDependencies": [ "https://ui.ballmac.com/r/ai-message.json" ], "dependencies": [ "lucide-react" ], "files": [ { "path": "registry/examples/ai-message-actions.tsx", "type": "registry:example", "target": "@components/ballmac/examples/ai-message-actions.tsx" } ], "categories": [ "ai" ], "meta": { "example": true, "of": "ai-message", "tier": "free" } }, { "name": "ai-orb", "type": "registry:ui", "title": "AI Orb", "description": "A glass orb of drifting theme-colored light that shows whether the assistant is idle, listening, thinking or speaking, and swells with a live voice level.", "author": "Ballmac ", "dependencies": [ "motion@^12", "class-variance-authority" ], "registryDependencies": [ "utils" ], "files": [ { "path": "registry/ballmac/components/ai-orb.tsx", "type": "registry:ui", "target": "@components/ballmac/ai-orb.tsx" } ], "categories": [ "ai" ], "meta": { "schema": 1, "tier": "free", "tags": [ "ai", "orb", "voice", "assistant", "status", "visual" ], "version": "1.0.0", "updated": "2026-09-30", "ai": { "summary": "state is idle | listening | thinking | speaking. Pass level (0 to 1) to make it swell with audio. size is sm | default | lg | xl. Colors come from chart-1 to chart-5, so it follows the theme.", "whenToUse": [ "The face of a voice assistant or a full-screen chat", "A status mark beside an assistant's name" ], "whenNotToUse": [ "A plain spinner (use spinner)", "Anything that must be readable as text; pair it with thinking-indicator" ], "composesWith": [ "voice-input", "thinking-indicator", "ai-chat" ], "a11y": [ { "keys": "Screen readers", "action": "role=img named 'Assistant is listening' and so on. Pass label={null} to hide it when text beside it says the same" }, { "keys": "Reduced motion", "action": "Static orb, no drift or breathing" } ], "customization": [ "state", "level", "size", "label (string | null)" ] }, "examples": [ "ai-orb-demo", "ai-orb-voice" ], "url": "https://ui.ballmac.com/components/ai-orb" } }, { "name": "ai-orb-demo", "type": "registry:example", "title": "AI Orb: Four states", "description": "Four states example of AI Orb.", "registryDependencies": [ "https://ui.ballmac.com/r/ai-orb.json" ], "files": [ { "path": "registry/examples/ai-orb-demo.tsx", "type": "registry:example", "target": "@components/ballmac/examples/ai-orb-demo.tsx" } ], "categories": [ "ai" ], "meta": { "example": true, "of": "ai-orb", "tier": "free" } }, { "name": "ai-orb-voice", "type": "registry:example", "title": "AI Orb: Reacting to voice level", "description": "Reacting to voice level example of AI Orb.", "registryDependencies": [ "https://ui.ballmac.com/r/ai-orb.json" ], "files": [ { "path": "registry/examples/ai-orb-voice.tsx", "type": "registry:example", "target": "@components/ballmac/examples/ai-orb-voice.tsx" } ], "categories": [ "ai" ], "meta": { "example": true, "of": "ai-orb", "tier": "free" } }, { "name": "alert-dialog", "type": "registry:ui", "title": "Alert Dialog", "description": "Focus-managed confirmation for consequential actions, with a clear cancel path, optional media, and a token-based destructive action.", "author": "Ballmac ", "dependencies": [ "radix-ui" ], "registryDependencies": [ "utils" ], "files": [ { "path": "registry/ballmac/components/alert-dialog.tsx", "type": "registry:ui", "target": "@components/ballmac/alert-dialog.tsx" } ], "categories": [ "feedback" ], "meta": { "schema": 1, "tier": "free", "tags": [ "confirmation", "modal", "destructive", "radix" ], "version": "1.0.0", "updated": "2026-09-30", "ai": { "summary": "Ask for explicit confirmation before a consequential action; cancel remains the safe keyboard path.", "whenToUse": [ "Delete or revoke something permanent", "Confirm an action with a material consequence" ], "whenNotToUse": [ "Show information without requiring a choice; use dialog", "Confirm a low-risk routine action" ], "composesWith": [ "button" ], "a11y": [ { "keys": "Tab / Shift+Tab", "action": "Moves within the modal choices" }, { "keys": "Enter / Space", "action": "Activates the focused choice" }, { "keys": "Escape", "action": "Cancels when the dialog permits dismissal" } ], "customization": [ "size: default | sm", "destructive action state", "controlled open state" ] }, "examples": [ "alert-dialog-demo", "alert-dialog-states" ], "url": "https://ui.ballmac.com/components/alert-dialog" } }, { "name": "alert-dialog-demo", "type": "registry:example", "title": "Alert Dialog: Remove a project", "description": "Remove a project example of Alert Dialog.", "registryDependencies": [ "https://ui.ballmac.com/r/alert-dialog.json" ], "dependencies": [ "lucide-react" ], "files": [ { "path": "registry/examples/alert-dialog-demo.tsx", "type": "registry:example", "target": "@components/ballmac/examples/alert-dialog-demo.tsx" } ], "categories": [ "feedback" ], "meta": { "example": true, "of": "alert-dialog", "tier": "free" } }, { "name": "alert-dialog-states", "type": "registry:example", "title": "Alert Dialog: Confirmation styles", "description": "Confirmation styles example of Alert Dialog.", "registryDependencies": [ "https://ui.ballmac.com/r/alert-dialog.json" ], "files": [ { "path": "registry/examples/alert-dialog-states.tsx", "type": "registry:example", "target": "@components/ballmac/examples/alert-dialog-states.tsx" } ], "categories": [ "feedback" ], "meta": { "example": true, "of": "alert-dialog", "tier": "free" } }, { "name": "alert", "type": "registry:ui", "title": "Alert", "description": "A semantic callout with five theme-aware tones, clear icon placement, an action row, and opt-in urgent announcements.", "author": "Ballmac ", "dependencies": [ "class-variance-authority" ], "registryDependencies": [ "utils" ], "files": [ { "path": "registry/ballmac/components/alert.tsx", "type": "registry:ui", "target": "@components/ballmac/alert.tsx" } ], "categories": [ "feedback" ], "meta": { "schema": 1, "tier": "free", "tags": [ "alert", "callout", "status" ], "version": "1.0.0", "updated": "2026-09-29", "ai": { "summary": "A semantic callout with five theme-aware tones, clear icon placement, an action row, and opt-in urgent announcements.", "whenToUse": [ "Display a status or important message", "Pair a warning with a clear next action" ], "whenNotToUse": [ "Use a toast for transient confirmation" ], "composesWith": [ "badge", "button" ], "a11y": [ { "keys": "Tab", "action": "moves to links and actions" } ], "customization": [ "variant: default | info | success | warning | destructive", "urgent: announce new urgent content" ] }, "source": { "name": "shadcn/ui Alert", "url": "https://github.com/shadcn-ui/ui", "license": "MIT", "copyright": "Copyright (c) 2023 shadcn", "modified": true }, "examples": [ "alert-demo", "alert-states" ], "url": "https://ui.ballmac.com/components/alert" } }, { "name": "alert-demo", "type": "registry:example", "title": "Alert: Overview", "description": "Overview example of Alert.", "registryDependencies": [ "https://ui.ballmac.com/r/alert.json", "https://ui.ballmac.com/r/button.json" ], "dependencies": [ "lucide-react" ], "files": [ { "path": "registry/examples/alert-demo.tsx", "type": "registry:example", "target": "@components/ballmac/examples/alert-demo.tsx" } ], "categories": [ "feedback" ], "meta": { "example": true, "of": "alert", "tier": "free" } }, { "name": "alert-states", "type": "registry:example", "title": "Alert: States and variants", "description": "States and variants example of Alert.", "registryDependencies": [ "https://ui.ballmac.com/r/alert.json" ], "dependencies": [ "lucide-react" ], "files": [ { "path": "registry/examples/alert-states.tsx", "type": "registry:example", "target": "@components/ballmac/examples/alert-states.tsx" } ], "categories": [ "feedback" ], "meta": { "example": true, "of": "alert", "tier": "free" } }, { "name": "android-frame", "type": "registry:ui", "title": "Android Frame", "description": "A modern Android phone drawn in CSS: satin frame in porcelain, obsidian or sage, centered punch-hole camera, Material-style status bar and gesture or three-button navigation. Children render at phone resolution, scaled to fit.", "author": "Ballmac ", "dependencies": [ "motion@^12" ], "registryDependencies": [ "utils", "https://ui.ballmac.com/r/media.json" ], "files": [ { "path": "registry/ballmac/components/android-frame.tsx", "type": "registry:ui", "target": "@components/ballmac/android-frame.tsx" } ], "categories": [ "devices" ], "meta": { "schema": 1, "tier": "free", "tags": [ "mockup", "device", "phone", "android", "pixel", "mobile", "hero" ], "version": "1.0.0", "updated": "2026-10-01", "ai": { "summary": "Wrap a mobile screen in : children render below a status bar at 412 CSS px wide and are scaled to the frame's width. Set the width with className (e.g. w-64).", "whenToUse": [ "Showing an Android or responsive mobile app", "Side by side with phone-frame for cross-platform stories" ], "whenNotToUse": [ "iPhone mockups (phone-frame)", "Real device screenshots with a bezel" ], "composesWith": [ "phone-frame", "tablet-frame", "laptop-frame" ], "a11y": [ { "keys": "Static", "action": "Purely visual: no focusable elements from the frame" }, { "keys": "Reduced motion", "action": "Video on the screen is not autoplayed" } ], "customization": [ "variant: auto | porcelain | obsidian | sage", "navigation: gesture | buttons | none", "screenWidth: virtual width in CSS px", "statusBar, time", "src/alt or videoSrc/poster instead of children" ] }, "examples": [ "android-frame-demo", "android-frame-buttons" ], "url": "https://ui.ballmac.com/components/android-frame" } }, { "name": "android-frame-demo", "type": "registry:example", "title": "Android Frame: Home screen", "description": "Home screen example of Android Frame.", "registryDependencies": [ "https://ui.ballmac.com/r/android-frame.json" ], "dependencies": [ "lucide-react" ], "files": [ { "path": "registry/examples/android-frame-demo.tsx", "type": "registry:example", "target": "@components/ballmac/examples/android-frame-demo.tsx" } ], "categories": [ "devices" ], "meta": { "example": true, "of": "android-frame", "tier": "free" } }, { "name": "android-frame-buttons", "type": "registry:example", "title": "Android Frame: Three-button navigation", "description": "Three-button navigation example of Android Frame.", "registryDependencies": [ "https://ui.ballmac.com/r/android-frame.json" ], "dependencies": [ "lucide-react" ], "files": [ { "path": "registry/examples/android-frame-buttons.tsx", "type": "registry:example", "target": "@components/ballmac/examples/android-frame-buttons.tsx" } ], "categories": [ "devices" ], "meta": { "example": true, "of": "android-frame", "tier": "free" } }, { "name": "animated-beam", "type": "registry:ui", "title": "Animated Beam", "description": "An SVG beam that connects two elements with a curved path and sends a glowing gradient pulse along it. Follows layout changes, pauses off-screen, static under reduced motion.", "author": "Ballmac ", "dependencies": [ "motion@^12" ], "registryDependencies": [ "utils" ], "files": [ { "path": "registry/ballmac/components/animated-beam.tsx", "type": "registry:ui", "target": "@components/ballmac/animated-beam.tsx" } ], "categories": [ "motion" ], "meta": { "schema": 1, "tier": "free", "tags": [ "beam", "connection", "integration", "diagram", "svg", "hero", "motion" ], "version": "1.0.0", "updated": "2026-09-29", "ai": { "summary": "Give a relative container a ref, give each endpoint element a ref, and render inside the container once per connection. Put endpoint nodes above the beams with relative z-10. The SVG is aria-hidden and pointer-events-none.", "whenToUse": [ "Integration diagrams: tools or data sources flowing into an agent or product", "Showing a request path between services on a landing page", "Explaining a sync or pipeline visually in a feature section" ], "whenNotToUse": [ "Real, data-driven graphs with many nodes (use a graph library)", "Conveying state on its own; label the nodes, the beam is decorative" ], "composesWith": [ "orbiting-circles", "dot-pattern", "border-beam" ], "a11y": [], "customization": [ "curvature in px (positive bows up), reverse to flip direction", "duration, delay and repeatDelay in seconds; stagger delays across beams", "pulseLength as a fraction of the path (default 0.35)", "startXOffset/startYOffset/endXOffset/endYOffset to attach to node edges", "pathColor, pathWidth, pathOpacity; gradientStartColor/gradientStopColor default to var(--chart-1) → var(--chart-4)" ] }, "source": { "name": "Magic UI Animated Beam", "url": "https://github.com/magicuidesign/magicui", "license": "MIT", "copyright": "Copyright (c) Magic UI", "modified": true }, "examples": [ "animated-beam-demo", "animated-beam-bidirectional" ], "url": "https://ui.ballmac.com/components/animated-beam" } }, { "name": "animated-beam-demo", "type": "registry:example", "title": "Animated Beam: Agent integrations", "description": "Agent integrations example of Animated Beam.", "registryDependencies": [ "https://ui.ballmac.com/r/animated-beam.json", "utils" ], "dependencies": [ "lucide-react" ], "files": [ { "path": "registry/examples/animated-beam-demo.tsx", "type": "registry:example", "target": "@components/ballmac/examples/animated-beam-demo.tsx" } ], "categories": [ "motion" ], "meta": { "example": true, "of": "animated-beam", "tier": "free" } }, { "name": "animated-beam-bidirectional", "type": "registry:example", "title": "Animated Beam: Two-way sync", "description": "Two-way sync example of Animated Beam.", "registryDependencies": [ "https://ui.ballmac.com/r/animated-beam.json" ], "dependencies": [ "lucide-react" ], "files": [ { "path": "registry/examples/animated-beam-bidirectional.tsx", "type": "registry:example", "target": "@components/ballmac/examples/animated-beam-bidirectional.tsx" } ], "categories": [ "motion" ], "meta": { "example": true, "of": "animated-beam", "tier": "free" } }, { "name": "animated-grid", "type": "registry:ui", "title": "Animated Grid", "description": "A decorative hairline grid background where a few random cells softly light up and fade, like instrument lights. SVG, hydration-safe, static under reduced motion.", "author": "Ballmac ", "dependencies": [ "motion@^12" ], "registryDependencies": [ "utils", "https://ui.ballmac.com/r/motion-presets.json" ], "files": [ { "path": "registry/ballmac/components/animated-grid.tsx", "type": "registry:ui", "target": "@components/ballmac/animated-grid.tsx" } ], "categories": [ "motion" ], "meta": { "schema": 1, "tier": "free", "tags": [ "background", "grid", "pattern", "hero", "decorative", "motion" ], "version": "1.0.0", "updated": "2026-09-28", "ai": { "summary": "Place as the first child of a relative container (it is absolute inset-0, aria-hidden, pointer-events-none) and put content after it with relative positioning. Lit cells are picked on the client after mount, so SSR output is just the grid.", "whenToUse": [ "Hero or section backgrounds on developer-tool and SaaS landing pages", "Empty states or sign-in screens that need quiet texture" ], "whenNotToUse": [ "Behind dense text or data (it competes with content)", "More than one per screen" ], "composesWith": [ "text-reveal", "shimmer-text", "magnetic-button" ], "a11y": [], "customization": [ "cellSize in px (default 40); count of lit cells (default 8); interval in ms between changes (default 700)", "fade toggles the radial edge mask; pass your own mask via style", "Colors are CSS variables: className=\"[--grid-line:…] [--grid-light:…]\" (defaults: 8% foreground lines, 20% ring cells)" ] }, "examples": [ "animated-grid-demo" ], "url": "https://ui.ballmac.com/components/animated-grid" } }, { "name": "animated-grid-demo", "type": "registry:example", "title": "Animated Grid: Hero background", "description": "Hero background example of Animated Grid.", "registryDependencies": [ "https://ui.ballmac.com/r/animated-grid.json" ], "files": [ { "path": "registry/examples/animated-grid-demo.tsx", "type": "registry:example", "target": "@components/ballmac/examples/animated-grid-demo.tsx" } ], "categories": [ "motion" ], "meta": { "example": true, "of": "animated-grid", "tier": "free" } }, { "name": "animated-list", "type": "registry:ui", "title": "Animated List", "description": "A live feed where new items spring in at the top and the rest glide down, with leave animations, an item cap, an optional fading tail and a polite announcement for new entries.", "author": "Ballmac ", "dependencies": [ "motion@^12" ], "registryDependencies": [ "utils" ], "files": [ { "path": "registry/ballmac/components/animated-list.tsx", "type": "registry:ui", "target": "@components/ballmac/animated-list.tsx" } ], "categories": [ "motion" ], "meta": { "schema": 1, "tier": "free", "tags": [ "list", "feed", "notifications", "live", "spring" ], "version": "1.0.0", "updated": "2026-10-01", "ai": { "summary": "…. Each item needs a stable key. Prepend new entries to your array; layout animation does the rest.", "whenToUse": [ "Live activity, notification and event feeds", "Chat-like logs where entries arrive over time" ], "whenNotToUse": [ "Static lists (stagger-list)", "Hundreds of rows (virtualize instead)" ], "composesWith": [ "notification-stack", "activity-feed", "stagger-list" ], "a11y": [ { "keys": "Screen readers", "action": "announce turns on a polite live region that reads additions only" }, { "keys": "Reduced motion", "action": "Items fade in without moving or scaling" } ], "customization": [ "max", "fadeEnd", "announce", "label", "item content is yours" ] }, "examples": [ "animated-list-demo", "animated-list-log" ], "url": "https://ui.ballmac.com/components/animated-list" } }, { "name": "animated-list-demo", "type": "registry:example", "title": "Animated List: Live notification feed", "description": "Live notification feed example of Animated List.", "registryDependencies": [ "https://ui.ballmac.com/r/animated-list.json" ], "dependencies": [ "lucide-react" ], "files": [ { "path": "registry/examples/animated-list-demo.tsx", "type": "registry:example", "target": "@components/ballmac/examples/animated-list-demo.tsx" } ], "categories": [ "motion" ], "meta": { "example": true, "of": "animated-list", "tier": "free" } }, { "name": "animated-list-log", "type": "registry:example", "title": "Animated List: Capped activity log", "description": "Capped activity log example of Animated List.", "registryDependencies": [ "https://ui.ballmac.com/r/animated-list.json" ], "files": [ { "path": "registry/examples/animated-list-log.tsx", "type": "registry:example", "target": "@components/ballmac/examples/animated-list-log.tsx" } ], "categories": [ "motion" ], "meta": { "example": true, "of": "animated-list", "tier": "free" } }, { "name": "animated-number-flow", "type": "registry:ui", "title": "Animated Number Flow", "description": "A number whose digits roll like an odometer to the new value, with locale and Intl formatting for currency, percent and compact notation, and widths that animate as digits come and go.", "author": "Ballmac ", "dependencies": [ "motion@^12" ], "registryDependencies": [ "utils", "https://ui.ballmac.com/r/i18n.json" ], "files": [ { "path": "registry/ballmac/components/animated-number-flow.tsx", "type": "registry:ui", "target": "@components/ballmac/animated-number-flow.tsx" } ], "categories": [ "motion" ], "meta": { "schema": 1, "tier": "free", "tags": [ "number", "odometer", "counter", "currency", "format" ], "version": "1.0.0", "updated": "2026-10-01", "ai": { "summary": ". Change value and each digit rolls to its new place. Uses Intl.NumberFormat with a fixed default locale so server and browser agree.", "whenToUse": [ "Prices, balances and stats that change on interaction", "Live metrics" ], "whenNotToUse": [ "A one-time count-up on scroll (number-ticker)" ], "composesWith": [ "number-ticker", "stat-card", "kpi-row" ], "a11y": [ { "keys": "Screen readers", "action": "The formatted number is read as text; announce adds a polite live region" }, { "keys": "Reduced motion", "action": "The value changes instantly" } ], "customization": [ "format (Intl options)", "locale", "prefix and suffix", "fade", "announce" ] }, "examples": [ "animated-number-flow-demo", "animated-number-flow-formats" ], "url": "https://ui.ballmac.com/components/animated-number-flow" } }, { "name": "animated-number-flow-demo", "type": "registry:example", "title": "Animated Number Flow: Price with plan toggle", "description": "Price with plan toggle example of Animated Number Flow.", "registryDependencies": [ "https://ui.ballmac.com/r/animated-number-flow.json" ], "files": [ { "path": "registry/examples/animated-number-flow-demo.tsx", "type": "registry:example", "target": "@components/ballmac/examples/animated-number-flow-demo.tsx" } ], "categories": [ "motion" ], "meta": { "example": true, "of": "animated-number-flow", "tier": "free" } }, { "name": "animated-number-flow-formats", "type": "registry:example", "title": "Animated Number Flow: Currency, percent, compact", "description": "Currency, percent, compact example of Animated Number Flow.", "registryDependencies": [ "https://ui.ballmac.com/r/animated-number-flow.json" ], "files": [ { "path": "registry/examples/animated-number-flow-formats.tsx", "type": "registry:example", "target": "@components/ballmac/examples/animated-number-flow-formats.tsx" } ], "categories": [ "motion" ], "meta": { "example": true, "of": "animated-number-flow", "tier": "free" } }, { "name": "animated-tabs", "type": "registry:ui", "title": "Animated Tabs", "description": "Radix Tabs with a pill or underline indicator that slides between triggers on a spring, and panels that fade in. Keeps full keyboard support and ARIA; controlled or uncontrolled.", "author": "Ballmac ", "dependencies": [ "motion@^12", "radix-ui" ], "registryDependencies": [ "utils", "https://ui.ballmac.com/r/motion-presets.json" ], "files": [ { "path": "registry/ballmac/components/animated-tabs.tsx", "type": "registry:ui", "target": "@components/ballmac/animated-tabs.tsx" } ], "categories": [ "navigation" ], "meta": { "schema": 1, "tier": "free", "tags": [ "tabs", "segmented", "navigation", "indicator", "layout animation", "radix" ], "version": "1.0.0", "updated": "2026-09-29", "ai": { "summary": "Same API as Radix Tabs: with AnimatedTabsList, AnimatedTabsTrigger value and AnimatedTabsContent value. The indicator is a Motion layoutId element inside the active trigger.", "whenToUse": [ "Switching between views of the same object (overview, activity, settings)", "Settings pages with a few sections", "Pricing toggles such as monthly and yearly" ], "whenNotToUse": [ "Page-level navigation between routes (use links)", "More than about six options (use a select)", "Package-manager command tabs (use install-tabs)" ], "composesWith": [ "install-tabs", "code-block" ], "a11y": [ { "keys": "Left / Right", "action": "Moves focus between tabs and selects them" }, { "keys": "Home / End", "action": "Jumps to the first or last tab" }, { "keys": "Tab", "action": "Moves from the tab list into the selected panel" } ], "customization": [ "variant: pill (default) | underline", "value / onValueChange for controlled use, defaultValue otherwise", "Icon-only triggers need aria-label", "Style parts via [data-slot=animated-tabs-indicator], -list, -trigger, -content", "Reduced motion: the indicator jumps and panels appear without a fade" ] }, "examples": [ "animated-tabs-demo", "animated-tabs-underline" ], "url": "https://ui.ballmac.com/components/animated-tabs" } }, { "name": "animated-tabs-demo", "type": "registry:example", "title": "Animated Tabs: Pill with icons", "description": "Pill with icons example of Animated Tabs.", "registryDependencies": [ "https://ui.ballmac.com/r/animated-tabs.json" ], "dependencies": [ "lucide-react" ], "files": [ { "path": "registry/examples/animated-tabs-demo.tsx", "type": "registry:example", "target": "@components/ballmac/examples/animated-tabs-demo.tsx" } ], "categories": [ "navigation" ], "meta": { "example": true, "of": "animated-tabs", "tier": "free" } }, { "name": "animated-tabs-underline", "type": "registry:example", "title": "Animated Tabs: Underline", "description": "Underline example of Animated Tabs.", "registryDependencies": [ "https://ui.ballmac.com/r/animated-tabs.json" ], "files": [ { "path": "registry/examples/animated-tabs-underline.tsx", "type": "registry:example", "target": "@components/ballmac/examples/animated-tabs-underline.tsx" } ], "categories": [ "navigation" ], "meta": { "example": true, "of": "animated-tabs", "tier": "free" } }, { "name": "api-endpoint", "type": "registry:ui", "title": "API Endpoint", "description": "An endpoint reference card: method and path with highlighted parameters, auth, grouped parameter lists, and request and response examples in tabs with copy.", "author": "Ballmac ", "dependencies": [ "lucide-react", "radix-ui" ], "registryDependencies": [ "utils", "https://ui.ballmac.com/r/copy-button.json", "https://ui.ballmac.com/r/highlight.json", "https://ui.ballmac.com/r/i18n.json" ], "files": [ { "path": "registry/ballmac/components/api-endpoint.tsx", "type": "registry:ui", "target": "@components/ballmac/api-endpoint.tsx" } ], "categories": [ "developer" ], "meta": { "schema": 1, "tier": "free", "tags": [ "api", "endpoint", "docs", "rest", "reference" ], "version": "1.0.0", "updated": "2026-10-01", "ai": { "summary": "method, path (use {id} for path parameters), summary, description, auth, parameters [{ name, in, type, required, description }], requestExample and responses [{ status, description, example }]. Collapsible; copies the full URL when baseUrl is set.", "whenToUse": [ "Hand-written API reference pages", "Internal docs for a small API" ], "whenNotToUse": [ "Generating a full OpenAPI portal (render from the spec with your own loop over this component)" ], "composesWith": [ "snippet-tabs", "code-block", "json-viewer" ], "a11y": [ { "keys": "Enter / Space", "action": "Opens or closes the card" }, { "keys": "ArrowLeft / ArrowRight", "action": "Moves between Request and response tabs" }, { "keys": "Screen readers", "action": "Parameters are grouped lists; each example is a labelled region; status tabs say Success or error class" } ], "customization": [ "defaultOpen / open", "baseUrl", "auth", "per-response language" ] }, "examples": [ "api-endpoint-demo", "api-endpoint-list" ], "url": "https://ui.ballmac.com/components/api-endpoint" } }, { "name": "api-endpoint-demo", "type": "registry:example", "title": "API Endpoint: Create a customer", "description": "Create a customer example of API Endpoint.", "registryDependencies": [ "https://ui.ballmac.com/r/api-endpoint.json" ], "files": [ { "path": "registry/examples/api-endpoint-demo.tsx", "type": "registry:example", "target": "@components/ballmac/examples/api-endpoint-demo.tsx" } ], "categories": [ "developer" ], "meta": { "example": true, "of": "api-endpoint", "tier": "free" } }, { "name": "api-endpoint-list", "type": "registry:example", "title": "API Endpoint: A stack of endpoints", "description": "A stack of endpoints example of API Endpoint.", "registryDependencies": [ "https://ui.ballmac.com/r/api-endpoint.json" ], "files": [ { "path": "registry/examples/api-endpoint-list.tsx", "type": "registry:example", "target": "@components/ballmac/examples/api-endpoint-list.tsx" } ], "categories": [ "developer" ], "meta": { "example": true, "of": "api-endpoint", "tier": "free" } }, { "name": "api-key-field", "type": "registry:ui", "title": "API Key Field", "description": "Displays a secret such as an API key, masked by default (sk-live-••••••••a1b2), with a reveal toggle, a copy button that copies the full key, and an optional regenerate action.", "author": "Ballmac ", "dependencies": [ "lucide-react" ], "registryDependencies": [ "utils", "https://ui.ballmac.com/r/i18n.json" ], "files": [ { "path": "registry/ballmac/components/api-key-field.tsx", "type": "registry:ui", "target": "@components/ballmac/api-key-field.tsx" } ], "categories": [ "developer" ], "meta": { "schema": 1, "tier": "free", "tags": [ "api-key", "secret", "token", "copy", "mask", "settings", "developer" ], "version": "1.0.1", "updated": "2026-09-29", "ai": { "summary": "Show an existing secret: . It is read-only; copy always copies the full value, even while masked.", "whenToUse": [ "API keys, webhook signing secrets and access tokens on settings or developer pages", "Showing a newly created key once so the user can copy it" ], "whenNotToUse": [ "Password entry (use an input with type=password)", "Secrets you should not send to the browser at all (show only the last four characters from the server)" ], "composesWith": [ "button", "dialog" ], "a11y": [ { "keys": "Tab", "action": "Moves between reveal, copy and regenerate buttons" }, { "keys": "Enter / Space", "action": "Reveal is a toggle button (aria-pressed); copy announces 'Key copied to clipboard'" }, { "keys": "—", "action": "While masked, screen readers hear the prefix and last characters, not bullet characters" } ], "customization": [ "visiblePrefix (default 8) and visibleSuffix (default 4) characters stay visible; the mask length is fixed so it doesn't reveal the key length", "revealed/defaultRevealed/onRevealedChange", "onRegenerate shows a regenerate button; confirmation is the caller's job (e.g. a dialog); regenerating spins it", "onCopy runs after a successful copy; the component never logs the value" ] }, "examples": [ "api-key-field-demo" ], "url": "https://ui.ballmac.com/components/api-key-field" } }, { "name": "api-key-field-demo", "type": "registry:example", "title": "API Key Field: Default", "description": "Default example of API Key Field.", "registryDependencies": [ "https://ui.ballmac.com/r/api-key-field.json" ], "files": [ { "path": "registry/examples/api-key-field-demo.tsx", "type": "registry:example", "target": "@components/ballmac/examples/api-key-field-demo.tsx" } ], "categories": [ "developer" ], "meta": { "example": true, "of": "api-key-field", "tier": "free" } }, { "name": "app-shell", "type": "registry:ui", "title": "App Shell", "description": "The frame of an application page: skip link, sticky header, sidebar that becomes a sheet on small screens, main area, optional aside and footer.", "author": "Ballmac ", "dependencies": [ "lucide-react" ], "registryDependencies": [ "utils", "https://ui.ballmac.com/r/sheet.json", "https://ui.ballmac.com/r/i18n.json" ], "files": [ { "path": "registry/ballmac/components/app-shell.tsx", "type": "registry:ui", "target": "@components/ballmac/app-shell.tsx" } ], "categories": [ "layout" ], "meta": { "schema": 1, "tier": "free", "tags": [ "layout", "dashboard", "sidebar", "landmarks" ], "version": "1.0.0", "updated": "2026-09-30", "ai": { "summary": "AppShell > AppShellSkipLink, AppShellHeader (with AppShellSidebarTrigger), AppShellSidebar, AppShellMain, AppShellAside, AppShellFooter. Sizes are CSS variables set by props.", "whenToUse": [ "Admin and dashboard pages", "Any page with a sidebar, a main column and optional details" ], "whenNotToUse": [ "A collapsible icon-rail sidebar; use sidebar", "Marketing pages; use navbar" ], "composesWith": [ "sidebar", "navbar", "sheet" ], "a11y": [ { "keys": "Tab", "action": "The first stop is the skip link; it jumps to the main content" }, { "keys": "Screen readers", "action": "Header, sidebar, main, aside and footer are landmarks" }, { "keys": "Escape", "action": "Closes the mobile sidebar" } ], "customization": [ "headerHeight, sidebarWidth, asideWidth", "sticky panels scroll on their own", "hide the aside by leaving it out" ] }, "examples": [ "app-shell-demo", "app-shell-states" ], "url": "https://ui.ballmac.com/components/app-shell" } }, { "name": "app-shell-demo", "type": "registry:example", "title": "App Shell: Dashboard frame", "description": "Dashboard frame example of App Shell.", "registryDependencies": [ "https://ui.ballmac.com/r/app-shell.json" ], "dependencies": [ "lucide-react" ], "files": [ { "path": "registry/examples/app-shell-demo.tsx", "type": "registry:example", "target": "@components/ballmac/examples/app-shell-demo.tsx" } ], "categories": [ "layout" ], "meta": { "example": true, "of": "app-shell", "tier": "free" } }, { "name": "app-shell-states", "type": "registry:example", "title": "App Shell: Compact shell", "description": "Compact shell example of App Shell.", "registryDependencies": [ "https://ui.ballmac.com/r/app-shell.json" ], "dependencies": [ "lucide-react" ], "files": [ { "path": "registry/examples/app-shell-states.tsx", "type": "registry:example", "target": "@components/ballmac/examples/app-shell-states.tsx" } ], "categories": [ "layout" ], "meta": { "example": true, "of": "app-shell", "tier": "free" } }, { "name": "approval-card", "type": "registry:ui", "title": "Approval Card", "description": "A human-in-the-loop confirmation for agent actions: what will happen, risk level in words, the exact command, Approve, Deny and Always allow, a timeout countdown and a recorded decision.", "author": "Ballmac ", "dependencies": [ "motion@^12", "lucide-react" ], "registryDependencies": [ "utils", "https://ui.ballmac.com/r/i18n.json" ], "files": [ { "path": "registry/ballmac/components/approval-card.tsx", "type": "registry:ui", "target": "@components/ballmac/approval-card.tsx" } ], "categories": [ "ai" ], "meta": { "schema": 1, "tier": "free", "tags": [ "ai", "agent", "approval", "confirm", "safety", "human-in-the-loop" ], "version": "1.0.0", "updated": "2026-09-30", "ai": { "summary": "title, description, risk (low | medium | high), details rows and a preview of the exact action. onApprove, onDeny, optional onAlwaysAllow. expiresIn counts down and denies. After a decision the card shows the outcome and moves focus to it.", "whenToUse": [ "Before an agent runs commands, writes files or sends data out", "Any action that needs a person's explicit yes" ], "whenNotToUse": [ "Confirming a destructive UI action; use alert-dialog", "Reporting what a tool already did; use tool-call-card" ], "composesWith": [ "agent-plan", "tool-call-card", "ai-message" ], "a11y": [ { "keys": "Tab", "action": "Approve, Deny, Always allow, and the scrollable preview" }, { "keys": "Screen readers", "action": "Risk is read as words; the decision is announced and focus moves to it" }, { "keys": "Color", "action": "Risk uses an icon and label as well as a colored edge" } ], "customization": [ "risk", "details", "preview", "expiresIn and onExpire", "status (controlled)", "button labels" ] }, "examples": [ "approval-card-demo", "approval-card-risks" ], "url": "https://ui.ballmac.com/components/approval-card" } }, { "name": "approval-card-demo", "type": "registry:example", "title": "Approval Card: Shell command", "description": "Shell command example of Approval Card.", "registryDependencies": [ "https://ui.ballmac.com/r/approval-card.json" ], "files": [ { "path": "registry/examples/approval-card-demo.tsx", "type": "registry:example", "target": "@components/ballmac/examples/approval-card-demo.tsx" } ], "categories": [ "ai" ], "meta": { "example": true, "of": "approval-card", "tier": "free" } }, { "name": "approval-card-risks", "type": "registry:example", "title": "Approval Card: Three risk levels", "description": "Three risk levels example of Approval Card.", "registryDependencies": [ "https://ui.ballmac.com/r/approval-card.json" ], "files": [ { "path": "registry/examples/approval-card-risks.tsx", "type": "registry:example", "target": "@components/ballmac/examples/approval-card-risks.tsx" } ], "categories": [ "ai" ], "meta": { "example": true, "of": "approval-card", "tier": "free" } }, { "name": "artifact-panel", "type": "registry:ui", "title": "Artifact Panel", "description": "A side panel for things an assistant generates: Preview and Code tabs, version stepping, copy and download, a streaming state and a close button, with the rendered result in your own slot.", "author": "Ballmac ", "dependencies": [ "motion@^12", "lucide-react", "radix-ui" ], "registryDependencies": [ "utils", "https://ui.ballmac.com/r/i18n.json" ], "files": [ { "path": "registry/ballmac/components/artifact-panel.tsx", "type": "registry:ui", "target": "@components/ballmac/artifact-panel.tsx" } ], "categories": [ "ai" ], "meta": { "schema": 1, "tier": "free", "tags": [ "ai", "artifact", "canvas", "preview", "code", "panel" ], "version": "1.0.0", "updated": "2026-09-30", "ai": { "summary": "title, kind, icon, code, filename, language and children as the preview. versions > 1 adds steppers (version/onVersionChange). streaming shows a progress edge and disables copy and download. onClose adds a close button.", "whenToUse": [ "Code, documents or designs a model produced next to the chat", "Anything users iterate on in versions" ], "whenNotToUse": [ "Showing code in the chat; use code-block", "Generic tabs; use tabs" ], "composesWith": [ "ai-chat", "code-block", "resizable" ], "a11y": [ { "keys": "ArrowLeft / ArrowRight", "action": "Switches between Preview and Code when the tabs have focus" }, { "keys": "Tab", "action": "Reaches version arrows, copy, download, close, and the scrollable content" }, { "keys": "Screen readers", "action": "Region named by the title; version changes are announced politely" } ], "customization": [ "defaultTab", "streaming", "actions slot", "previewClassName", "filename and language" ] }, "examples": [ "artifact-panel-demo", "artifact-panel-streaming" ], "url": "https://ui.ballmac.com/components/artifact-panel" } }, { "name": "artifact-panel-demo", "type": "registry:example", "title": "Artifact Panel: Component with code", "description": "Component with code example of Artifact Panel.", "registryDependencies": [ "https://ui.ballmac.com/r/artifact-panel.json" ], "dependencies": [ "lucide-react" ], "files": [ { "path": "registry/examples/artifact-panel-demo.tsx", "type": "registry:example", "target": "@components/ballmac/examples/artifact-panel-demo.tsx" } ], "categories": [ "ai" ], "meta": { "example": true, "of": "artifact-panel", "tier": "free" } }, { "name": "artifact-panel-streaming", "type": "registry:example", "title": "Artifact Panel: Writing and versions", "description": "Writing and versions example of Artifact Panel.", "registryDependencies": [ "https://ui.ballmac.com/r/artifact-panel.json" ], "dependencies": [ "lucide-react" ], "files": [ { "path": "registry/examples/artifact-panel-streaming.tsx", "type": "registry:example", "target": "@components/ballmac/examples/artifact-panel-streaming.tsx" } ], "categories": [ "ai" ], "meta": { "example": true, "of": "artifact-panel", "tier": "free" } }, { "name": "aspect-ratio", "type": "registry:ui", "title": "Aspect Ratio", "description": "A CSS-native ratio frame that reserves space for media and safely handles invalid ratio values.", "author": "Ballmac ", "registryDependencies": [ "utils" ], "files": [ { "path": "registry/ballmac/components/aspect-ratio.tsx", "type": "registry:ui", "target": "@components/ballmac/aspect-ratio.tsx" } ], "categories": [ "layout" ], "meta": { "schema": 1, "tier": "free", "tags": [ "media", "image", "layout" ], "version": "1.0.0", "updated": "2026-09-29", "ai": { "summary": "A CSS-native ratio frame that reserves space for media and safely handles invalid ratio values.", "whenToUse": [ "Reserve image or video space before it loads", "Keep cards aligned across a grid" ], "whenNotToUse": [ "Use fixed height when cropping is intentional" ], "composesWith": [ "card" ], "a11y": [], "customization": [ "ratio: width divided by height; default 16/9" ] }, "source": { "name": "shadcn/ui Aspect Ratio", "url": "https://github.com/shadcn-ui/ui", "license": "MIT", "copyright": "Copyright (c) 2023 shadcn", "modified": true }, "examples": [ "aspect-ratio-demo", "aspect-ratio-states" ], "url": "https://ui.ballmac.com/components/aspect-ratio" } }, { "name": "aspect-ratio-demo", "type": "registry:example", "title": "Aspect Ratio: Overview", "description": "Overview example of Aspect Ratio.", "registryDependencies": [ "https://ui.ballmac.com/r/aspect-ratio.json" ], "files": [ { "path": "registry/examples/aspect-ratio-demo.tsx", "type": "registry:example", "target": "@components/ballmac/examples/aspect-ratio-demo.tsx" } ], "categories": [ "layout" ], "meta": { "example": true, "of": "aspect-ratio", "tier": "free" } }, { "name": "aspect-ratio-states", "type": "registry:example", "title": "Aspect Ratio: States and variants", "description": "States and variants example of Aspect Ratio.", "registryDependencies": [ "https://ui.ballmac.com/r/aspect-ratio.json" ], "files": [ { "path": "registry/examples/aspect-ratio-states.tsx", "type": "registry:example", "target": "@components/ballmac/examples/aspect-ratio-states.tsx" } ], "categories": [ "layout" ], "meta": { "example": true, "of": "aspect-ratio", "tier": "free" } }, { "name": "audio-player", "type": "registry:ui", "title": "Audio Player", "description": "A podcast-style audio player: play and pause, skip back and forward, a scrubber with chapter ticks, a named current chapter and a speed control. Works with a real file or as a silent demo.", "author": "Ballmac ", "dependencies": [ "lucide-react" ], "registryDependencies": [ "utils", "https://ui.ballmac.com/r/slider.json", "https://ui.ballmac.com/r/i18n.json" ], "files": [ { "path": "registry/ballmac/components/audio-player.tsx", "type": "registry:ui", "target": "@components/ballmac/audio-player.tsx" } ], "categories": [ "data-display" ], "meta": { "schema": 1, "tier": "free", "tags": [ "audio", "player", "podcast", "music", "media", "chapters", "speed" ], "version": "1.0.0", "updated": "2026-10-01", "ai": { "summary": "Pass src (omit it for a silent demo), title, duration and optional chapters=[{ start, title }]. Control the position with time and onTimeChange to sync a transcript. variant='compact' is a one-row mini player.", "whenToUse": [ "Podcast episodes, audio articles, voice notes and music previews", "Syncing a transcript or chapter list to playback" ], "whenNotToUse": [ "Video (use the native video element or video-dialog)" ], "composesWith": [ "slider", "segmented-control", "scroll-area" ], "a11y": [ { "keys": "Space / Enter on Play", "action": "Plays or pauses; the name switches between Play and Pause" }, { "keys": "Arrow keys on the scrubber", "action": "Seeks one second; Page Up / Down seeks more; the value reads as 'm:ss of m:ss'" }, { "keys": "Skip buttons", "action": "Jump back or forward by the configured seconds" } ], "customization": [ "rates: the speeds the speed button cycles through", "skip: { back, forward } seconds", "artwork: any node", "variant: default or compact" ] }, "examples": [ "audio-player-demo", "audio-player-compact" ], "url": "https://ui.ballmac.com/components/audio-player" } }, { "name": "audio-player-demo", "type": "registry:example", "title": "Audio Player: Episode with chapters", "description": "Episode with chapters example of Audio Player.", "registryDependencies": [ "https://ui.ballmac.com/r/audio-player.json" ], "files": [ { "path": "registry/examples/audio-player-demo.tsx", "type": "registry:example", "target": "@components/ballmac/examples/audio-player-demo.tsx" } ], "categories": [ "data-display" ], "meta": { "example": true, "of": "audio-player", "tier": "free" } }, { "name": "audio-player-compact", "type": "registry:example", "title": "Audio Player: Compact mini player", "description": "Compact mini player example of Audio Player.", "registryDependencies": [ "https://ui.ballmac.com/r/audio-player.json" ], "files": [ { "path": "registry/examples/audio-player-compact.tsx", "type": "registry:example", "target": "@components/ballmac/examples/audio-player-compact.tsx" } ], "categories": [ "data-display" ], "meta": { "example": true, "of": "audio-player", "tier": "free" } }, { "name": "aurora-background", "type": "registry:ui", "title": "Aurora Background", "description": "Soft, slowly drifting aurora light made of blurred token-colored glows with fine vertical curtains and an optional radial fade. Pure CSS layers, paused off-screen, still under reduced motion.", "author": "Ballmac ", "registryDependencies": [ "utils" ], "files": [ { "path": "registry/ballmac/components/aurora-background.tsx", "type": "registry:ui", "target": "@components/ballmac/aurora-background.tsx" } ], "categories": [ "backgrounds" ], "meta": { "schema": 1, "tier": "free", "tags": [ "aurora", "gradient", "glow", "background", "hero", "decorative" ], "version": "1.0.0", "updated": "2026-09-29", "ai": { "summary": "Place as the first child of a relative, overflow-hidden hero; it is absolute inset-0, aria-hidden and pointer-events-none. The light sits along the top edge and fades down, so headline text reads on the page background.", "whenToUse": [ "Behind a hero headline or a launch announcement", "Sign-in or waitlist pages that need atmosphere without imagery" ], "whenNotToUse": [ "Behind dense content or data", "Several stacked sections (use once per page, at the top)" ], "composesWith": [ "text-reveal", "shimmer-text", "magnetic-button" ], "a11y": [], "customization": [ "colors: array of CSS colors, default chart-1, chart-2, chart-4, chart-1", "duration (s, default 22), intensity (0–1, default 0.75), blur (px, default 64)", "curtains toggles the vertical ray texture; radialMask toggles the elliptical fade" ] }, "examples": [ "aurora-background-demo", "aurora-background-warm" ], "url": "https://ui.ballmac.com/components/aurora-background" } }, { "name": "aurora-background-demo", "type": "registry:example", "title": "Aurora Background: Hero", "description": "Hero example of Aurora Background.", "registryDependencies": [ "https://ui.ballmac.com/r/aurora-background.json" ], "dependencies": [ "lucide-react" ], "files": [ { "path": "registry/examples/aurora-background-demo.tsx", "type": "registry:example", "target": "@components/ballmac/examples/aurora-background-demo.tsx" } ], "categories": [ "backgrounds" ], "meta": { "example": true, "of": "aurora-background", "tier": "free" } }, { "name": "aurora-background-warm", "type": "registry:example", "title": "Aurora Background: Warm, no curtains", "description": "Warm, no curtains example of Aurora Background.", "registryDependencies": [ "https://ui.ballmac.com/r/aurora-background.json" ], "files": [ { "path": "registry/examples/aurora-background-warm.tsx", "type": "registry:example", "target": "@components/ballmac/examples/aurora-background-warm.tsx" } ], "categories": [ "backgrounds" ], "meta": { "example": true, "of": "aurora-background", "tier": "free" } }, { "name": "avatar-circles", "type": "registry:ui", "title": "Avatar Circles", "description": "Overlapping avatars that spread on hover, lift individually with a name and role tooltip, show presence, fall back to initials and end in a +N count that can be a button.", "author": "Ballmac ", "dependencies": [ "motion@^12" ], "registryDependencies": [ "utils", "https://ui.ballmac.com/r/i18n.json" ], "files": [ { "path": "registry/ballmac/components/avatar-circles.tsx", "type": "registry:ui", "target": "@components/ballmac/avatar-circles.tsx" } ], "categories": [ "data-display" ], "meta": { "schema": 1, "tier": "free", "tags": [ "avatar", "people", "stack", "presence", "team" ], "version": "1.0.0", "updated": "2026-10-01", "ai": { "summary": ". Each face is a link or button named with its person (and status). total adds the +N when only some are loaded.", "whenToUse": [ "Showing who is in a project, document or room", "Social proof next to a call to action" ], "whenNotToUse": [ "A plain compact row (avatar-stack)", "Large member tables (data-table)" ], "composesWith": [ "avatar-stack", "avatar", "tooltip" ], "a11y": [ { "keys": "Tab", "action": "Each person is focusable and shows the tooltip on focus" }, { "keys": "Screen readers", "action": "Named 'Ada Lovelace, online'; the group announces the people count" }, { "keys": "Reduced motion", "action": "No lift; the spread still happens with a plain transition" } ], "customization": [ "max and total", "size: sm | default | lg", "status", "href", "onOverflowClick" ] }, "examples": [ "avatar-circles-demo", "avatar-circles-sizes" ], "url": "https://ui.ballmac.com/components/avatar-circles" } }, { "name": "avatar-circles-demo", "type": "registry:example", "title": "Avatar Circles: Team with presence", "description": "Team with presence example of Avatar Circles.", "registryDependencies": [ "https://ui.ballmac.com/r/avatar-circles.json" ], "files": [ { "path": "registry/examples/avatar-circles-demo.tsx", "type": "registry:example", "target": "@components/ballmac/examples/avatar-circles-demo.tsx" } ], "categories": [ "data-display" ], "meta": { "example": true, "of": "avatar-circles", "tier": "free" } }, { "name": "avatar-circles-sizes", "type": "registry:example", "title": "Avatar Circles: Sizes and overflow button", "description": "Sizes and overflow button example of Avatar Circles.", "registryDependencies": [ "https://ui.ballmac.com/r/avatar-circles.json" ], "files": [ { "path": "registry/examples/avatar-circles-sizes.tsx", "type": "registry:example", "target": "@components/ballmac/examples/avatar-circles-sizes.tsx" } ], "categories": [ "data-display" ], "meta": { "example": true, "of": "avatar-circles", "tier": "free" } }, { "name": "avatar-stack", "type": "registry:ui", "title": "Avatar Stack", "description": "An accessible compact row of people with initials, image support, and an overflow count.", "author": "Ballmac ", "registryDependencies": [ "utils" ], "files": [ { "path": "registry/ballmac/components/avatar-stack.tsx", "type": "registry:ui", "target": "@components/ballmac/avatar-stack.tsx" } ], "categories": [ "data-display" ], "meta": { "schema": 1, "tier": "free", "tags": [ "people", "avatar", "team" ], "version": "1.0.0", "updated": "2026-09-30", "ai": { "summary": "An accessible compact row of people with initials, image support, and an overflow count.", "whenToUse": [ "Show participants or collaborators in limited space" ], "whenNotToUse": [ "Use Avatar for one person" ], "composesWith": [ "avatar" ], "a11y": [ { "keys": "None", "action": "Static content is announced with semantic structure" } ], "customization": [ "Content, layout, and token-based className styling" ] }, "examples": [ "avatar-stack-demo", "avatar-stack-states" ], "url": "https://ui.ballmac.com/components/avatar-stack" } }, { "name": "avatar-stack-demo", "type": "registry:example", "title": "Avatar Stack: Overview", "description": "Overview example of Avatar Stack.", "registryDependencies": [ "https://ui.ballmac.com/r/avatar-stack.json" ], "files": [ { "path": "registry/examples/avatar-stack-demo.tsx", "type": "registry:example", "target": "@components/ballmac/examples/avatar-stack-demo.tsx" } ], "categories": [ "data-display" ], "meta": { "example": true, "of": "avatar-stack", "tier": "free" } }, { "name": "avatar-stack-states", "type": "registry:example", "title": "Avatar Stack: States and variants", "description": "States and variants example of Avatar Stack.", "registryDependencies": [ "https://ui.ballmac.com/r/avatar-stack.json" ], "files": [ { "path": "registry/examples/avatar-stack-states.tsx", "type": "registry:example", "target": "@components/ballmac/examples/avatar-stack-states.tsx" } ], "categories": [ "data-display" ], "meta": { "example": true, "of": "avatar-stack", "tier": "free" } }, { "name": "avatar", "type": "registry:ui", "title": "Avatar", "description": "A Radix avatar with image and initials fallback, three sizes, an optional presence dot, and AvatarGroup for overlapping stacks with a +N overflow counter.", "author": "Ballmac ", "dependencies": [ "radix-ui", "class-variance-authority" ], "registryDependencies": [ "utils", "https://ui.ballmac.com/r/i18n.json" ], "files": [ { "path": "registry/ballmac/components/avatar.tsx", "type": "registry:ui", "target": "@components/ballmac/avatar.tsx" } ], "categories": [ "primitives" ], "meta": { "schema": 1, "tier": "free", "tags": [ "avatar", "user", "profile", "presence", "radix" ], "version": "1.0.0", "updated": "2026-09-28", "ai": { "summary": "User or team picture with initials fallback while the image loads or if it fails. Add status for presence, and wrap several in AvatarGroup with max to cap the visible count.", "whenToUse": [ "Showing who owns, edited or is assigned to something", "Account menus and comment threads", "Stacks of collaborators or members with an overflow count" ], "whenNotToUse": [ "Logos or product icons (use an img)", "Large profile headers that need a custom shape" ], "composesWith": [ "badge", "tooltip", "dialog" ], "a11y": [], "customization": [ "size: sm | default | lg (24 / 32 / 44 px)", "status: online | away | busy | offline, announced as screen reader text (statusLabel to override)", "AvatarGroup: size, max, total (when more members exist than you render)", "Always include an AvatarFallback with initials; the image alt names the person" ] }, "source": { "name": "shadcn/ui Avatar", "url": "https://github.com/shadcn-ui/ui", "license": "MIT", "copyright": "Copyright (c) 2023 shadcn", "modified": true }, "examples": [ "avatar-demo", "avatar-group" ], "url": "https://ui.ballmac.com/components/avatar" } }, { "name": "avatar-demo", "type": "registry:example", "title": "Avatar: Default", "description": "Default example of Avatar.", "registryDependencies": [ "https://ui.ballmac.com/r/avatar.json" ], "files": [ { "path": "registry/examples/avatar-demo.tsx", "type": "registry:example", "target": "@components/ballmac/examples/avatar-demo.tsx" } ], "categories": [ "primitives" ], "meta": { "example": true, "of": "avatar", "tier": "free" } }, { "name": "avatar-group", "type": "registry:example", "title": "Avatar: Group", "description": "Group example of Avatar.", "registryDependencies": [ "https://ui.ballmac.com/r/avatar.json" ], "files": [ { "path": "registry/examples/avatar-group.tsx", "type": "registry:example", "target": "@components/ballmac/examples/avatar-group.tsx" } ], "categories": [ "primitives" ], "meta": { "example": true, "of": "avatar", "tier": "free" } }, { "name": "back-to-top", "type": "registry:ui", "title": "Back To Top", "description": "A floating button that appears after scrolling, draws a progress ring, scrolls smoothly (instantly under reduced motion) and moves focus to the content.", "author": "Ballmac ", "dependencies": [ "lucide-react", "motion@^12" ], "registryDependencies": [ "utils", "https://ui.ballmac.com/r/scroll.json", "https://ui.ballmac.com/r/motion-presets.json", "https://ui.ballmac.com/r/i18n.json" ], "files": [ { "path": "registry/ballmac/components/back-to-top.tsx", "type": "registry:ui", "target": "@components/ballmac/back-to-top.tsx" } ], "categories": [ "navigation" ], "meta": { "schema": 1, "tier": "free", "tags": [ "button", "scroll", "floating", "progress" ], "version": "1.0.0", "updated": "2026-09-30", "ai": { "summary": "Render once. threshold sets when it appears; container follows a scrollable element; focusTarget chooses where focus lands.", "whenToUse": [ "Long pages, feeds and docs", "Panels with a lot of scrolling" ], "whenNotToUse": [ "Short pages", "Infinite feeds where returning to the top loses work" ], "composesWith": [ "scroll-progress", "button" ], "a11y": [ { "keys": "Enter / Space", "action": "Scrolls to the top and moves focus to the main content so focus is not lost when the button disappears" }, { "keys": "Reduced motion", "action": "Jumps instead of scrolling smoothly" } ], "customization": [ "threshold", "showProgress", "showLabel", "container and focusTarget" ] }, "examples": [ "back-to-top-demo", "back-to-top-states" ], "url": "https://ui.ballmac.com/components/back-to-top" } }, { "name": "back-to-top-demo", "type": "registry:example", "title": "Back To Top: Progress ring", "description": "Progress ring example of Back To Top.", "registryDependencies": [ "https://ui.ballmac.com/r/back-to-top.json" ], "files": [ { "path": "registry/examples/back-to-top-demo.tsx", "type": "registry:example", "target": "@components/ballmac/examples/back-to-top-demo.tsx" } ], "categories": [ "navigation" ], "meta": { "example": true, "of": "back-to-top", "tier": "free" } }, { "name": "back-to-top-states", "type": "registry:example", "title": "Back To Top: Labelled", "description": "Labelled example of Back To Top.", "registryDependencies": [ "https://ui.ballmac.com/r/back-to-top.json" ], "files": [ { "path": "registry/examples/back-to-top-states.tsx", "type": "registry:example", "target": "@components/ballmac/examples/back-to-top-states.tsx" } ], "categories": [ "navigation" ], "meta": { "example": true, "of": "back-to-top", "tier": "free" } }, { "name": "badge", "type": "registry:ui", "title": "Badge", "description": "A small pill label in four variants with an optional status dot and success, warning and error tones. Style links with badgeVariants().", "author": "Ballmac ", "dependencies": [ "radix-ui", "class-variance-authority" ], "registryDependencies": [ "utils" ], "files": [ { "path": "registry/ballmac/components/badge.tsx", "type": "registry:ui", "target": "@components/ballmac/badge.tsx" } ], "categories": [ "primitives" ], "meta": { "schema": 1, "tier": "free", "tags": [ "badge", "status", "tag", "label", "pill" ], "version": "1.0.0", "updated": "2026-09-28", "ai": { "summary": "Short metadata or status label. Use variant for emphasis, status (neutral | success | warning | error) for state with a coloured dot, and badgeVariants() on an for a link.", "whenToUse": [ "Status of a deployment, invoice or job", "Counts, plan names and version tags", "Small labels on cards and table rows" ], "whenNotToUse": [ "Clickable filters that toggle (use a toggle or button)", "Long text (it doesn't wrap)", "Notifications that need attention (use an alert or toast)" ], "composesWith": [ "avatar", "button", "switch" ], "a11y": [], "customization": [ "variant: default | secondary | outline | destructive", "status: neutral | success (chart-2) | warning (chart-3) | error (destructive); overrides variant colours with a soft tint", "dot: shows a leading dot; on by default when status is set", "badgeVariants({ variant }) gives the same styles to an or button" ] }, "source": { "name": "shadcn/ui Badge", "url": "https://github.com/shadcn-ui/ui", "license": "MIT", "copyright": "Copyright (c) 2023 shadcn", "modified": true }, "examples": [ "badge-demo", "badge-status" ], "url": "https://ui.ballmac.com/components/badge" } }, { "name": "badge-demo", "type": "registry:example", "title": "Badge: Default", "description": "Default example of Badge.", "registryDependencies": [ "https://ui.ballmac.com/r/badge.json" ], "dependencies": [ "lucide-react" ], "files": [ { "path": "registry/examples/badge-demo.tsx", "type": "registry:example", "target": "@components/ballmac/examples/badge-demo.tsx" } ], "categories": [ "primitives" ], "meta": { "example": true, "of": "badge", "tier": "free" } }, { "name": "badge-status", "type": "registry:example", "title": "Badge: Status", "description": "Status example of Badge.", "registryDependencies": [ "https://ui.ballmac.com/r/badge.json" ], "files": [ { "path": "registry/examples/badge-status.tsx", "type": "registry:example", "target": "@components/ballmac/examples/badge-status.tsx" } ], "categories": [ "primitives" ], "meta": { "example": true, "of": "badge", "tier": "free" } }, { "name": "banner", "type": "registry:ui", "title": "Banner", "description": "A page-wide announcement with semantic tones, optional action, and controlled or local dismissal.", "author": "Ballmac ", "dependencies": [ "lucide-react" ], "registryDependencies": [ "utils", "https://ui.ballmac.com/r/i18n.json" ], "files": [ { "path": "registry/ballmac/components/banner.tsx", "type": "registry:ui", "target": "@components/ballmac/banner.tsx" } ], "categories": [ "feedback" ], "meta": { "schema": 1, "tier": "free", "tags": [ "announcement", "status", "dismissible" ], "version": "1.0.0", "updated": "2026-09-30", "ai": { "summary": "A page-wide announcement with semantic tones, optional action, and controlled or local dismissal.", "whenToUse": [ "Announce a page-level update", "Keep a persistent notice above page content" ], "whenNotToUse": [ "Use alert for content scoped to one panel" ], "composesWith": [ "alert", "button" ], "a11y": [ { "keys": "Tab / Enter", "action": "Focus and activate the action or dismiss control" } ], "customization": [ "tone: info | success | warning", "Controlled or uncontrolled visibility" ] }, "examples": [ "banner-demo", "banner-states" ], "url": "https://ui.ballmac.com/components/banner" } }, { "name": "banner-demo", "type": "registry:example", "title": "Banner: Overview", "description": "Overview example of Banner.", "registryDependencies": [ "https://ui.ballmac.com/r/banner.json" ], "files": [ { "path": "registry/examples/banner-demo.tsx", "type": "registry:example", "target": "@components/ballmac/examples/banner-demo.tsx" } ], "categories": [ "feedback" ], "meta": { "example": true, "of": "banner", "tier": "free" } }, { "name": "banner-states", "type": "registry:example", "title": "Banner: States and variants", "description": "States and variants example of Banner.", "registryDependencies": [ "https://ui.ballmac.com/r/banner.json" ], "files": [ { "path": "registry/examples/banner-states.tsx", "type": "registry:example", "target": "@components/ballmac/examples/banner-states.tsx" } ], "categories": [ "feedback" ], "meta": { "example": true, "of": "banner", "tier": "free" } }, { "name": "beams-background", "type": "registry:ui", "title": "Beams Background", "description": "Hairline rails with thin light beams rising along them and dissolving near the top, over a soft glow. Canvas, token colors, DPR aware, pauses off-screen, a still frame under reduced motion.", "author": "Ballmac ", "registryDependencies": [ "utils", "https://ui.ballmac.com/r/color.json" ], "files": [ { "path": "registry/ballmac/components/beams-background.tsx", "type": "registry:ui", "target": "@components/ballmac/beams-background.tsx" } ], "categories": [ "backgrounds" ], "meta": { "schema": 1, "tier": "free", "tags": [ "beams", "light", "rails", "canvas", "background", "hero", "waitlist" ], "version": "1.0.0", "updated": "2026-09-29", "ai": { "summary": "Place as the first child of a relative, overflow-hidden section; it fills it (absolute inset-0, aria-hidden, pointer-events-none). Content goes after it; the rails fade out at the top and bottom edges.", "whenToUse": [ "Waitlist, sign-up or launch sections with centered content", "Hero backgrounds for developer tools, infrastructure or AI products" ], "whenNotToUse": [ "Behind long text or tables", "Pages that already have another animated background" ], "composesWith": [ "input", "button", "shimmer-text", "text-reveal" ], "a11y": [], "customization": [ "gap: rail spacing in px (default 36); density: beams per 1000 px of width (default 30)", "colors: CSS variable names or colors, default --chart-1, --chart-2, --chart-4", "direction: up | down; speed multiplier (default 1); railOpacity (default 0.07)", "glow toggles the soft light (in the first color) at the edge the beams come from" ] }, "examples": [ "beams-background-demo", "beams-background-falling" ], "url": "https://ui.ballmac.com/components/beams-background" } }, { "name": "beams-background-demo", "type": "registry:example", "title": "Beams Background: Waitlist", "description": "Waitlist example of Beams Background.", "registryDependencies": [ "https://ui.ballmac.com/r/beams-background.json", "https://ui.ballmac.com/r/button.json", "https://ui.ballmac.com/r/input.json" ], "files": [ { "path": "registry/examples/beams-background-demo.tsx", "type": "registry:example", "target": "@components/ballmac/examples/beams-background-demo.tsx" } ], "categories": [ "backgrounds" ], "meta": { "example": true, "of": "beams-background", "tier": "free" } }, { "name": "beams-background-falling", "type": "registry:example", "title": "Beams Background: Falling, single color", "description": "Falling, single color example of Beams Background.", "registryDependencies": [ "https://ui.ballmac.com/r/beams-background.json" ], "files": [ { "path": "registry/examples/beams-background-falling.tsx", "type": "registry:example", "target": "@components/ballmac/examples/beams-background-falling.tsx" } ], "categories": [ "backgrounds" ], "meta": { "example": true, "of": "beams-background", "tier": "free" } }, { "name": "bento-grid", "type": "registry:ui", "title": "Bento Grid", "description": "A responsive bento layout of feature cards that span columns and rows. Each BentoCard has a background visual slot, icon, title and description, and a link that slides up on hover or focus.", "author": "Ballmac ", "dependencies": [ "lucide-react" ], "registryDependencies": [ "utils", "https://ui.ballmac.com/r/media.json" ], "files": [ { "path": "registry/ballmac/components/bento-grid.tsx", "type": "registry:ui", "target": "@components/ballmac/bento-grid.tsx" } ], "categories": [ "layout" ], "meta": { "schema": 1, "tier": "free", "tags": [ "bento", "grid", "features", "landing", "cards", "layout" ], "version": "1.0.0", "updated": "2026-09-29", "ai": { "summary": " with . The grid responds to its own width (container queries): one column below 36rem. The background slot takes any decorative node, such as animated-grid, marquee or number-ticker visuals.", "whenToUse": [ "Landing-page feature sections with 4–7 features of different weight", "Product overviews where each tile shows a small live visual", "Dashboard home pages with shortcuts" ], "whenNotToUse": [ "Uniform lists of equal items (use a plain grid of cards)", "Long text content; cards hold one or two lines" ], "composesWith": [ "animated-grid", "marquee", "number-ticker", "border-beam" ], "a11y": [ { "keys": "Tab", "action": "Focuses the card's link; the whole card is its click target and shows a focus ring" } ], "customization": [ "BentoGrid: columns 2 | 3 | 4 (default 3), rowHeight (default 13rem)", "BentoCard: colSpan 1–4, rowSpan 1–2, href + cta (default \"Learn more\")", "background is aria-hidden and masked to fade toward the text", "On touch screens the link is always visible" ] }, "examples": [ "bento-grid-demo", "bento-grid-features" ], "url": "https://ui.ballmac.com/components/bento-grid" } }, { "name": "bento-grid-demo", "type": "registry:example", "title": "Bento Grid: Live feature grid", "description": "Live feature grid example of Bento Grid.", "registryDependencies": [ "https://ui.ballmac.com/r/bento-grid.json", "https://ui.ballmac.com/r/animated-grid.json", "https://ui.ballmac.com/r/border-beam.json", "https://ui.ballmac.com/r/marquee.json", "https://ui.ballmac.com/r/number-ticker.json" ], "dependencies": [ "lucide-react" ], "files": [ { "path": "registry/examples/bento-grid-demo.tsx", "type": "registry:example", "target": "@components/ballmac/examples/bento-grid-demo.tsx" } ], "categories": [ "layout" ], "meta": { "example": true, "of": "bento-grid", "tier": "free" } }, { "name": "bento-grid-features", "type": "registry:example", "title": "Bento Grid: Two columns", "description": "Two columns example of Bento Grid.", "registryDependencies": [ "https://ui.ballmac.com/r/bento-grid.json" ], "dependencies": [ "lucide-react" ], "files": [ { "path": "registry/examples/bento-grid-features.tsx", "type": "registry:example", "target": "@components/ballmac/examples/bento-grid-features.tsx" } ], "categories": [ "layout" ], "meta": { "example": true, "of": "bento-grid", "tier": "free" } }, { "name": "billing-card", "type": "registry:ui", "title": "Billing Card", "description": "A subscription summary with plan and price, status, next charge, payment method, seat usage and recent invoices, including failed-payment and trial states.", "author": "Ballmac ", "dependencies": [ "lucide-react" ], "registryDependencies": [ "utils", "https://ui.ballmac.com/r/i18n.json" ], "files": [ { "path": "registry/ballmac/components/billing-card.tsx", "type": "registry:ui", "target": "@components/ballmac/billing-card.tsx" } ], "categories": [ "saas" ], "meta": { "schema": 1, "tier": "free", "tags": [ "billing", "subscription", "invoices", "plan" ], "version": "1.0.0", "updated": "2026-09-30", "ai": { "summary": "plan {name,price,interval,status,renewsOn,seats}, paymentMethod, invoices[], and onChangePlan / onUpdatePayment / onCancel. Dates are ISO strings formatted in UTC.", "whenToUse": [ "Account billing pages", "Showing subscription state in settings" ], "whenNotToUse": [ "Choosing a plan; use plan-selector", "A line-item invoice table; use table" ], "composesWith": [ "usage-meter", "plan-selector", "settings-panel" ], "a11y": [ { "keys": "Screen readers", "action": "Details are a description list; a failed payment is announced as an alert" }, { "keys": "Tab", "action": "Change plan, Update, Cancel and invoice downloads are real buttons and links" } ], "customization": [ "currency and locale", "status: active | trialing | past_due | canceled", "seats", "invoices" ] }, "examples": [ "billing-card-demo", "billing-card-states" ], "url": "https://ui.ballmac.com/components/billing-card" } }, { "name": "billing-card-demo", "type": "registry:example", "title": "Billing Card: Team plan", "description": "Team plan example of Billing Card.", "registryDependencies": [ "https://ui.ballmac.com/r/billing-card.json" ], "files": [ { "path": "registry/examples/billing-card-demo.tsx", "type": "registry:example", "target": "@components/ballmac/examples/billing-card-demo.tsx" } ], "categories": [ "saas" ], "meta": { "example": true, "of": "billing-card", "tier": "free" } }, { "name": "billing-card-states", "type": "registry:example", "title": "Billing Card: Payment failed and trial", "description": "Payment failed and trial example of Billing Card.", "registryDependencies": [ "https://ui.ballmac.com/r/billing-card.json" ], "files": [ { "path": "registry/examples/billing-card-states.tsx", "type": "registry:example", "target": "@components/ballmac/examples/billing-card-states.tsx" } ], "categories": [ "saas" ], "meta": { "example": true, "of": "billing-card", "tier": "free" } }, { "name": "ai-chat-1", "type": "registry:block", "title": "AI Chat 1: full chat app pane", "description": "A complete assistant screen: collapsible conversation sidebar, model picker, messages with reasoning and tool calls, streaming replies, copy and regenerate, and a prompt with attachments.", "author": "Ballmac ", "dependencies": [ "lucide-react" ], "registryDependencies": [ "utils", "https://ui.ballmac.com/r/ai-chat.json", "https://ui.ballmac.com/r/ai-message.json", "https://ui.ballmac.com/r/button.json", "https://ui.ballmac.com/r/prompt-input.json", "https://ui.ballmac.com/r/reasoning-disclosure.json", "https://ui.ballmac.com/r/select.json", "https://ui.ballmac.com/r/streaming-text.json", "https://ui.ballmac.com/r/tool-call-card.json" ], "files": [ { "path": "registry/ballmac/components/blocks/ai-chat-1/ai-chat-1.tsx", "type": "registry:component", "target": "@components/ballmac/blocks/ai-chat-1/ai-chat-1.tsx" } ], "categories": [ "blocks", "ai-chat" ], "meta": { "schema": 1, "tier": "free", "tags": [ "ai", "chat", "assistant", "agent", "copilot", "app" ], "version": "1.0.0", "updated": "2026-09-28", "ai": { "summary": "A ready-made chat screen driven entirely by props. Map your chat state (for example the Vercel AI SDK's useChat messages) to `messages`, call your API in `onSubmit`, and pass `streaming` while a reply arrives.", "whenToUse": [ "Assistant, copilot or agent products", "Internal AI tools that need history and model choice" ], "whenNotToUse": [ "A small embedded chat widget (compose ai-chat, ai-message and prompt-input instead)" ], "composesWith": [ "hero-3", "ai-chat", "prompt-input" ], "a11y": [], "customization": [ "messages: { id, role, text, streaming?, reasoning?, tools? }[]", "conversations, activeConversation, onSelectConversation(id | null)", "models, model, onModelChange", "onSubmit(value, files), onStop, streaming" ] }, "examples": [ "ai-chat-1-demo" ], "url": "https://ui.ballmac.com/components/ai-chat-1" } }, { "name": "ai-chat-1-demo", "type": "registry:example", "title": "AI Chat 1: full chat app pane: Default", "description": "Default example of AI Chat 1: full chat app pane.", "registryDependencies": [ "https://ui.ballmac.com/r/ai-chat-1.json" ], "files": [ { "path": "registry/examples/ai-chat-1-demo.tsx", "type": "registry:example", "target": "@components/ballmac/examples/ai-chat-1-demo.tsx" } ], "categories": [ "blocks" ], "meta": { "example": true, "of": "ai-chat-1", "tier": "free" } }, { "name": "ai-chat-2", "type": "registry:block", "title": "AI Chat 2: conversation with artifact panel", "description": "A chat that builds things: conversation list, streaming replies, suggestion chips and a side panel with Preview and Code tabs, version history, copy and download. The panel overlays the chat on narrow screens.", "author": "Ballmac ", "dependencies": [ "lucide-react" ], "registryDependencies": [ "utils", "https://ui.ballmac.com/r/ai-chat.json", "https://ui.ballmac.com/r/ai-message.json", "https://ui.ballmac.com/r/artifact-panel.json", "https://ui.ballmac.com/r/button.json", "https://ui.ballmac.com/r/prompt-input.json", "https://ui.ballmac.com/r/streaming-text.json" ], "files": [ { "path": "registry/ballmac/components/blocks/ai-chat-2/ai-chat-2.tsx", "type": "registry:component", "target": "@components/ballmac/blocks/ai-chat-2/ai-chat-2.tsx" } ], "categories": [ "blocks", "ai-chat" ], "meta": { "schema": 1, "tier": "free", "tags": [ "ai chat", "artifact", "assistant", "streaming", "code", "side panel", "versions" ], "version": "1.0.0", "updated": "2026-10-01", "ai": { "summary": "An assistant UI that produces artifacts. Pass versions=[{ code, preview, note }], defaultMessages, suggestions and onSend(prompt) returning { reply, artifact? } (the 1-based version the reply moves to). Without onSend a built-in script lets you try the whole flow.", "whenToUse": [ "Assistants that write code, documents or designs", "Anywhere results deserve their own panel with versions" ], "whenNotToUse": [ "A plain chat pane (use ai-chat-1)" ], "composesWith": [ "app-shell-1", "ai-chat-1", "mail-1" ], "a11y": [ { "keys": "Tab", "action": "Chips, the artifact chip in a reply, the panel's tabs and its version arrows are all buttons in reading order" }, { "keys": "Streaming", "action": "Replies stream into a live region; the panel shows a progress edge while it writes" }, { "keys": "Esc / Close", "action": "The close button returns to the chat on narrow screens" } ], "customization": [ "versions, defaultMessages, suggestions, conversations", "artifactTitle, artifactKind, filename, language", "onSend(prompt) async" ] }, "examples": [ "ai-chat-2-demo", "ai-chat-2-blank" ], "url": "https://ui.ballmac.com/components/ai-chat-2" } }, { "name": "ai-chat-2-demo", "type": "registry:example", "title": "AI Chat 2: conversation with artifact panel: Default", "description": "Default example of AI Chat 2: conversation with artifact panel.", "registryDependencies": [ "https://ui.ballmac.com/r/ai-chat-2.json" ], "files": [ { "path": "registry/examples/ai-chat-2-demo.tsx", "type": "registry:example", "target": "@components/ballmac/examples/ai-chat-2-demo.tsx" } ], "categories": [ "blocks" ], "meta": { "example": true, "of": "ai-chat-2", "tier": "free" } }, { "name": "ai-chat-2-blank", "type": "registry:example", "title": "AI Chat 2: conversation with artifact panel: Your own artifact", "description": "Your own artifact example of AI Chat 2: conversation with artifact panel.", "registryDependencies": [ "https://ui.ballmac.com/r/ai-chat-2.json" ], "files": [ { "path": "registry/examples/ai-chat-2-blank.tsx", "type": "registry:example", "target": "@components/ballmac/examples/ai-chat-2-blank.tsx" } ], "categories": [ "blocks" ], "meta": { "example": true, "of": "ai-chat-2", "tier": "free" } }, { "name": "app-shell-1", "type": "registry:block", "title": "App Shell 1: collapsible sidebar with command menu", "description": "A product frame: workspace switcher, grouped navigation with badges that collapses to an icon rail, top bar with search, notifications and a ⌘K command menu, and a scrolling page slot. A drawer on phones.", "author": "Ballmac ", "dependencies": [ "lucide-react" ], "registryDependencies": [ "utils", "https://ui.ballmac.com/r/avatar.json", "https://ui.ballmac.com/r/button.json", "https://ui.ballmac.com/r/command.json", "https://ui.ballmac.com/r/dropdown-menu.json", "https://ui.ballmac.com/r/kbd.json", "https://ui.ballmac.com/r/sheet.json" ], "files": [ { "path": "registry/ballmac/components/blocks/app-shell-1/app-shell-1.tsx", "type": "registry:component", "target": "@components/ballmac/blocks/app-shell-1/app-shell-1.tsx" } ], "categories": [ "blocks", "app-shell" ], "meta": { "schema": 1, "tier": "free", "tags": [ "app shell", "sidebar", "dashboard layout", "navigation", "command menu", "workspace" ], "version": "1.0.0", "updated": "2026-10-01", "ai": { "summary": "The frame around an app. Pass nav=[{ label?, items: [{ id, label, icon?, badge? }] }], workspace, user and a children render function (page) => node; value / onValueChange control the open page.", "whenToUse": [ "Dashboards, admin tools and any multi-page product", "A realistic frame for demos and screenshots" ], "whenNotToUse": [ "Marketing sites (use header-2)", "Single-screen tools" ], "composesWith": [ "dashboard-1", "dashboard-2", "settings-1", "billing-1", "mail-1", "kanban-1" ], "a11y": [ { "keys": "Ctrl/⌘ + K", "action": "Opens the command menu to jump to any page" }, { "keys": "Ctrl/⌘ + B", "action": "Collapses or expands the sidebar" }, { "keys": "Tab", "action": "A skip link jumps past the sidebar; the open page is marked aria-current=page" } ], "customization": [ "nav groups, workspace, workspaces, user", "children: (page) => node", "defaultCollapsed, height ('100svh' for a full-screen app)" ] }, "examples": [ "app-shell-1-demo", "app-shell-1-collapsed" ], "url": "https://ui.ballmac.com/components/app-shell-1" } }, { "name": "app-shell-1-demo", "type": "registry:example", "title": "App Shell 1: collapsible sidebar with command menu: Default", "description": "Default example of App Shell 1: collapsible sidebar with command menu.", "registryDependencies": [ "https://ui.ballmac.com/r/app-shell-1.json" ], "files": [ { "path": "registry/examples/app-shell-1-demo.tsx", "type": "registry:example", "target": "@components/ballmac/examples/app-shell-1-demo.tsx" } ], "categories": [ "blocks" ], "meta": { "example": true, "of": "app-shell-1", "tier": "free" } }, { "name": "app-shell-1-collapsed", "type": "registry:example", "title": "App Shell 1: collapsible sidebar with command menu: Collapsed, custom pages", "description": "Collapsed, custom pages example of App Shell 1: collapsible sidebar with command menu.", "registryDependencies": [ "https://ui.ballmac.com/r/app-shell-1.json" ], "dependencies": [ "lucide-react" ], "files": [ { "path": "registry/examples/app-shell-1-collapsed.tsx", "type": "registry:example", "target": "@components/ballmac/examples/app-shell-1-collapsed.tsx" } ], "categories": [ "blocks" ], "meta": { "example": true, "of": "app-shell-1", "tier": "free" } }, { "name": "billing-1", "type": "registry:block", "title": "Billing 1: plan, usage and invoices", "description": "A billing page: current plan and monthly cost, usage meters that turn amber near the limit, the card on file with an update dialog (formatted, validated), the billing contact and an invoice list with status and downloads.", "author": "Ballmac ", "dependencies": [ "lucide-react" ], "registryDependencies": [ "utils", "https://ui.ballmac.com/r/badge.json", "https://ui.ballmac.com/r/button.json", "https://ui.ballmac.com/r/dialog.json", "https://ui.ballmac.com/r/field.json", "https://ui.ballmac.com/r/input.json", "https://ui.ballmac.com/r/i18n.json" ], "files": [ { "path": "registry/ballmac/components/blocks/billing-1/billing-1.tsx", "type": "registry:component", "target": "@components/ballmac/blocks/billing-1/billing-1.tsx" } ], "categories": [ "blocks", "billing" ], "meta": { "schema": 1, "tier": "free", "tags": [ "billing", "subscription", "usage", "invoices", "payment method", "plan" ], "version": "1.0.0", "updated": "2026-10-01", "ai": { "summary": "The billing screen. Pass plan, usage=[{ label, used, limit?, unit? }], card, contact, invoices, currency and handlers onChangePlan / onUpdateCard (throw to show an error). Real card numbers must go to your payment provider's hosted fields, not through this form.", "whenToUse": [ "Subscription management pages", "Usage-based or seat-based products" ], "whenNotToUse": [ "Choosing between plans (use billing-2 or pricing-2)" ], "composesWith": [ "app-shell-1", "billing-2", "settings-1", "settings-3" ], "a11y": [ { "keys": "Usage meters", "action": "Each is an image with a text alternative ('Storage: 64 percent used') and the warning is written out, not only coloured" }, { "keys": "Update card", "action": "A dialog with labelled fields, inline errors and focus returned to the button on close" }, { "keys": "Download", "action": "Each icon link is named 'Download invoice INV-…'" } ], "customization": [ "plan, usage, card, contact, invoices", "currency, locale", "onChangePlan, onUpdateCard" ] }, "examples": [ "billing-1-demo", "billing-1-starter" ], "url": "https://ui.ballmac.com/components/billing-1" } }, { "name": "billing-1-demo", "type": "registry:example", "title": "Billing 1: plan, usage and invoices: Default", "description": "Default example of Billing 1: plan, usage and invoices.", "registryDependencies": [ "https://ui.ballmac.com/r/billing-1.json" ], "files": [ { "path": "registry/examples/billing-1-demo.tsx", "type": "registry:example", "target": "@components/ballmac/examples/billing-1-demo.tsx" } ], "categories": [ "blocks" ], "meta": { "example": true, "of": "billing-1", "tier": "free" } }, { "name": "billing-1-starter", "type": "registry:example", "title": "Billing 1: plan, usage and invoices: Free plan", "description": "Free plan example of Billing 1: plan, usage and invoices.", "registryDependencies": [ "https://ui.ballmac.com/r/billing-1.json" ], "files": [ { "path": "registry/examples/billing-1-starter.tsx", "type": "registry:example", "target": "@components/ballmac/examples/billing-1-starter.tsx" } ], "categories": [ "blocks" ], "meta": { "example": true, "of": "billing-1", "tier": "free" } }, { "name": "billing-2", "type": "registry:block", "title": "Billing 2: change plan with proration", "description": "A change-plan flow: billing interval, plan cards as radios, a seat stepper that respects the current team, and a sticky summary that works out the prorated charge, the credit and what is due today.", "author": "Ballmac ", "dependencies": [ "lucide-react" ], "registryDependencies": [ "utils", "https://ui.ballmac.com/r/badge.json", "https://ui.ballmac.com/r/button.json", "https://ui.ballmac.com/r/segmented-control.json", "https://ui.ballmac.com/r/i18n.json" ], "files": [ { "path": "registry/ballmac/components/blocks/billing-2/billing-2.tsx", "type": "registry:component", "target": "@components/ballmac/blocks/billing-2/billing-2.tsx" } ], "categories": [ "blocks", "billing" ], "meta": { "schema": 1, "tier": "free", "tags": [ "billing", "upgrade", "downgrade", "proration", "seats", "plans", "checkout" ], "version": "1.0.0", "updated": "2026-10-01", "ai": { "summary": "Upgrade and downgrade flow. Pass plans=[{ id, name, monthly, yearly, description, features }], currentPlan, currentSeats, today and renewsOn (ISO dates, so server and browser agree) and onConfirm({ plan, seats, interval }) (throw to show an error).", "whenToUse": [ "In-app plan changes", "Seat-based products with prorated billing" ], "whenNotToUse": [ "Public pricing pages (use pricing-2 or pricing-3)" ], "composesWith": [ "billing-1", "app-shell-1", "settings-3" ], "a11y": [ { "keys": "Arrow keys on plans", "action": "Move between plan radios; the chosen plan is marked and named 'Current' when it is the active one" }, { "keys": "Seat buttons", "action": "Named 'Add a seat' and 'Remove a seat'; the count is announced politely and can't go below the team size" }, { "keys": "Summary", "action": "A labelled complementary region; every line is plain text" } ], "customization": [ "plans, currentPlan, currentSeats, currentInterval, minSeats", "today and renewsOn drive the proration", "onConfirm(change) async" ] }, "examples": [ "billing-2-demo", "billing-2-yearly" ], "url": "https://ui.ballmac.com/components/billing-2" } }, { "name": "billing-2-demo", "type": "registry:example", "title": "Billing 2: change plan with proration: Default", "description": "Default example of Billing 2: change plan with proration.", "registryDependencies": [ "https://ui.ballmac.com/r/billing-2.json" ], "files": [ { "path": "registry/examples/billing-2-demo.tsx", "type": "registry:example", "target": "@components/ballmac/examples/billing-2-demo.tsx" } ], "categories": [ "blocks" ], "meta": { "example": true, "of": "billing-2", "tier": "free" } }, { "name": "billing-2-yearly", "type": "registry:example", "title": "Billing 2: change plan with proration: Yearly account", "description": "Yearly account example of Billing 2: change plan with proration.", "registryDependencies": [ "https://ui.ballmac.com/r/billing-2.json" ], "files": [ { "path": "registry/examples/billing-2-yearly.tsx", "type": "registry:example", "target": "@components/ballmac/examples/billing-2-yearly.tsx" } ], "categories": [ "blocks" ], "meta": { "example": true, "of": "billing-2", "tier": "free" } }, { "name": "blog-1", "type": "registry:block", "title": "Blog 1: featured post with filterable grid", "description": "A blog index with a large featured post, topic filter chips and a three-column grid. Posts without a photo get a generated cover drawn from theme tokens, in five compositions.", "author": "Ballmac ", "dependencies": [ "lucide-react" ], "registryDependencies": [ "utils", "https://ui.ballmac.com/r/i18n.json", "https://ui.ballmac.com/r/media.json" ], "files": [ { "path": "registry/ballmac/components/blocks/blog-1/blog-1.tsx", "type": "registry:component", "target": "@components/ballmac/blocks/blog-1/blog-1.tsx" } ], "categories": [ "blocks", "blog" ], "meta": { "schema": 1, "tier": "free", "tags": [ "blog", "posts", "articles", "index", "filter", "cards" ], "version": "1.0.0", "updated": "2026-10-01", "ai": { "summary": "The index page of a blog. Pass posts=[{ title, excerpt, category, date, readMinutes, author, role?, href, image?, cover? }]; the first post is featured. Also exports BlogCover for your own cards.", "whenToUse": [ "Company and product blogs", "Resource and news pages" ], "whenNotToUse": [ "A single article (use blog-post-1)", "Hundreds of posts that need pagination and search" ], "composesWith": [ "blog-post-1", "newsletter-1", "header-2", "footer-2" ], "a11y": [ { "keys": "Enter / Space on a topic chip", "action": "Filters the list (aria-pressed); the count is announced politely" }, { "keys": "Tab", "action": "Each card has one link; the whole card is clickable" } ], "customization": [ "posts: image for a photo, or cover (0 to 4) to choose a generated cover", "filterable: false hides the chips", "locale for dates (UTC, fixed by default)" ] }, "examples": [ "blog-1-demo", "blog-1-compact" ], "url": "https://ui.ballmac.com/components/blog-1" } }, { "name": "blog-1-demo", "type": "registry:example", "title": "Blog 1: featured post with filterable grid: Default", "description": "Default example of Blog 1: featured post with filterable grid.", "registryDependencies": [ "https://ui.ballmac.com/r/blog-1.json" ], "files": [ { "path": "registry/examples/blog-1-demo.tsx", "type": "registry:example", "target": "@components/ballmac/examples/blog-1-demo.tsx" } ], "categories": [ "blocks" ], "meta": { "example": true, "of": "blog-1", "tier": "free" } }, { "name": "blog-1-compact", "type": "registry:example", "title": "Blog 1: featured post with filterable grid: Three posts", "description": "Three posts example of Blog 1: featured post with filterable grid.", "registryDependencies": [ "https://ui.ballmac.com/r/blog-1.json" ], "files": [ { "path": "registry/examples/blog-1-compact.tsx", "type": "registry:example", "target": "@components/ballmac/examples/blog-1-compact.tsx" } ], "categories": [ "blocks" ], "meta": { "example": true, "of": "blog-1", "tier": "free" } }, { "name": "blog-post-1", "type": "registry:block", "title": "Blog Post 1: article with contents and progress", "description": "A long-form article page: centered title and author row, cover, comfortable prose with pull quote and code, sticky table of contents with scroll spy, reading progress bar, author card and related posts.", "author": "Ballmac ", "dependencies": [ "lucide-react" ], "registryDependencies": [ "utils", "https://ui.ballmac.com/r/blog-1.json", "https://ui.ballmac.com/r/breadcrumb.json", "https://ui.ballmac.com/r/copy-button.json", "https://ui.ballmac.com/r/scroll-progress.json", "https://ui.ballmac.com/r/table-of-contents.json", "https://ui.ballmac.com/r/i18n.json", "https://ui.ballmac.com/r/media.json" ], "files": [ { "path": "registry/ballmac/components/blocks/blog-post-1/blog-post-1.tsx", "type": "registry:component", "target": "@components/ballmac/blocks/blog-post-1/blog-post-1.tsx" } ], "categories": [ "blocks", "blog" ], "meta": { "schema": 1, "tier": "free", "tags": [ "blog", "article", "post", "prose", "table of contents", "reading progress" ], "version": "1.0.0", "updated": "2026-10-01", "ai": { "summary": "An article template. Pass title, subtitle, author, date and readMinutes, give the body as children (plain h2, h3, p, ul, blockquote and pre are styled), and list the headings in toc.", "whenToUse": [ "Blog posts, guides and announcements", "Any long reading page" ], "whenNotToUse": [ "Documentation with a left sidebar (use your docs layout)" ], "composesWith": [ "blog-1", "newsletter-1", "header-2", "footer-2" ], "a11y": [ { "keys": "Tab", "action": "Reaches the breadcrumb, the copy button, links in the body, then the contents list" }, { "keys": "Enter on a contents link", "action": "Scrolls to that heading; the current section is marked with aria-current" } ], "customization": [ "children: your article, with ids on h2 and h3 headings", "toc: { id, title, level }[] matching those ids", "stickyOffset: pixels to keep clear of a fixed header", "related: [] hides the Keep reading section" ] }, "examples": [ "blog-post-1-demo", "blog-post-1-short" ], "url": "https://ui.ballmac.com/components/blog-post-1" } }, { "name": "blog-post-1-demo", "type": "registry:example", "title": "Blog Post 1: article with contents and progress: Default", "description": "Default example of Blog Post 1: article with contents and progress.", "registryDependencies": [ "https://ui.ballmac.com/r/blog-post-1.json" ], "files": [ { "path": "registry/examples/blog-post-1-demo.tsx", "type": "registry:example", "target": "@components/ballmac/examples/blog-post-1-demo.tsx" } ], "categories": [ "blocks" ], "meta": { "example": true, "of": "blog-post-1", "tier": "free" } }, { "name": "blog-post-1-short", "type": "registry:example", "title": "Blog Post 1: article with contents and progress: Your own content", "description": "Your own content example of Blog Post 1: article with contents and progress.", "registryDependencies": [ "https://ui.ballmac.com/r/blog-post-1.json" ], "files": [ { "path": "registry/examples/blog-post-1-short.tsx", "type": "registry:example", "target": "@components/ballmac/examples/blog-post-1-short.tsx" } ], "categories": [ "blocks" ], "meta": { "example": true, "of": "blog-post-1", "tier": "free" } }, { "name": "calendar-1", "type": "registry:block", "title": "Calendar 1: week view with mini month", "description": "A week calendar: a time grid with overlapping events placed side by side, an all-day row, a now line, a mini month and calendar toggles, event popovers and a new-event dialog. One day at a time on phones.", "author": "Ballmac ", "dependencies": [ "lucide-react" ], "registryDependencies": [ "utils", "https://ui.ballmac.com/r/button.json", "https://ui.ballmac.com/r/calendar.json", "https://ui.ballmac.com/r/dialog.json", "https://ui.ballmac.com/r/input.json", "https://ui.ballmac.com/r/popover.json" ], "files": [ { "path": "registry/ballmac/components/blocks/calendar-1/calendar-1.tsx", "type": "registry:component", "target": "@components/ballmac/blocks/calendar-1/calendar-1.tsx" } ], "categories": [ "blocks", "calendar" ], "meta": { "schema": 1, "tier": "free", "tags": [ "calendar", "schedule", "week view", "events", "planner", "agenda" ], "version": "1.0.0", "updated": "2026-10-01", "ai": { "summary": "A scheduling view. Pass defaultEvents=[{ id, title, start, end, calendar, location?, allDay? }] with local 'YYYY-MM-DDTHH:mm' times, calendars, today (YYYY-MM-DD) and now (HH:mm) so the page is identical on the server and in the browser.", "whenToUse": [ "Scheduling, booking and planning screens", "A realistic product screenshot" ], "whenNotToUse": [ "Picking a date in a form (use calendar or date-picker)", "An agenda list (use calendar-agenda)" ], "composesWith": [ "app-shell-1", "kanban-1", "mail-1" ], "a11y": [ { "keys": "Tab", "action": "Events are buttons in time order; Enter opens a popover with the details" }, { "keys": "Mini month arrow keys", "action": "Move between days; PageUp and PageDown change month" }, { "keys": "Calendar checkboxes", "action": "Show or hide a calendar; each event's name, time and place are in its accessible name" } ], "customization": [ "defaultEvents, calendars, today, now (null hides the line)", "startHour and endHour", "onAdd(event), height" ] }, "examples": [ "calendar-1-demo", "calendar-1-compact" ], "url": "https://ui.ballmac.com/components/calendar-1" } }, { "name": "calendar-1-demo", "type": "registry:example", "title": "Calendar 1: week view with mini month: Default", "description": "Default example of Calendar 1: week view with mini month.", "registryDependencies": [ "https://ui.ballmac.com/r/calendar-1.json" ], "files": [ { "path": "registry/examples/calendar-1-demo.tsx", "type": "registry:example", "target": "@components/ballmac/examples/calendar-1-demo.tsx" } ], "categories": [ "blocks" ], "meta": { "example": true, "of": "calendar-1", "tier": "free" } }, { "name": "calendar-1-compact", "type": "registry:example", "title": "Calendar 1: week view with mini month: Work hours, your calendars", "description": "Work hours, your calendars example of Calendar 1: week view with mini month.", "registryDependencies": [ "https://ui.ballmac.com/r/calendar-1.json" ], "files": [ { "path": "registry/examples/calendar-1-compact.tsx", "type": "registry:example", "target": "@components/ballmac/examples/calendar-1-compact.tsx" } ], "categories": [ "blocks" ], "meta": { "example": true, "of": "calendar-1", "tier": "free" } }, { "name": "careers-1", "type": "registry:block", "title": "Careers 1: open roles with filters and perks", "description": "Open roles grouped by team with team filter chips, live search and an empty state, then a hairline grid of perks. Every role row is one large link with location and type.", "author": "Ballmac ", "dependencies": [ "lucide-react" ], "registryDependencies": [ "utils", "https://ui.ballmac.com/r/button.json", "https://ui.ballmac.com/r/search-field.json" ], "files": [ { "path": "registry/ballmac/components/blocks/careers-1/careers-1.tsx", "type": "registry:component", "target": "@components/ballmac/blocks/careers-1/careers-1.tsx" } ], "categories": [ "blocks", "careers" ], "meta": { "schema": 1, "tier": "free", "tags": [ "careers", "jobs", "hiring", "roles", "filter", "perks" ], "version": "1.0.0", "updated": "2026-10-01", "ai": { "summary": "A jobs section. Pass jobs=[{ title, team, location, type?, href }] and optionally perks=[{ icon?, title, description }]; teams and filters are derived from the jobs.", "whenToUse": [ "Company careers pages", "Open source projects looking for maintainers" ], "whenNotToUse": [ "A full applicant tracking system" ], "composesWith": [ "team-1", "contact-1", "header-2", "footer-2" ], "a11y": [ { "keys": "Enter / Space on a team chip", "action": "Filters the roles (aria-pressed); the count is announced politely" }, { "keys": "Tab", "action": "Each role is a single link with its location and type in the name" } ], "customization": [ "jobs / perks arrays", "perks: [] hides the grid", "openApplication: null hides the link" ] }, "examples": [ "careers-1-demo", "careers-1-small" ], "url": "https://ui.ballmac.com/components/careers-1" } }, { "name": "careers-1-demo", "type": "registry:example", "title": "Careers 1: open roles with filters and perks: Default", "description": "Default example of Careers 1: open roles with filters and perks.", "registryDependencies": [ "https://ui.ballmac.com/r/careers-1.json" ], "files": [ { "path": "registry/examples/careers-1-demo.tsx", "type": "registry:example", "target": "@components/ballmac/examples/careers-1-demo.tsx" } ], "categories": [ "blocks" ], "meta": { "example": true, "of": "careers-1", "tier": "free" } }, { "name": "careers-1-small", "type": "registry:example", "title": "Careers 1: open roles with filters and perks: A few roles", "description": "A few roles example of Careers 1: open roles with filters and perks.", "registryDependencies": [ "https://ui.ballmac.com/r/careers-1.json" ], "files": [ { "path": "registry/examples/careers-1-small.tsx", "type": "registry:example", "target": "@components/ballmac/examples/careers-1-small.tsx" } ], "categories": [ "blocks" ], "meta": { "example": true, "of": "careers-1", "tier": "free" } }, { "name": "changelog-1", "type": "registry:block", "title": "Changelog 1: release notes timeline", "description": "A release-notes page: a sticky version and date beside each release card, optional banner art for headline releases, typed changes with filters and counts, and a show-older button.", "author": "Ballmac ", "dependencies": [ "lucide-react" ], "registryDependencies": [ "utils", "https://ui.ballmac.com/r/blog-1.json", "https://ui.ballmac.com/r/button.json", "https://ui.ballmac.com/r/i18n.json", "https://ui.ballmac.com/r/media.json" ], "files": [ { "path": "registry/ballmac/components/blocks/changelog-1/changelog-1.tsx", "type": "registry:component", "target": "@components/ballmac/blocks/changelog-1/changelog-1.tsx" } ], "categories": [ "blocks", "changelog" ], "meta": { "schema": 1, "tier": "free", "tags": [ "changelog", "release notes", "updates", "versions", "timeline", "filter" ], "version": "1.0.0", "updated": "2026-10-01", "ai": { "summary": "A public changelog page. Pass releases=[{ version, date, title, summary?, changes: { type: 'new' | 'improved' | 'fixed', text }[], cover? }] newest first.", "whenToUse": [ "Product release notes", "Open-source project updates" ], "whenNotToUse": [ "A compact in-app feed (use changelog-feed)" ], "composesWith": [ "newsletter-1", "header-2", "footer-2", "hero-6" ], "a11y": [ { "keys": "Enter / Space on a filter", "action": "Filters the changes (aria-pressed); the release count is announced politely" }, { "keys": "Tab", "action": "Each change type is also spelled out in text, not only colour" } ], "customization": [ "releases: cover (0 to 4) adds banner art to a headline release", "initialCount: releases shown before the button", "feed: null hides the RSS button" ] }, "examples": [ "changelog-1-demo", "changelog-1-minimal" ], "url": "https://ui.ballmac.com/components/changelog-1" } }, { "name": "changelog-1-demo", "type": "registry:example", "title": "Changelog 1: release notes timeline: Default", "description": "Default example of Changelog 1: release notes timeline.", "registryDependencies": [ "https://ui.ballmac.com/r/changelog-1.json" ], "files": [ { "path": "registry/examples/changelog-1-demo.tsx", "type": "registry:example", "target": "@components/ballmac/examples/changelog-1-demo.tsx" } ], "categories": [ "blocks" ], "meta": { "example": true, "of": "changelog-1", "tier": "free" } }, { "name": "changelog-1-minimal", "type": "registry:example", "title": "Changelog 1: release notes timeline: Minimal", "description": "Minimal example of Changelog 1: release notes timeline.", "registryDependencies": [ "https://ui.ballmac.com/r/changelog-1.json" ], "files": [ { "path": "registry/examples/changelog-1-minimal.tsx", "type": "registry:example", "target": "@components/ballmac/examples/changelog-1-minimal.tsx" } ], "categories": [ "blocks" ], "meta": { "example": true, "of": "changelog-1", "tier": "free" } }, { "name": "comparison-1", "type": "registry:block", "title": "Comparison 1: us versus the alternatives", "description": "A product-versus-alternatives table where your column is lifted into its own card, with yes, partly, no and text values and a row of headline results. Phones switch between alternatives.", "author": "Ballmac ", "dependencies": [ "lucide-react" ], "registryDependencies": [ "utils", "https://ui.ballmac.com/r/segmented-control.json" ], "files": [ { "path": "registry/ballmac/components/blocks/comparison-1/comparison-1.tsx", "type": "registry:component", "target": "@components/ballmac/blocks/comparison-1/comparison-1.tsx" } ], "categories": [ "blocks", "comparison" ], "meta": { "schema": 1, "tier": "free", "tags": [ "comparison", "versus", "alternatives", "table", "switch", "features" ], "version": "1.0.0", "updated": "2026-10-01", "ai": { "summary": "A switch-from-X page section. Pass product, competitors=[{ key, name }] and rows=[{ label, hint?, values: { us, [key]: true | false | 'partial' | text } }].", "whenToUse": [ "Landing pages aimed at people evaluating alternatives", "Migration and 'vs' pages" ], "whenNotToUse": [ "Comparing your own plans (use pricing-3)" ], "composesWith": [ "pricing-2", "testimonials-2", "cta-1", "faq-2" ], "a11y": [ { "keys": "Arrow Left / Right (phones)", "action": "Switches the alternative shown" }, { "keys": "Screen reader", "action": "Each cell reads as 'Name, capability: yes / partly / no'" } ], "customization": [ "values use the key 'us' for your product", "reasons: [] hides the headline results" ] }, "examples": [ "comparison-1-demo", "comparison-1-single" ], "url": "https://ui.ballmac.com/components/comparison-1" } }, { "name": "comparison-1-demo", "type": "registry:example", "title": "Comparison 1: us versus the alternatives: Default", "description": "Default example of Comparison 1: us versus the alternatives.", "registryDependencies": [ "https://ui.ballmac.com/r/comparison-1.json" ], "files": [ { "path": "registry/examples/comparison-1-demo.tsx", "type": "registry:example", "target": "@components/ballmac/examples/comparison-1-demo.tsx" } ], "categories": [ "blocks" ], "meta": { "example": true, "of": "comparison-1", "tier": "free" } }, { "name": "comparison-1-single", "type": "registry:example", "title": "Comparison 1: us versus the alternatives: One alternative", "description": "One alternative example of Comparison 1: us versus the alternatives.", "registryDependencies": [ "https://ui.ballmac.com/r/comparison-1.json" ], "files": [ { "path": "registry/examples/comparison-1-single.tsx", "type": "registry:example", "target": "@components/ballmac/examples/comparison-1-single.tsx" } ], "categories": [ "blocks" ], "meta": { "example": true, "of": "comparison-1", "tier": "free" } }, { "name": "contact-1", "type": "registry:block", "title": "Contact 1: form with contact methods", "description": "A contact section with a validated form (name, email, topic, message with counter, consent), loading, error and thank-you states, beside tiles for email, chat, phone and office with a response-time pill.", "author": "Ballmac ", "dependencies": [ "lucide-react" ], "registryDependencies": [ "utils", "https://ui.ballmac.com/r/button.json", "https://ui.ballmac.com/r/checkbox.json", "https://ui.ballmac.com/r/field.json", "https://ui.ballmac.com/r/input.json", "https://ui.ballmac.com/r/select.json", "https://ui.ballmac.com/r/status-dot.json", "https://ui.ballmac.com/r/textarea.json" ], "files": [ { "path": "registry/ballmac/components/blocks/contact-1/contact-1.tsx", "type": "registry:component", "target": "@components/ballmac/blocks/contact-1/contact-1.tsx" } ], "categories": [ "blocks", "contact" ], "meta": { "schema": 1, "tier": "free", "tags": [ "contact", "form", "support", "validation", "email", "sales" ], "version": "1.0.0", "updated": "2026-10-01", "ai": { "summary": "Contact page section. Pass methods, topics and onSubmit(values) (throw to show an error). Validation, focus on the first error, loading and the thank-you screen are built in.", "whenToUse": [ "Contact and support pages", "Sales enquiry sections" ], "whenNotToUse": [ "Newsletter signup (use newsletter-1)", "Authenticated in-app feedback (use feedback-widget)" ], "composesWith": [ "faq-2", "header-2", "footer-2", "careers-1" ], "a11y": [ { "keys": "Submit with errors", "action": "Focus moves to the first invalid field; each error is announced as an alert and linked with aria-describedby" }, { "keys": "Arrow keys / Enter in the topic menu", "action": "Choose a topic (Radix Select)" } ], "customization": [ "methods: { icon?, label, value, href? }[]", "topics: [] hides the dropdown", "responseTime: null hides the pill", "onSubmit(values): async; throw to show the error state" ] }, "examples": [ "contact-1-demo", "contact-1-support" ], "url": "https://ui.ballmac.com/components/contact-1" } }, { "name": "contact-1-demo", "type": "registry:example", "title": "Contact 1: form with contact methods: Default", "description": "Default example of Contact 1: form with contact methods.", "registryDependencies": [ "https://ui.ballmac.com/r/contact-1.json" ], "files": [ { "path": "registry/examples/contact-1-demo.tsx", "type": "registry:example", "target": "@components/ballmac/examples/contact-1-demo.tsx" } ], "categories": [ "blocks" ], "meta": { "example": true, "of": "contact-1", "tier": "free" } }, { "name": "contact-1-support", "type": "registry:example", "title": "Contact 1: form with contact methods: Support form", "description": "Support form example of Contact 1: form with contact methods.", "registryDependencies": [ "https://ui.ballmac.com/r/contact-1.json" ], "dependencies": [ "lucide-react" ], "files": [ { "path": "registry/examples/contact-1-support.tsx", "type": "registry:example", "target": "@components/ballmac/examples/contact-1-support.tsx" } ], "categories": [ "blocks" ], "meta": { "example": true, "of": "contact-1", "tier": "free" } }, { "name": "cta-1", "type": "registry:block", "title": "CTA 1: framed call to action", "description": "A closing call-to-action panel: large heading, one line of reassurance and two buttons, over a softly lit animated grid.", "author": "Ballmac ", "dependencies": [ "lucide-react" ], "registryDependencies": [ "utils", "https://ui.ballmac.com/r/animated-grid.json", "https://ui.ballmac.com/r/button.json" ], "files": [ { "path": "registry/ballmac/components/blocks/cta-1/cta-1.tsx", "type": "registry:component", "target": "@components/ballmac/blocks/cta-1/cta-1.tsx" } ], "categories": [ "blocks", "cta" ], "meta": { "schema": 1, "tier": "free", "tags": [ "cta", "call to action", "signup", "landing" ], "version": "1.0.0", "updated": "2026-09-28", "ai": { "summary": "The last section before the footer: one decisive action. Edit title, description and the two actions.", "whenToUse": [ "End of landing and pricing pages", "Between long content sections to prompt sign-up" ], "whenNotToUse": [ "Top of the page (use a hero)" ], "composesWith": [ "footer-1", "faq-1" ], "a11y": [], "customization": [ "title, description, primaryAction, secondaryAction props" ] }, "examples": [ "cta-1-demo" ], "url": "https://ui.ballmac.com/components/cta-1" } }, { "name": "cta-1-demo", "type": "registry:example", "title": "CTA 1: framed call to action: Default", "description": "Default example of CTA 1: framed call to action.", "registryDependencies": [ "https://ui.ballmac.com/r/cta-1.json" ], "files": [ { "path": "registry/examples/cta-1-demo.tsx", "type": "registry:example", "target": "@components/ballmac/examples/cta-1-demo.tsx" } ], "categories": [ "blocks" ], "meta": { "example": true, "of": "cta-1", "tier": "free" } }, { "name": "cta-2", "type": "registry:block", "title": "CTA 2: waitlist over light beams", "description": "A waitlist or newsletter signup over rising light beams: heading, email field with validation, loading, success and error states.", "author": "Ballmac ", "dependencies": [ "lucide-react" ], "registryDependencies": [ "utils", "https://ui.ballmac.com/r/beams-background.json", "https://ui.ballmac.com/r/button.json", "https://ui.ballmac.com/r/input.json" ], "files": [ { "path": "registry/ballmac/components/blocks/cta-2/cta-2.tsx", "type": "registry:component", "target": "@components/ballmac/blocks/cta-2/cta-2.tsx" } ], "categories": [ "blocks", "cta" ], "meta": { "schema": 1, "tier": "free", "tags": [ "cta", "waitlist", "newsletter", "signup", "beams" ], "version": "1.0.0", "updated": "2026-09-29", "ai": { "summary": "Email capture section. Wire `onSubmit(email)` to your API (throw on failure); the block handles loading, success and error states.", "whenToUse": [ "Pre-launch waitlists", "Newsletter signup at the end of a page" ], "whenNotToUse": [ "Collecting more than an email (use a form page)" ], "composesWith": [ "hero-4", "features-3", "footer-1" ], "a11y": [], "customization": [ "eyebrow, title, description, buttonLabel, note, successMessage", "onSubmit(email): Promise" ] }, "examples": [ "cta-2-demo" ], "url": "https://ui.ballmac.com/components/cta-2" } }, { "name": "cta-2-demo", "type": "registry:example", "title": "CTA 2: waitlist over light beams: Default", "description": "Default example of CTA 2: waitlist over light beams.", "registryDependencies": [ "https://ui.ballmac.com/r/cta-2.json" ], "files": [ { "path": "registry/examples/cta-2-demo.tsx", "type": "registry:example", "target": "@components/ballmac/examples/cta-2-demo.tsx" } ], "categories": [ "blocks" ], "meta": { "example": true, "of": "cta-2", "tier": "free" } }, { "name": "cta-3", "type": "registry:block", "title": "CTA 3: install command", "description": "A closing call-to-action for developer products: heading, two buttons and a copyable install command with package-manager tabs, over a soft dotted glow.", "author": "Ballmac ", "dependencies": [ "lucide-react" ], "registryDependencies": [ "utils", "https://ui.ballmac.com/r/button.json", "https://ui.ballmac.com/r/install-tabs.json" ], "files": [ { "path": "registry/ballmac/components/blocks/cta-3/cta-3.tsx", "type": "registry:component", "target": "@components/ballmac/blocks/cta-3/cta-3.tsx" } ], "categories": [ "blocks", "cta" ], "meta": { "schema": 1, "tier": "free", "tags": [ "cta", "install", "command", "developer", "copy", "package manager" ], "version": "1.0.0", "updated": "2026-10-01", "ai": { "summary": "The last section of a developer landing page. Set command (run through npm, pnpm, yarn and bun) or commands for explicit per-manager strings.", "whenToUse": [ "Libraries, CLIs and APIs", "Docs landing pages" ], "whenNotToUse": [ "Consumer products without a command line" ], "composesWith": [ "hero-2", "features-6", "faq-2", "footer-2" ], "a11y": [ { "keys": "Arrow Left / Right", "action": "Switches package manager; the copy button announces success" } ], "customization": [ "command or commands for the install tabs", "storageKey: remember the package manager", "notes: short facts under the command" ] }, "examples": [ "cta-3-demo", "cta-3-custom" ], "url": "https://ui.ballmac.com/components/cta-3" } }, { "name": "cta-3-demo", "type": "registry:example", "title": "CTA 3: install command: Default", "description": "Default example of CTA 3: install command.", "registryDependencies": [ "https://ui.ballmac.com/r/cta-3.json" ], "files": [ { "path": "registry/examples/cta-3-demo.tsx", "type": "registry:example", "target": "@components/ballmac/examples/cta-3-demo.tsx" } ], "categories": [ "blocks" ], "meta": { "example": true, "of": "cta-3", "tier": "free" } }, { "name": "cta-3-custom", "type": "registry:example", "title": "CTA 3: install command: Custom command", "description": "Custom command example of CTA 3: install command.", "registryDependencies": [ "https://ui.ballmac.com/r/cta-3.json" ], "files": [ { "path": "registry/examples/cta-3-custom.tsx", "type": "registry:example", "target": "@components/ballmac/examples/cta-3-custom.tsx" } ], "categories": [ "blocks" ], "meta": { "example": true, "of": "cta-3", "tier": "free" } }, { "name": "dashboard-1", "type": "registry:block", "title": "Dashboard 1: sales overview", "description": "A sales dashboard page: a date-range switch that recomputes everything, four KPI cards with change and trend, a revenue area chart against the previous period, revenue by channel and a recent-orders table.", "author": "Ballmac ", "dependencies": [ "lucide-react", "recharts@^3" ], "registryDependencies": [ "utils", "https://ui.ballmac.com/r/badge.json", "https://ui.ballmac.com/r/button.json", "https://ui.ballmac.com/r/chart.json", "https://ui.ballmac.com/r/segmented-control.json", "https://ui.ballmac.com/r/sparkline.json", "https://ui.ballmac.com/r/i18n.json" ], "files": [ { "path": "registry/ballmac/components/blocks/dashboard-1/dashboard-1.tsx", "type": "registry:component", "target": "@components/ballmac/blocks/dashboard-1/dashboard-1.tsx" } ], "categories": [ "blocks", "dashboard" ], "meta": { "schema": 1, "tier": "free", "tags": [ "dashboard", "analytics", "kpi", "chart", "orders", "sales", "table" ], "version": "1.0.0", "updated": "2026-10-01", "ai": { "summary": "The first screen of a store or SaaS admin. Pass getSeries(range) returning { label, revenue, previous, orders }[], plus channels, orders and currency; the KPIs, deltas and chart are derived from the series.", "whenToUse": [ "Admin home pages", "Sales, billing and usage overviews" ], "whenNotToUse": [ "Traffic analytics (use dashboard-2)" ], "composesWith": [ "app-shell-1", "dashboard-2", "billing-1", "settings-1" ], "a11y": [ { "keys": "Arrow Left / Right", "action": "Changes the date range" }, { "keys": "Chart", "action": "Labelled figure with a plain-language summary; the same numbers are in the KPI cards and the table" }, { "keys": "Tab", "action": "The orders table scrolls sideways on phones and is focusable" } ], "customization": [ "getSeries(range) for your own data", "channels, orders, currency, locale", "onRangeChange to fetch" ] }, "examples": [ "dashboard-1-demo", "dashboard-1-week" ], "url": "https://ui.ballmac.com/components/dashboard-1" } }, { "name": "dashboard-1-demo", "type": "registry:example", "title": "Dashboard 1: sales overview: Default", "description": "Default example of Dashboard 1: sales overview.", "registryDependencies": [ "https://ui.ballmac.com/r/dashboard-1.json" ], "files": [ { "path": "registry/examples/dashboard-1-demo.tsx", "type": "registry:example", "target": "@components/ballmac/examples/dashboard-1-demo.tsx" } ], "categories": [ "blocks" ], "meta": { "example": true, "of": "dashboard-1", "tier": "free" } }, { "name": "dashboard-1-week", "type": "registry:example", "title": "Dashboard 1: sales overview: Seven days, your data", "description": "Seven days, your data example of Dashboard 1: sales overview.", "registryDependencies": [ "https://ui.ballmac.com/r/dashboard-1.json" ], "files": [ { "path": "registry/examples/dashboard-1-week.tsx", "type": "registry:example", "target": "@components/ballmac/examples/dashboard-1-week.tsx" } ], "categories": [ "blocks" ], "meta": { "example": true, "of": "dashboard-1", "tier": "free" } }, { "name": "dashboard-2", "type": "registry:block", "title": "Dashboard 2: traffic analytics", "description": "A web analytics page: a live-now pill, date range and compare switch, a visitors line chart against the previous period, traffic sources as a donut, devices, top countries and a top-pages table.", "author": "Ballmac ", "dependencies": [ "lucide-react", "recharts@^3" ], "registryDependencies": [ "utils", "https://ui.ballmac.com/r/chart.json", "https://ui.ballmac.com/r/segmented-control.json", "https://ui.ballmac.com/r/status-dot.json", "https://ui.ballmac.com/r/switch.json", "https://ui.ballmac.com/r/i18n.json" ], "files": [ { "path": "registry/ballmac/components/blocks/dashboard-2/dashboard-2.tsx", "type": "registry:component", "target": "@components/ballmac/blocks/dashboard-2/dashboard-2.tsx" } ], "categories": [ "blocks", "dashboard" ], "meta": { "schema": 1, "tier": "free", "tags": [ "dashboard", "analytics", "traffic", "line chart", "donut", "visitors", "web" ], "version": "1.0.0", "updated": "2026-10-01", "ai": { "summary": "A traffic dashboard. Pass getSeries(range) returning { label, visitors, previous }[], plus sources, devices, pages, countries and live (null hides the pill).", "whenToUse": [ "Site and product analytics", "Marketing performance pages" ], "whenNotToUse": [ "Sales and revenue (use dashboard-1)" ], "composesWith": [ "app-shell-1", "dashboard-1", "settings-1" ], "a11y": [ { "keys": "Arrow Left / Right", "action": "Changes the date range" }, { "keys": "Compare switch", "action": "Shows or hides the dashed previous-period line; the legend appears with it" }, { "keys": "Charts", "action": "Each chart is a labelled figure with a text summary; sources, devices and countries are also listed as text with their values" } ], "customization": [ "getSeries, sources, devices, pages, countries", "live: number | null", "locale" ] }, "examples": [ "dashboard-2-demo", "dashboard-2-week" ], "url": "https://ui.ballmac.com/components/dashboard-2" } }, { "name": "dashboard-2-demo", "type": "registry:example", "title": "Dashboard 2: traffic analytics: Default", "description": "Default example of Dashboard 2: traffic analytics.", "registryDependencies": [ "https://ui.ballmac.com/r/dashboard-2.json" ], "files": [ { "path": "registry/examples/dashboard-2-demo.tsx", "type": "registry:example", "target": "@components/ballmac/examples/dashboard-2-demo.tsx" } ], "categories": [ "blocks" ], "meta": { "example": true, "of": "dashboard-2", "tier": "free" } }, { "name": "dashboard-2-week", "type": "registry:example", "title": "Dashboard 2: traffic analytics: Compact, no live pill", "description": "Compact, no live pill example of Dashboard 2: traffic analytics.", "registryDependencies": [ "https://ui.ballmac.com/r/dashboard-2.json" ], "files": [ { "path": "registry/examples/dashboard-2-week.tsx", "type": "registry:example", "target": "@components/ballmac/examples/dashboard-2-week.tsx" } ], "categories": [ "blocks" ], "meta": { "example": true, "of": "dashboard-2", "tier": "free" } }, { "name": "devices-1", "type": "registry:block", "title": "Devices 1: Mac, iPad, iPhone and Watch lineup", "description": "A lineup of laptop, tablet, phone and watch frames with their own token-drawn screens, scaled as one picture. Buttons underneath bring a device forward and dim the rest.", "author": "Ballmac ", "dependencies": [ "lucide-react" ], "registryDependencies": [ "utils", "https://ui.ballmac.com/r/laptop-frame.json", "https://ui.ballmac.com/r/phone-frame.json", "https://ui.ballmac.com/r/tablet-frame.json", "https://ui.ballmac.com/r/watch-frame.json" ], "files": [ { "path": "registry/ballmac/components/blocks/devices-1/devices-1.tsx", "type": "registry:component", "target": "@components/ballmac/blocks/devices-1/devices-1.tsx" } ], "categories": [ "blocks", "devices" ], "meta": { "schema": 1, "tier": "free", "tags": [ "devices", "mac", "ipad", "iphone", "watch", "multi-platform", "lineup" ], "version": "1.0.0", "updated": "2026-10-01", "ai": { "summary": "A multi-platform section. Edit eyebrow, title, description and captions; pass screens={{ mac, ipad, iphone, watch }} to replace the sample screens, each laid out at its real device width (1280, 834, 393, 208).", "whenToUse": [ "Apps that ship on several Apple platforms", "Showing responsive or cross-device behaviour" ], "whenNotToUse": [ "Single-platform products (use hero-5 or showcase-1)" ], "composesWith": [ "hero-5", "features-4", "download-1", "pricing-4" ], "a11y": [ { "keys": "Tab / Enter on a device button", "action": "Brings that device forward (aria-pressed); pressing again clears it" }, { "keys": "Picture", "action": "Hidden from assistive technology; the four buttons describe each device in words" }, { "keys": "Reduced motion", "action": "Devices change focus without moving" } ], "customization": [ "captions per device", "screens: any node per device" ] }, "examples": [ "devices-1-demo", "devices-1-custom" ], "url": "https://ui.ballmac.com/components/devices-1" } }, { "name": "devices-1-demo", "type": "registry:example", "title": "Devices 1: Mac, iPad, iPhone and Watch lineup: Default", "description": "Default example of Devices 1: Mac, iPad, iPhone and Watch lineup.", "registryDependencies": [ "https://ui.ballmac.com/r/devices-1.json" ], "files": [ { "path": "registry/examples/devices-1-demo.tsx", "type": "registry:example", "target": "@components/ballmac/examples/devices-1-demo.tsx" } ], "categories": [ "blocks" ], "meta": { "example": true, "of": "devices-1", "tier": "free" } }, { "name": "devices-1-custom", "type": "registry:example", "title": "Devices 1: Mac, iPad, iPhone and Watch lineup: Your own screens", "description": "Your own screens example of Devices 1: Mac, iPad, iPhone and Watch lineup.", "registryDependencies": [ "https://ui.ballmac.com/r/devices-1.json" ], "files": [ { "path": "registry/examples/devices-1-custom.tsx", "type": "registry:example", "target": "@components/ballmac/examples/devices-1-custom.tsx" } ], "categories": [ "blocks" ], "meta": { "example": true, "of": "devices-1", "tier": "free" } }, { "name": "download-1", "type": "registry:block", "title": "Download 1: Mac app download with release notes", "description": "A Mac app download section: app icon and version, an Apple silicon or Intel choice that swaps the file, copyable checksum and Homebrew command, install steps and release notes you can flip between.", "author": "Ballmac ", "dependencies": [ "lucide-react" ], "registryDependencies": [ "utils", "https://ui.ballmac.com/r/button.json", "https://ui.ballmac.com/r/copy-button.json", "https://ui.ballmac.com/r/mac-icons.json", "https://ui.ballmac.com/r/segmented-control.json", "https://ui.ballmac.com/r/i18n.json", "https://ui.ballmac.com/r/media.json" ], "files": [ { "path": "registry/ballmac/components/blocks/download-1/download-1.tsx", "type": "registry:component", "target": "@components/ballmac/blocks/download-1/download-1.tsx" } ], "categories": [ "blocks", "download" ], "meta": { "schema": 1, "tier": "free", "tags": [ "download", "mac", "app", "release notes", "homebrew", "checksum", "install" ], "version": "1.0.0", "updated": "2026-10-01", "ai": { "summary": "The download page of a Mac app. Pass app, tagline, downloads={ arm64: { href, file, size, sha256? }, x64: {...} }, requirements, brew, steps and releases=[{ version, date, changes: [{ type, text }] }].", "whenToUse": [ "Direct-download Mac apps", "Any desktop app with separate builds per chip" ], "whenNotToUse": [ "App Store only apps (link to the store instead)", "Web apps" ], "composesWith": [ "hero-5", "showcase-1", "features-7", "pricing-4" ], "a11y": [ { "keys": "Arrow Left / Right", "action": "Switches between Apple silicon and Intel, and between release versions" }, { "keys": "Download link", "action": "A real link; when activated a polite status confirms the file name" }, { "keys": "Copy buttons", "action": "Named 'Copy SHA-256 checksum' and 'Copy Homebrew command'; success is announced" } ], "customization": [ "downloads, requirements, brew (null hides), steps ([] hides), releases", "glyph: a letter or short text on the icon" ] }, "examples": [ "download-1-demo", "download-1-simple" ], "url": "https://ui.ballmac.com/components/download-1" } }, { "name": "download-1-demo", "type": "registry:example", "title": "Download 1: Mac app download with release notes: Default", "description": "Default example of Download 1: Mac app download with release notes.", "registryDependencies": [ "https://ui.ballmac.com/r/download-1.json" ], "files": [ { "path": "registry/examples/download-1-demo.tsx", "type": "registry:example", "target": "@components/ballmac/examples/download-1-demo.tsx" } ], "categories": [ "blocks" ], "meta": { "example": true, "of": "download-1", "tier": "free" } }, { "name": "download-1-simple", "type": "registry:example", "title": "Download 1: Mac app download with release notes: One build, no notes", "description": "One build, no notes example of Download 1: Mac app download with release notes.", "registryDependencies": [ "https://ui.ballmac.com/r/download-1.json" ], "files": [ { "path": "registry/examples/download-1-simple.tsx", "type": "registry:example", "target": "@components/ballmac/examples/download-1-simple.tsx" } ], "categories": [ "blocks" ], "meta": { "example": true, "of": "download-1", "tier": "free" } }, { "name": "error-1", "type": "registry:block", "title": "Error 1: friendly 404, 403 and 500 page", "description": "An error page with giant fading numerals whose zero is a ring with an orbiting moon, plain-language copy per status, home and back buttons, site search and helpful links.", "author": "Ballmac ", "dependencies": [ "lucide-react", "motion@^12" ], "registryDependencies": [ "utils", "https://ui.ballmac.com/r/button.json", "https://ui.ballmac.com/r/search-field.json" ], "files": [ { "path": "registry/ballmac/components/blocks/error-1/error-1.tsx", "type": "registry:component", "target": "@components/ballmac/blocks/error-1/error-1.tsx" } ], "categories": [ "blocks", "error" ], "meta": { "schema": 1, "tier": "free", "tags": [ "error", "404", "not found", "500", "403", "page" ], "version": "1.0.0", "updated": "2026-10-01", "ai": { "summary": "Drop into not-found.tsx or error.tsx. Set status ('404' | '403' | '500'); override title and description if you like; pass onSearch to wire the search box, links for next steps and reference for a request id.", "whenToUse": [ "Next.js not-found.tsx and error.tsx", "Any missing, forbidden or failed page" ], "whenNotToUse": [ "Inline errors inside a form or panel (use alert or empty-state)" ], "composesWith": [ "header-2", "footer-2", "contact-1" ], "a11y": [ { "keys": "Page title", "action": "The heading is prefixed with 'Error 404:' for screen readers; the giant numerals are decorative" }, { "keys": "Enter in the search field", "action": "Calls onSearch with the query" } ], "customization": [ "status picks the numerals and default copy", "links: [] hides the cards, search: false hides the field", "The orbiting moon stops for reduced motion" ] }, "examples": [ "error-1-demo", "error-1-server" ], "url": "https://ui.ballmac.com/components/error-1" } }, { "name": "error-1-demo", "type": "registry:example", "title": "Error 1: friendly 404, 403 and 500 page: 404", "description": "404 example of Error 1: friendly 404, 403 and 500 page.", "registryDependencies": [ "https://ui.ballmac.com/r/error-1.json" ], "files": [ { "path": "registry/examples/error-1-demo.tsx", "type": "registry:example", "target": "@components/ballmac/examples/error-1-demo.tsx" } ], "categories": [ "blocks" ], "meta": { "example": true, "of": "error-1", "tier": "free" } }, { "name": "error-1-server", "type": "registry:example", "title": "Error 1: friendly 404, 403 and 500 page: 500 with reference", "description": "500 with reference example of Error 1: friendly 404, 403 and 500 page.", "registryDependencies": [ "https://ui.ballmac.com/r/error-1.json" ], "dependencies": [ "lucide-react" ], "files": [ { "path": "registry/examples/error-1-server.tsx", "type": "registry:example", "target": "@components/ballmac/examples/error-1-server.tsx" } ], "categories": [ "blocks" ], "meta": { "example": true, "of": "error-1", "tier": "free" } }, { "name": "faq-1", "type": "registry:block", "title": "FAQ 1: accordion with heading", "description": "Frequently asked questions in an accessible accordion, with the heading and a help line in a side column on desktop.", "author": "Ballmac ", "registryDependencies": [ "utils", "https://ui.ballmac.com/r/accordion.json" ], "files": [ { "path": "registry/ballmac/components/blocks/faq-1/faq-1.tsx", "type": "registry:component", "target": "@components/ballmac/blocks/faq-1/faq-1.tsx" } ], "categories": [ "blocks", "faq" ], "meta": { "schema": 1, "tier": "free", "tags": [ "faq", "accordion", "questions", "support" ], "version": "1.0.0", "updated": "2026-09-28", "ai": { "summary": "An FAQ section. Pass items=[{ question, answer }]; the first answer starts open.", "whenToUse": [ "Pricing pages and landing pages", "Support and onboarding pages" ], "whenNotToUse": [ "Long documentation (use a docs page)" ], "composesWith": [ "pricing-1", "cta-1" ], "a11y": [], "customization": [ "items: { question, answer }[]", "title and description props" ] }, "examples": [ "faq-1-demo" ], "url": "https://ui.ballmac.com/components/faq-1" } }, { "name": "faq-1-demo", "type": "registry:example", "title": "FAQ 1: accordion with heading: Default", "description": "Default example of FAQ 1: accordion with heading.", "registryDependencies": [ "https://ui.ballmac.com/r/faq-1.json" ], "files": [ { "path": "registry/examples/faq-1-demo.tsx", "type": "registry:example", "target": "@components/ballmac/examples/faq-1-demo.tsx" } ], "categories": [ "blocks" ], "meta": { "example": true, "of": "faq-1", "tier": "free" } }, { "name": "faq-2", "type": "registry:block", "title": "FAQ 2: searchable with topic filters", "description": "Frequently asked questions with live search that highlights matches, topic filters with counts, a friendly empty state and a support prompt. Topics scroll sideways on phones.", "author": "Ballmac ", "dependencies": [ "lucide-react" ], "registryDependencies": [ "utils", "https://ui.ballmac.com/r/accordion.json", "https://ui.ballmac.com/r/button.json", "https://ui.ballmac.com/r/search-field.json" ], "files": [ { "path": "registry/ballmac/components/blocks/faq-2/faq-2.tsx", "type": "registry:component", "target": "@components/ballmac/blocks/faq-2/faq-2.tsx" } ], "categories": [ "blocks", "faq" ], "meta": { "schema": 1, "tier": "free", "tags": [ "faq", "search", "accordion", "help", "support", "filter" ], "version": "1.0.0", "updated": "2026-10-01", "ai": { "summary": "A help-centre style FAQ. Pass categories=[{ name, questions: [{ question, answer }] }]; an All filter and search are built in.", "whenToUse": [ "More than eight questions across topics", "Pricing and product pages that attract many questions" ], "whenNotToUse": [ "A handful of questions (use faq-1)" ], "composesWith": [ "pricing-2", "pricing-3", "cta-1", "footer-1" ], "a11y": [ { "keys": "Enter / Space on a topic", "action": "Filters the list (aria-pressed)" }, { "keys": "Typing in search", "action": "Filters live; the result count is announced politely" } ], "customization": [ "categories: { name, questions: { question, answer }[] }[]", "support: { label, href, text? } (null to hide)" ] }, "examples": [ "faq-2-demo", "faq-2-compact" ], "url": "https://ui.ballmac.com/components/faq-2" } }, { "name": "faq-2-demo", "type": "registry:example", "title": "FAQ 2: searchable with topic filters: Default", "description": "Default example of FAQ 2: searchable with topic filters.", "registryDependencies": [ "https://ui.ballmac.com/r/faq-2.json" ], "files": [ { "path": "registry/examples/faq-2-demo.tsx", "type": "registry:example", "target": "@components/ballmac/examples/faq-2-demo.tsx" } ], "categories": [ "blocks" ], "meta": { "example": true, "of": "faq-2", "tier": "free" } }, { "name": "faq-2-compact", "type": "registry:example", "title": "FAQ 2: searchable with topic filters: Two topics", "description": "Two topics example of FAQ 2: searchable with topic filters.", "registryDependencies": [ "https://ui.ballmac.com/r/faq-2.json" ], "files": [ { "path": "registry/examples/faq-2-compact.tsx", "type": "registry:example", "target": "@components/ballmac/examples/faq-2-compact.tsx" } ], "categories": [ "blocks" ], "meta": { "example": true, "of": "faq-2", "tier": "free" } }, { "name": "features-1", "type": "registry:block", "title": "Features 1: bento grid", "description": "Bento feature grid of spotlight cards in two sizes, with an animated stat and keyboard-shortcut hints mixed in for texture.", "author": "Ballmac ", "dependencies": [ "lucide-react" ], "registryDependencies": [ "utils", "https://ui.ballmac.com/r/kbd.json", "https://ui.ballmac.com/r/number-ticker.json", "https://ui.ballmac.com/r/spotlight-card.json" ], "files": [ { "path": "registry/ballmac/components/blocks/features-1/features-1.tsx", "type": "registry:component", "target": "@components/ballmac/blocks/features-1/features-1.tsx" } ], "categories": [ "blocks", "features" ], "meta": { "schema": 1, "tier": "free", "tags": [ "features", "bento", "grid", "landing" ], "version": "1.0.0", "updated": "2026-09-28", "ai": { "summary": "A four-cell bento grid for a product's main features. Edit the cells directly; each is a SpotlightCard with an icon, title, body and optional extra content.", "whenToUse": [ "Showing 3–6 headline features with visual variety", "SaaS and developer product landing pages" ], "whenNotToUse": [ "Long lists of features (use features-2)" ], "composesWith": [ "hero-1", "pricing-1" ], "a11y": [], "customization": [ "eyebrow, title, description props", "Change cells, spans (md:col-span-2) and icons in the source" ] }, "examples": [ "features-1-demo" ], "url": "https://ui.ballmac.com/components/features-1" } }, { "name": "features-1-demo", "type": "registry:example", "title": "Features 1: bento grid: Default", "description": "Default example of Features 1: bento grid.", "registryDependencies": [ "https://ui.ballmac.com/r/features-1.json" ], "files": [ { "path": "registry/examples/features-1-demo.tsx", "type": "registry:example", "target": "@components/ballmac/examples/features-1-demo.tsx" } ], "categories": [ "blocks" ], "meta": { "example": true, "of": "features-1", "tier": "free" } }, { "name": "features-2", "type": "registry:block", "title": "Features 2: numbered icon grid", "description": "Six features in a hairline grid of numbered cells with an icon, title and one sentence each. Pass your own features array.", "author": "Ballmac ", "dependencies": [ "lucide-react" ], "registryDependencies": [ "utils" ], "files": [ { "path": "registry/ballmac/components/blocks/features-2/features-2.tsx", "type": "registry:component", "target": "@components/ballmac/blocks/features-2/features-2.tsx" } ], "categories": [ "blocks", "features" ], "meta": { "schema": 1, "tier": "free", "tags": [ "features", "grid", "icons", "landing" ], "version": "1.0.0", "updated": "2026-09-28", "ai": { "summary": "A calm, scannable grid for 3–9 features. Pass features=[{ icon, title, body }] with lucide icons.", "whenToUse": [ "Listing several product benefits evenly", "Developer tools and libraries" ], "whenNotToUse": [ "Two or three features that need visuals (use features-1)" ], "composesWith": [ "hero-2", "cta-1" ], "a11y": [], "customization": [ "features: { icon, title, body }[]", "eyebrow and title props" ] }, "examples": [ "features-2-demo" ], "url": "https://ui.ballmac.com/components/features-2" } }, { "name": "features-2-demo", "type": "registry:example", "title": "Features 2: numbered icon grid: Default", "description": "Default example of Features 2: numbered icon grid.", "registryDependencies": [ "https://ui.ballmac.com/r/features-2.json" ], "files": [ { "path": "registry/examples/features-2-demo.tsx", "type": "registry:example", "target": "@components/ballmac/examples/features-2-demo.tsx" } ], "categories": [ "blocks" ], "meta": { "example": true, "of": "features-2", "tier": "free" } }, { "name": "features-3", "type": "registry:block", "title": "Features 3: integrations hub with beams", "description": "Integrations section: heading, description and checked benefits beside a hub diagram where animated beams flow between your product and six tools.", "author": "Ballmac ", "dependencies": [ "lucide-react" ], "registryDependencies": [ "utils", "https://ui.ballmac.com/r/animated-beam.json" ], "files": [ { "path": "registry/ballmac/components/blocks/features-3/features-3.tsx", "type": "registry:component", "target": "@components/ballmac/blocks/features-3/features-3.tsx" } ], "categories": [ "blocks", "features" ], "meta": { "schema": 1, "tier": "free", "tags": [ "features", "integrations", "animated beam", "diagram" ], "version": "1.0.0", "updated": "2026-09-29", "ai": { "summary": "Explains integrations or data flow. Pass up to six `integrations` ({ name, icon }) and set hubIcon/hubLabel for your product.", "whenToUse": [ "Integrations or connectors pages", "Showing that a product sits between many tools (AI agents, automation, sync)" ], "whenNotToUse": [ "Listing more than six integrations (use a logo grid)" ], "composesWith": [ "hero-4", "features-1", "cta-2" ], "a11y": [], "customization": [ "eyebrow, title, description, points", "integrations, hubIcon, hubLabel" ] }, "examples": [ "features-3-demo" ], "url": "https://ui.ballmac.com/components/features-3" } }, { "name": "features-3-demo", "type": "registry:example", "title": "Features 3: integrations hub with beams: Default", "description": "Default example of Features 3: integrations hub with beams.", "registryDependencies": [ "https://ui.ballmac.com/r/features-3.json" ], "files": [ { "path": "registry/examples/features-3-demo.tsx", "type": "registry:example", "target": "@components/ballmac/examples/features-3-demo.tsx" } ], "categories": [ "blocks" ], "meta": { "example": true, "of": "features-3", "tier": "free" } }, { "name": "features-4", "type": "registry:block", "title": "Features 4: Mac app bento", "description": "Bento feature grid for a desktop app: menu bar companion, keyboard shortcuts, privacy, iCloud sync and notifications, each with a small live visual.", "author": "Ballmac ", "dependencies": [ "lucide-react" ], "registryDependencies": [ "utils", "https://ui.ballmac.com/r/bento-grid.json", "https://ui.ballmac.com/r/kbd.json" ], "files": [ { "path": "registry/ballmac/components/blocks/features-4/features-4.tsx", "type": "registry:component", "target": "@components/ballmac/blocks/features-4/features-4.tsx" } ], "categories": [ "blocks", "features" ], "meta": { "schema": 1, "tier": "free", "tags": [ "features", "bento", "mac app", "desktop" ], "version": "1.0.0", "updated": "2026-09-29", "ai": { "summary": "Feature section for Mac or desktop apps. Edit eyebrow/title/description props; change the five BentoCards and their visuals in the source to match your features.", "whenToUse": [ "Desktop or Mac app landing pages", "Showing five features with visuals instead of icons" ], "whenNotToUse": [ "Web SaaS feature lists (use features-1 or features-2)" ], "composesWith": [ "hero-5", "pricing-1", "testimonials-1" ], "a11y": [], "customization": [ "eyebrow, title, description props", "BentoCard title, description, icon and background visual per feature" ] }, "examples": [ "features-4-demo" ], "url": "https://ui.ballmac.com/components/features-4" } }, { "name": "features-4-demo", "type": "registry:example", "title": "Features 4: Mac app bento: Default", "description": "Default example of Features 4: Mac app bento.", "registryDependencies": [ "https://ui.ballmac.com/r/features-4.json" ], "files": [ { "path": "registry/examples/features-4-demo.tsx", "type": "registry:example", "target": "@components/ballmac/examples/features-4-demo.tsx" } ], "categories": [ "blocks" ], "meta": { "example": true, "of": "features-4", "tier": "free" } }, { "name": "features-5", "type": "registry:block", "title": "Features 5: scrolling product tour", "description": "Numbered steps on the left; as each scrolls into view, a sticky panel on the right crossfades to its picture. On phones every step carries its own picture.", "author": "Ballmac ", "dependencies": [ "lucide-react", "motion@^12" ], "registryDependencies": [ "utils", "https://ui.ballmac.com/r/avatar.json", "https://ui.ballmac.com/r/badge.json", "https://ui.ballmac.com/r/media.json" ], "files": [ { "path": "registry/ballmac/components/blocks/features-5/features-5.tsx", "type": "registry:component", "target": "@components/ballmac/blocks/features-5/features-5.tsx" } ], "categories": [ "blocks", "features" ], "meta": { "schema": 1, "tier": "free", "tags": [ "features", "tour", "sticky", "scroll", "steps", "how it works" ], "version": "1.0.0", "updated": "2026-10-01", "ai": { "summary": "A how-it-works section that shows the product as you read. Pass steps=[{ title, description, points?, visual }] where visual is any ReactNode.", "whenToUse": [ "Explaining a workflow in three to five steps", "Products where each step has a distinct screen" ], "whenNotToUse": [ "Long feature lists (use features-2)", "Pages without room to scroll" ], "composesWith": [ "hero-7", "logo-cloud-1", "testimonials-1", "cta-1" ], "a11y": [ { "keys": "Scroll", "action": "The picture is decorative and hidden from assistive technology, so every step must state what it shows in text" } ], "customization": [ "steps: { title, description, points?, visual }[]", "eyebrow, title, description props" ] }, "examples": [ "features-5-demo", "features-5-custom" ], "url": "https://ui.ballmac.com/components/features-5" } }, { "name": "features-5-demo", "type": "registry:example", "title": "Features 5: scrolling product tour: Default", "description": "Default example of Features 5: scrolling product tour.", "registryDependencies": [ "https://ui.ballmac.com/r/features-5.json" ], "files": [ { "path": "registry/examples/features-5-demo.tsx", "type": "registry:example", "target": "@components/ballmac/examples/features-5-demo.tsx" } ], "categories": [ "blocks" ], "meta": { "example": true, "of": "features-5", "tier": "free" } }, { "name": "features-5-custom", "type": "registry:example", "title": "Features 5: scrolling product tour: Custom steps", "description": "Custom steps example of Features 5: scrolling product tour.", "registryDependencies": [ "https://ui.ballmac.com/r/features-5.json" ], "files": [ { "path": "registry/examples/features-5-custom.tsx", "type": "registry:example", "target": "@components/ballmac/examples/features-5-custom.tsx" } ], "categories": [ "blocks" ], "meta": { "example": true, "of": "features-5", "tier": "free" } }, { "name": "features-6", "type": "registry:block", "title": "Features 6: tabbed showcase", "description": "Pill tabs with a sliding indicator switch between feature panels: heading, checked points and link beside a product picture. Tabs scroll sideways on phones.", "author": "Ballmac ", "dependencies": [ "lucide-react" ], "registryDependencies": [ "utils", "https://ui.ballmac.com/r/animated-tabs.json", "https://ui.ballmac.com/r/badge.json", "https://ui.ballmac.com/r/media.json" ], "files": [ { "path": "registry/ballmac/components/blocks/features-6/features-6.tsx", "type": "registry:component", "target": "@components/ballmac/blocks/features-6/features-6.tsx" } ], "categories": [ "blocks", "features" ], "meta": { "schema": 1, "tier": "free", "tags": [ "features", "tabs", "showcase", "panels", "product" ], "version": "1.0.0", "updated": "2026-10-01", "ai": { "summary": "A compact way to show several feature areas without a long scroll. Pass tabs=[{ value, label, icon?, title, description, points?, link?, visual }].", "whenToUse": [ "Four to six equal feature areas", "Pages that need to stay short" ], "whenNotToUse": [ "A single story told in order (use features-5)" ], "composesWith": [ "hero-6", "logo-cloud-1", "pricing-2", "cta-1" ], "a11y": [ { "keys": "Arrow Left / Right", "action": "Moves between tabs and shows the panel" }, { "keys": "Tab", "action": "Moves from the tab list into the panel" } ], "customization": [ "tabs: { value, label, icon?, title, description, points?, link?, visual }[]", "defaultValue: the tab selected first" ] }, "examples": [ "features-6-demo", "features-6-two" ], "url": "https://ui.ballmac.com/components/features-6" } }, { "name": "features-6-demo", "type": "registry:example", "title": "Features 6: tabbed showcase: Default", "description": "Default example of Features 6: tabbed showcase.", "registryDependencies": [ "https://ui.ballmac.com/r/features-6.json" ], "files": [ { "path": "registry/examples/features-6-demo.tsx", "type": "registry:example", "target": "@components/ballmac/examples/features-6-demo.tsx" } ], "categories": [ "blocks" ], "meta": { "example": true, "of": "features-6", "tier": "free" } }, { "name": "features-6-two", "type": "registry:example", "title": "Features 6: tabbed showcase: Two tabs", "description": "Two tabs example of Features 6: tabbed showcase.", "registryDependencies": [ "https://ui.ballmac.com/r/features-6.json" ], "dependencies": [ "lucide-react" ], "files": [ { "path": "registry/examples/features-6-two.tsx", "type": "registry:example", "target": "@components/ballmac/examples/features-6-two.tsx" } ], "categories": [ "blocks" ], "meta": { "example": true, "of": "features-6", "tier": "free" } }, { "name": "features-7", "type": "registry:block", "title": "Features 7: menu bar app tour", "description": "A feature picker for menu bar apps: choose a feature and a miniature desktop shows the app's panel hanging from its menu bar icon, with quick capture, clipboard history, a focus timer and shortcuts drawn from tokens.", "author": "Ballmac ", "dependencies": [ "lucide-react", "motion@^12", "radix-ui" ], "registryDependencies": [ "utils", "https://ui.ballmac.com/r/kbd.json", "https://ui.ballmac.com/r/media.json" ], "files": [ { "path": "registry/ballmac/components/blocks/features-7/features-7.tsx", "type": "registry:component", "target": "@components/ballmac/blocks/features-7/features-7.tsx" } ], "categories": [ "blocks", "features" ], "meta": { "schema": 1, "tier": "free", "tags": [ "features", "menu bar", "mac", "tour", "shortcuts", "panel", "utility" ], "version": "1.0.0", "updated": "2026-10-01", "ai": { "summary": "For menu bar and utility apps. Pass features=[{ id, title, description, keys?, icon?, panel }] where panel is the UI that hangs from the menu bar icon; time sets the clock in the mock menu bar.", "whenToUse": [ "Menu bar utilities and background apps", "Anything the user reaches with a shortcut" ], "whenNotToUse": [ "Window-based apps (use features-4 or showcase-1)" ], "composesWith": [ "hero-5", "showcase-1", "download-1", "pricing-4" ], "a11y": [ { "keys": "Arrow Up / Down", "action": "Moves between features and selects; the list is a radio group" }, { "keys": "Shortcuts", "action": "Each feature spells its shortcut out for screen readers; the miniature desktop is hidden from assistive technology" }, { "keys": "Reduced motion", "action": "Panels swap without animation" } ], "customization": [ "features: panel is any node; keys are shown as keycaps", "defaultValue, time" ] }, "examples": [ "features-7-demo", "features-7-two" ], "url": "https://ui.ballmac.com/components/features-7" } }, { "name": "features-7-demo", "type": "registry:example", "title": "Features 7: menu bar app tour: Default", "description": "Default example of Features 7: menu bar app tour.", "registryDependencies": [ "https://ui.ballmac.com/r/features-7.json" ], "files": [ { "path": "registry/examples/features-7-demo.tsx", "type": "registry:example", "target": "@components/ballmac/examples/features-7-demo.tsx" } ], "categories": [ "blocks" ], "meta": { "example": true, "of": "features-7", "tier": "free" } }, { "name": "features-7-two", "type": "registry:example", "title": "Features 7: menu bar app tour: Two features", "description": "Two features example of Features 7: menu bar app tour.", "registryDependencies": [ "https://ui.ballmac.com/r/features-7.json" ], "dependencies": [ "lucide-react" ], "files": [ { "path": "registry/examples/features-7-two.tsx", "type": "registry:example", "target": "@components/ballmac/examples/features-7-two.tsx" } ], "categories": [ "blocks" ], "meta": { "example": true, "of": "features-7", "tier": "free" } }, { "name": "footer-1", "type": "registry:block", "title": "Footer 1: columns with newsletter", "description": "Site footer with brand and tagline, an optional newsletter form, up to four link columns and a legal bar.", "author": "Ballmac ", "registryDependencies": [ "utils", "https://ui.ballmac.com/r/button.json", "https://ui.ballmac.com/r/input.json" ], "files": [ { "path": "registry/ballmac/components/blocks/footer-1/footer-1.tsx", "type": "registry:component", "target": "@components/ballmac/blocks/footer-1/footer-1.tsx" } ], "categories": [ "blocks", "footer" ], "meta": { "schema": 1, "tier": "free", "tags": [ "footer", "newsletter", "navigation", "links" ], "version": "1.0.0", "updated": "2026-09-28", "ai": { "summary": "The bottom of every marketing page. Pass groups of links; pass onSubscribe to show the newsletter form (you handle the email).", "whenToUse": [ "Marketing sites and landing pages" ], "whenNotToUse": [ "App screens behind login (keep chrome minimal)" ], "composesWith": [ "header-1", "cta-1" ], "a11y": [], "customization": [ "groups: { title, links: { label, href }[] }[]", "brand, tagline, legal props", "onSubscribe(email) shows the newsletter form" ] }, "examples": [ "footer-1-demo" ], "url": "https://ui.ballmac.com/components/footer-1" } }, { "name": "footer-1-demo", "type": "registry:example", "title": "Footer 1: columns with newsletter: Default", "description": "Default example of Footer 1: columns with newsletter.", "registryDependencies": [ "https://ui.ballmac.com/r/footer-1.json" ], "files": [ { "path": "registry/examples/footer-1-demo.tsx", "type": "registry:example", "target": "@components/ballmac/examples/footer-1-demo.tsx" } ], "categories": [ "blocks" ], "meta": { "example": true, "of": "footer-1", "tier": "free" } }, { "name": "footer-2", "type": "registry:block", "title": "Footer 2: giant wordmark", "description": "Brand, tagline and a live status pill beside three link columns, a legal bar with icon links, and an oversized wordmark that sinks into a fading gradient along the bottom.", "author": "Ballmac ", "dependencies": [ "lucide-react" ], "registryDependencies": [ "utils", "https://ui.ballmac.com/r/status-dot.json" ], "files": [ { "path": "registry/ballmac/components/blocks/footer-2/footer-2.tsx", "type": "registry:component", "target": "@components/ballmac/blocks/footer-2/footer-2.tsx" } ], "categories": [ "blocks", "footer" ], "meta": { "schema": 1, "tier": "free", "tags": [ "footer", "wordmark", "links", "status", "brand" ], "version": "1.0.0", "updated": "2026-10-01", "ai": { "summary": "A confident site footer. Pass columns, socials, legal and legalLinks; the wordmark scales to the footer width from its length.", "whenToUse": [ "Brand-led marketing sites", "Pages that end with a big visual moment" ], "whenNotToUse": [ "Footers that need a newsletter form (use footer-1)" ], "composesWith": [ "cta-3", "cta-1", "faq-2", "header-2" ], "a11y": [], "customization": [ "wordmark: text for the big word (defaults to brand)", "status: null hides the pill", "columns / socials / legalLinks" ] }, "examples": [ "footer-2-demo", "footer-2-long" ], "url": "https://ui.ballmac.com/components/footer-2" } }, { "name": "footer-2-demo", "type": "registry:example", "title": "Footer 2: giant wordmark: Default", "description": "Default example of Footer 2: giant wordmark.", "registryDependencies": [ "https://ui.ballmac.com/r/footer-2.json" ], "files": [ { "path": "registry/examples/footer-2-demo.tsx", "type": "registry:example", "target": "@components/ballmac/examples/footer-2-demo.tsx" } ], "categories": [ "blocks" ], "meta": { "example": true, "of": "footer-2", "tier": "free" } }, { "name": "footer-2-long", "type": "registry:example", "title": "Footer 2: giant wordmark: Long brand name", "description": "Long brand name example of Footer 2: giant wordmark.", "registryDependencies": [ "https://ui.ballmac.com/r/footer-2.json" ], "files": [ { "path": "registry/examples/footer-2-long.tsx", "type": "registry:example", "target": "@components/ballmac/examples/footer-2-long.tsx" } ], "categories": [ "blocks" ], "meta": { "example": true, "of": "footer-2", "tier": "free" } }, { "name": "forgot-password-1", "type": "registry:block", "title": "Forgot Password 1: request, resend and reset", "description": "The whole password-recovery flow in one card: request a link, check-your-email with a resend countdown, choose a new password with confirmation and strength, and a success screen. Focus moves to each new heading.", "author": "Ballmac ", "dependencies": [ "lucide-react" ], "registryDependencies": [ "utils", "https://ui.ballmac.com/r/button.json", "https://ui.ballmac.com/r/field.json", "https://ui.ballmac.com/r/input.json", "https://ui.ballmac.com/r/password-input.json" ], "files": [ { "path": "registry/ballmac/components/blocks/forgot-password-1/forgot-password-1.tsx", "type": "registry:component", "target": "@components/ballmac/blocks/forgot-password-1/forgot-password-1.tsx" } ], "categories": [ "blocks", "auth" ], "meta": { "schema": 1, "tier": "free", "tags": [ "forgot password", "reset password", "auth", "recovery", "email", "countdown" ], "version": "1.0.0", "updated": "2026-10-01", "ai": { "summary": "Use it on /forgot-password (initialView 'request') and on the page the emailed link opens (initialView 'reset'). Pass onRequest(email) and onReset(password); throw to show an error.", "whenToUse": [ "Any app with passwords", "The page an emailed reset link opens" ], "whenNotToUse": [ "Passwordless-only products" ], "composesWith": [ "login-2", "login-1", "verify-1" ], "a11y": [ { "keys": "Screen changes", "action": "Focus moves to the new heading so the change is announced" }, { "keys": "Resend", "action": "The countdown is announced politely; the button is disabled until it ends" } ], "customization": [ "initialView: 'request' | 'sent' | 'reset' | 'done'", "onRequest / onReset async handlers", "resendAfter: cooldown in seconds" ] }, "examples": [ "forgot-password-1-demo", "forgot-password-1-reset" ], "url": "https://ui.ballmac.com/components/forgot-password-1" } }, { "name": "forgot-password-1-demo", "type": "registry:example", "title": "Forgot Password 1: request, resend and reset: Request a link", "description": "Request a link example of Forgot Password 1: request, resend and reset.", "registryDependencies": [ "https://ui.ballmac.com/r/forgot-password-1.json" ], "files": [ { "path": "registry/examples/forgot-password-1-demo.tsx", "type": "registry:example", "target": "@components/ballmac/examples/forgot-password-1-demo.tsx" } ], "categories": [ "blocks" ], "meta": { "example": true, "of": "forgot-password-1", "tier": "free" } }, { "name": "forgot-password-1-reset", "type": "registry:example", "title": "Forgot Password 1: request, resend and reset: Choose a new password", "description": "Choose a new password example of Forgot Password 1: request, resend and reset.", "registryDependencies": [ "https://ui.ballmac.com/r/forgot-password-1.json" ], "files": [ { "path": "registry/examples/forgot-password-1-reset.tsx", "type": "registry:example", "target": "@components/ballmac/examples/forgot-password-1-reset.tsx" } ], "categories": [ "blocks" ], "meta": { "example": true, "of": "forgot-password-1", "tier": "free" } }, { "name": "header-1", "type": "registry:block", "title": "Header 1: sticky with mobile menu", "description": "Sticky site header with brand, main links, sign-in and primary action, and an accessible mobile menu that closes on Escape or link tap.", "author": "Ballmac ", "dependencies": [ "lucide-react" ], "registryDependencies": [ "utils", "https://ui.ballmac.com/r/button.json" ], "files": [ { "path": "registry/ballmac/components/blocks/header-1/header-1.tsx", "type": "registry:component", "target": "@components/ballmac/blocks/header-1/header-1.tsx" } ], "categories": [ "blocks", "header" ], "meta": { "schema": 1, "tier": "free", "tags": [ "header", "navbar", "navigation", "mobile menu" ], "version": "1.0.0", "updated": "2026-09-28", "ai": { "summary": "The top navigation bar for a marketing site. Pass links and the two actions; it handles the mobile menu.", "whenToUse": [ "Marketing sites and landing pages", "Docs sites with a few top-level sections" ], "whenNotToUse": [ "Apps with deep navigation (use a sidebar)" ], "composesWith": [ "hero-1", "hero-2", "footer-1" ], "a11y": [ { "keys": "Enter / Space on the menu button", "action": "Opens or closes the mobile menu" }, { "keys": "Escape", "action": "Closes the mobile menu" } ], "customization": [ "brand, brandHref, links, secondaryAction, primaryAction props", "sticky: false for a static header" ] }, "examples": [ "header-1-demo" ], "url": "https://ui.ballmac.com/components/header-1" } }, { "name": "header-1-demo", "type": "registry:example", "title": "Header 1: sticky with mobile menu: Default", "description": "Default example of Header 1: sticky with mobile menu.", "registryDependencies": [ "https://ui.ballmac.com/r/header-1.json" ], "files": [ { "path": "registry/examples/header-1-demo.tsx", "type": "registry:example", "target": "@components/ballmac/examples/header-1-demo.tsx" } ], "categories": [ "blocks" ], "meta": { "example": true, "of": "header-1", "tier": "free" } }, { "name": "header-2", "type": "registry:block", "title": "Header 2: mega menu with mobile sheet", "description": "Sticky header with brand, a mega menu of grouped links and a featured card, sign-in and primary actions. On phones the same links open in a slide-in sheet with accordions.", "author": "Ballmac ", "dependencies": [ "lucide-react" ], "registryDependencies": [ "utils", "https://ui.ballmac.com/r/button.json", "https://ui.ballmac.com/r/mega-menu.json", "https://ui.ballmac.com/r/sheet.json" ], "files": [ { "path": "registry/ballmac/components/blocks/header-2/header-2.tsx", "type": "registry:component", "target": "@components/ballmac/blocks/header-2/header-2.tsx" } ], "categories": [ "blocks", "header" ], "meta": { "schema": 1, "tier": "free", "tags": [ "header", "navbar", "mega menu", "navigation", "sheet", "mobile" ], "version": "1.0.0", "updated": "2026-10-01", "ai": { "summary": "A navigation header for products with many pages. Pass items (the same shape as mega-menu), brand, logo, secondaryAction and primaryAction.", "whenToUse": [ "Sites with several product areas", "Anything that outgrew four top-level links" ], "whenNotToUse": [ "Simple sites with a few links (use header-1)" ], "composesWith": [ "hero-6", "hero-7", "footer-2", "template-launch" ], "a11y": [ { "keys": "Arrow Left / Right", "action": "Moves between menu triggers" }, { "keys": "Arrow Down / Enter", "action": "Opens a panel" }, { "keys": "Escape", "action": "Closes a panel or the mobile sheet and returns focus" } ], "customization": [ "items: MegaMenuItem[] (links, or panels with columns and a featured card)", "logo, brand, brandHref", "sticky: false for a static header" ] }, "examples": [ "header-2-demo", "header-2-simple" ], "url": "https://ui.ballmac.com/components/header-2" } }, { "name": "header-2-demo", "type": "registry:example", "title": "Header 2: mega menu with mobile sheet: Default", "description": "Default example of Header 2: mega menu with mobile sheet.", "registryDependencies": [ "https://ui.ballmac.com/r/header-2.json" ], "files": [ { "path": "registry/examples/header-2-demo.tsx", "type": "registry:example", "target": "@components/ballmac/examples/header-2-demo.tsx" } ], "categories": [ "blocks" ], "meta": { "example": true, "of": "header-2", "tier": "free" } }, { "name": "header-2-simple", "type": "registry:example", "title": "Header 2: mega menu with mobile sheet: Simple links", "description": "Simple links example of Header 2: mega menu with mobile sheet.", "registryDependencies": [ "https://ui.ballmac.com/r/header-2.json" ], "files": [ { "path": "registry/examples/header-2-simple.tsx", "type": "registry:example", "target": "@components/ballmac/examples/header-2-simple.tsx" } ], "categories": [ "blocks" ], "meta": { "example": true, "of": "header-2", "tier": "free" } }, { "name": "hero-1", "type": "registry:block", "title": "Hero 1: split with product visual", "description": "Split hero: badge, word-by-word headline, two calls to action and proof points on the left, a live product summary card on the right, over an animated grid.", "author": "Ballmac ", "dependencies": [ "lucide-react" ], "registryDependencies": [ "utils", "https://ui.ballmac.com/r/animated-grid.json", "https://ui.ballmac.com/r/badge.json", "https://ui.ballmac.com/r/button.json", "https://ui.ballmac.com/r/number-ticker.json", "https://ui.ballmac.com/r/text-reveal.json", "https://ui.ballmac.com/r/media.json" ], "files": [ { "path": "registry/ballmac/components/blocks/hero-1/hero-1.tsx", "type": "registry:component", "target": "@components/ballmac/blocks/hero-1/hero-1.tsx" } ], "categories": [ "blocks", "hero" ], "meta": { "schema": 1, "tier": "free", "tags": [ "hero", "landing", "saas", "split" ], "version": "1.0.0", "updated": "2026-09-28", "ai": { "summary": "The top section of a SaaS or product landing page. Edit the props for copy and swap HeroVisual for your own product screenshot or component.", "whenToUse": [ "Landing pages with a product to show", "Launch pages that need a clear primary action" ], "whenNotToUse": [ "Developer tools where the install command is the hero (use hero-2)", "AI products where a live prompt sells best (use hero-3)" ], "composesWith": [ "header-1", "features-1", "cta-1" ], "a11y": [], "customization": [ "eyebrow, title, description, primaryAction, secondaryAction, highlights props", "Replace HeroVisual with an image or live component" ] }, "examples": [ "hero-1-demo" ], "url": "https://ui.ballmac.com/components/hero-1" } }, { "name": "hero-1-demo", "type": "registry:example", "title": "Hero 1: split with product visual: Default", "description": "Default example of Hero 1: split with product visual.", "registryDependencies": [ "https://ui.ballmac.com/r/hero-1.json" ], "files": [ { "path": "registry/examples/hero-1-demo.tsx", "type": "registry:example", "target": "@components/ballmac/examples/hero-1-demo.tsx" } ], "categories": [ "blocks" ], "meta": { "example": true, "of": "hero-1", "tier": "free" } }, { "name": "hero-2", "type": "registry:block", "title": "Hero 2: developer tool with install command", "description": "Centered hero for developer tools: headline, two actions, package-manager install tabs and a terminal window with a light beam tracing its border.", "author": "Ballmac ", "dependencies": [ "lucide-react" ], "registryDependencies": [ "utils", "https://ui.ballmac.com/r/border-beam.json", "https://ui.ballmac.com/r/button.json", "https://ui.ballmac.com/r/install-tabs.json", "https://ui.ballmac.com/r/terminal.json", "https://ui.ballmac.com/r/text-reveal.json" ], "files": [ { "path": "registry/ballmac/components/blocks/hero-2/hero-2.tsx", "type": "registry:component", "target": "@components/ballmac/blocks/hero-2/hero-2.tsx" } ], "categories": [ "blocks", "hero" ], "meta": { "schema": 1, "tier": "free", "tags": [ "hero", "developer", "cli", "open source", "install" ], "version": "1.0.0", "updated": "2026-09-28", "ai": { "summary": "The top section for a CLI, SDK or library: the install command is the call to action. Set `command` to your package's command without the runner.", "whenToUse": [ "Developer tools, SDKs and open-source libraries", "Pages where installing is the first step" ], "whenNotToUse": [ "Consumer or visual products (use hero-1)" ], "composesWith": [ "header-1", "features-2", "footer-1" ], "a11y": [], "customization": [ "command: e.g. \"shadcn@latest add @ballmac/button\"", "eyebrow, title, description and action props", "Replace the terminal lines with your tool's output" ] }, "examples": [ "hero-2-demo" ], "url": "https://ui.ballmac.com/components/hero-2" } }, { "name": "hero-2-demo", "type": "registry:example", "title": "Hero 2: developer tool with install command: Default", "description": "Default example of Hero 2: developer tool with install command.", "registryDependencies": [ "https://ui.ballmac.com/r/hero-2.json" ], "files": [ { "path": "registry/examples/hero-2-demo.tsx", "type": "registry:example", "target": "@components/ballmac/examples/hero-2-demo.tsx" } ], "categories": [ "blocks" ], "meta": { "example": true, "of": "hero-2", "tier": "free" } }, { "name": "hero-3", "type": "registry:block", "title": "Hero 3: AI product with live prompt", "description": "Hero for AI products: a real prompt input on the left, and on the right a mock answer with a reasoning panel, a tool call and a streaming reply.", "author": "Ballmac ", "dependencies": [ "lucide-react" ], "registryDependencies": [ "utils", "https://ui.ballmac.com/r/badge.json", "https://ui.ballmac.com/r/prompt-input.json", "https://ui.ballmac.com/r/reasoning-disclosure.json", "https://ui.ballmac.com/r/streaming-text.json", "https://ui.ballmac.com/r/tool-call-card.json", "https://ui.ballmac.com/r/media.json" ], "files": [ { "path": "registry/ballmac/components/blocks/hero-3/hero-3.tsx", "type": "registry:component", "target": "@components/ballmac/blocks/hero-3/hero-3.tsx" } ], "categories": [ "blocks", "hero" ], "meta": { "schema": 1, "tier": "free", "tags": [ "hero", "ai", "assistant", "prompt", "agent" ], "version": "1.0.0", "updated": "2026-09-28", "ai": { "summary": "Top section for an AI assistant or agent product. The prompt is real: handle onSubmit (e.g. send visitors to sign-up with their question).", "whenToUse": [ "AI assistants, copilots and agents", "Products whose value is best shown as a question and answer" ], "whenNotToUse": [ "Products without a conversational interface (use hero-1)" ], "composesWith": [ "ai-chat-1", "features-1", "pricing-1" ], "a11y": [], "customization": [ "eyebrow, title, description, placeholder props", "onSubmit(value) to capture the visitor's question", "Change the demo answer, reasoning and tool call to match your product" ] }, "examples": [ "hero-3-demo" ], "url": "https://ui.ballmac.com/components/hero-3" } }, { "name": "hero-3-demo", "type": "registry:example", "title": "Hero 3: AI product with live prompt: Default", "description": "Default example of Hero 3: AI product with live prompt.", "registryDependencies": [ "https://ui.ballmac.com/r/hero-3.json" ], "files": [ { "path": "registry/examples/hero-3-demo.tsx", "type": "registry:example", "target": "@components/ballmac/examples/hero-3-demo.tsx" } ], "categories": [ "blocks" ], "meta": { "example": true, "of": "hero-3", "tier": "free" } }, { "name": "hero-4", "type": "registry:block", "title": "Hero 4: split with interactive globe", "description": "Split hero with a live pill, headline, two actions and headline stats beside a large draggable WebGL globe marking your regions.", "author": "Ballmac ", "dependencies": [ "lucide-react" ], "registryDependencies": [ "utils", "https://ui.ballmac.com/r/button.json", "https://ui.ballmac.com/r/globe.json", "https://ui.ballmac.com/r/media.json" ], "files": [ { "path": "registry/ballmac/components/blocks/hero-4/hero-4.tsx", "type": "registry:component", "target": "@components/ballmac/blocks/hero-4/hero-4.tsx" } ], "categories": [ "blocks", "hero" ], "meta": { "schema": 1, "tier": "free", "tags": [ "hero", "globe", "infrastructure", "landing", "3d" ], "version": "1.0.0", "updated": "2026-09-29", "ai": { "summary": "Top-of-page hero for global or infrastructure products. Edit announcement, title, description, actions, stats and globe markers ([lat, long]).", "whenToUse": [ "Infrastructure, hosting, edge or global-reach products", "Companies with offices or users worldwide" ], "whenNotToUse": [ "Products where geography doesn't matter (use hero-1 or hero-2)" ], "composesWith": [ "header-1", "logo-cloud-1", "features-3" ], "a11y": [], "customization": [ "markers: [{ location: [lat, long], size }]", "stats: up to three { value, label }" ] }, "examples": [ "hero-4-demo" ], "url": "https://ui.ballmac.com/components/hero-4" } }, { "name": "hero-4-demo", "type": "registry:example", "title": "Hero 4: split with interactive globe: Default", "description": "Default example of Hero 4: split with interactive globe.", "registryDependencies": [ "https://ui.ballmac.com/r/hero-4.json" ], "files": [ { "path": "registry/examples/hero-4-demo.tsx", "type": "registry:example", "target": "@components/ballmac/examples/hero-4-demo.tsx" } ], "categories": [ "blocks" ], "meta": { "example": true, "of": "hero-4", "tier": "free" } }, { "name": "hero-5", "type": "registry:block", "title": "Hero 5: Mac app with opening laptop", "description": "Centered hero for a Mac app: shiny highlighted headline, download button and requirements, over a laptop whose lid opens into view on a live app window.", "author": "Ballmac ", "dependencies": [ "lucide-react" ], "registryDependencies": [ "utils", "https://ui.ballmac.com/r/button.json", "https://ui.ballmac.com/r/gradient-text.json", "https://ui.ballmac.com/r/laptop-frame.json", "https://ui.ballmac.com/r/mac-window.json" ], "files": [ { "path": "registry/ballmac/components/blocks/hero-5/hero-5.tsx", "type": "registry:component", "target": "@components/ballmac/blocks/hero-5/hero-5.tsx" } ], "categories": [ "blocks", "hero" ], "meta": { "schema": 1, "tier": "free", "tags": [ "hero", "mac app", "download", "laptop", "product" ], "version": "1.0.0", "updated": "2026-09-29", "ai": { "summary": "Top of a desktop-app landing page. Edit title, highlight, description, actions and requirements; pass `screen` (an image or your UI) to replace the sample app window.", "whenToUse": [ "Landing pages for Mac or desktop apps", "Products whose UI is the selling point" ], "whenNotToUse": [ "Web SaaS without a desktop app (use hero-1)", "Mobile apps (compose phone-frame instead)" ], "composesWith": [ "header-1", "features-4", "pricing-1", "template-ledger" ], "a11y": [], "customization": [ "title + highlight (shiny gradient)", "screen: any ReactNode laid out at 1280px wide and scaled" ] }, "examples": [ "hero-5-demo" ], "url": "https://ui.ballmac.com/components/hero-5" } }, { "name": "hero-5-demo", "type": "registry:example", "title": "Hero 5: Mac app with opening laptop: Default", "description": "Default example of Hero 5: Mac app with opening laptop.", "registryDependencies": [ "https://ui.ballmac.com/r/hero-5.json" ], "files": [ { "path": "registry/examples/hero-5-demo.tsx", "type": "registry:example", "target": "@components/ballmac/examples/hero-5-demo.tsx" } ], "categories": [ "blocks" ], "meta": { "example": true, "of": "hero-5", "tier": "free" } }, { "name": "hero-6", "type": "registry:block", "title": "Hero 6: gradient mesh with floating cards", "description": "Centered hero over a slowly drifting colour mesh, with gradient headline words and product cards that bob and follow the pointer. Cards stack below the buttons on phones.", "author": "Ballmac ", "dependencies": [ "lucide-react", "motion@^12" ], "registryDependencies": [ "utils", "https://ui.ballmac.com/r/badge.json", "https://ui.ballmac.com/r/button.json", "https://ui.ballmac.com/r/gradient-text.json", "https://ui.ballmac.com/r/sparkline.json" ], "files": [ { "path": "registry/ballmac/components/blocks/hero-6/hero-6.tsx", "type": "registry:component", "target": "@components/ballmac/blocks/hero-6/hero-6.tsx" } ], "categories": [ "blocks", "hero" ], "meta": { "schema": 1, "tier": "free", "tags": [ "hero", "gradient", "mesh", "parallax", "floating cards", "saas" ], "version": "1.0.0", "updated": "2026-10-01", "ai": { "summary": "A bold, friendly landing hero. Edit eyebrow, title, highlight (the gradient words), description, actions and highlights; pass `cards` to replace the floating cards.", "whenToUse": [ "Consumer and prosumer SaaS landing pages", "Launches that want a memorable first screen" ], "whenNotToUse": [ "Dense developer tools (use hero-2)", "Pages that must stay completely static" ], "composesWith": [ "header-1", "logo-cloud-1", "features-2", "pricing-1" ], "a11y": [ { "keys": "Pointer only", "action": "The parallax and bobbing are decorative; they stop for reduced motion and on touch" } ], "customization": [ "cards: wrap each card in to place it", "The mesh uses --chart-1, --chart-3 and --chart-5, so it follows your theme" ] }, "examples": [ "hero-6-demo", "hero-6-custom" ], "url": "https://ui.ballmac.com/components/hero-6" } }, { "name": "hero-6-demo", "type": "registry:example", "title": "Hero 6: gradient mesh with floating cards: Default", "description": "Default example of Hero 6: gradient mesh with floating cards.", "registryDependencies": [ "https://ui.ballmac.com/r/hero-6.json" ], "files": [ { "path": "registry/examples/hero-6-demo.tsx", "type": "registry:example", "target": "@components/ballmac/examples/hero-6-demo.tsx" } ], "categories": [ "blocks" ], "meta": { "example": true, "of": "hero-6", "tier": "free" } }, { "name": "hero-6-custom", "type": "registry:example", "title": "Hero 6: gradient mesh with floating cards: Custom cards", "description": "Custom cards example of Hero 6: gradient mesh with floating cards.", "registryDependencies": [ "https://ui.ballmac.com/r/hero-6.json" ], "dependencies": [ "lucide-react" ], "files": [ { "path": "registry/examples/hero-6-custom.tsx", "type": "registry:example", "target": "@components/ballmac/examples/hero-6-custom.tsx" } ], "categories": [ "blocks" ], "meta": { "example": true, "of": "hero-6", "tier": "free" } }, { "name": "hero-7", "type": "registry:block", "title": "Hero 7: product screen that tilts into view", "description": "Centered hero with a browser frame that leans back and settles flat as you scroll. Ships a sample dashboard drawn with theme tokens; swap in a screenshot or your own UI.", "author": "Ballmac ", "dependencies": [ "lucide-react", "motion@^12" ], "registryDependencies": [ "utils", "https://ui.ballmac.com/r/badge.json", "https://ui.ballmac.com/r/browser-frame.json", "https://ui.ballmac.com/r/button.json" ], "files": [ { "path": "registry/ballmac/components/blocks/hero-7/hero-7.tsx", "type": "registry:component", "target": "@components/ballmac/blocks/hero-7/hero-7.tsx" } ], "categories": [ "blocks", "hero" ], "meta": { "schema": 1, "tier": "free", "tags": [ "hero", "product", "screenshot", "scroll", "browser", "dashboard" ], "version": "1.0.0", "updated": "2026-10-01", "ai": { "summary": "A landing hero that lets the product do the talking. Edit eyebrow, title, description and actions; pass `screenshot` ({ src, alt }) or `screen` (any UI laid out 1180px wide) to replace the sample dashboard.", "whenToUse": [ "Products with a strong UI", "Pages where a first-screen screenshot sells the product" ], "whenNotToUse": [ "Developer tools led by a command (use hero-2)", "Products with no visual UI" ], "composesWith": [ "header-1", "logo-cloud-1", "features-1", "testimonials-1" ], "a11y": [ { "keys": "Scroll", "action": "The tilt is decorative and is turned off for reduced motion; the sample screen is hidden from assistive technology" } ], "customization": [ "tilt: starting lean in degrees (0 for none)", "url: address shown in the browser frame", "screen: any ReactNode, scaled to fit" ] }, "examples": [ "hero-7-demo", "hero-7-custom" ], "url": "https://ui.ballmac.com/components/hero-7" } }, { "name": "hero-7-demo", "type": "registry:example", "title": "Hero 7: product screen that tilts into view: Default", "description": "Default example of Hero 7: product screen that tilts into view.", "registryDependencies": [ "https://ui.ballmac.com/r/hero-7.json" ], "files": [ { "path": "registry/examples/hero-7-demo.tsx", "type": "registry:example", "target": "@components/ballmac/examples/hero-7-demo.tsx" } ], "categories": [ "blocks" ], "meta": { "example": true, "of": "hero-7", "tier": "free" } }, { "name": "hero-7-custom", "type": "registry:example", "title": "Hero 7: product screen that tilts into view: Your own screen", "description": "Your own screen example of Hero 7: product screen that tilts into view.", "registryDependencies": [ "https://ui.ballmac.com/r/hero-7.json" ], "files": [ { "path": "registry/examples/hero-7-custom.tsx", "type": "registry:example", "target": "@components/ballmac/examples/hero-7-custom.tsx" } ], "categories": [ "blocks" ], "meta": { "example": true, "of": "hero-7", "tier": "free" } }, { "name": "invite-1", "type": "registry:block", "title": "Invite 1: accept a team invitation", "description": "The page an invitation email opens: workspace tile, who invited you, your role and what it allows, the account being used, accept and decline, with welcome, declined and expired states.", "author": "Ballmac ", "dependencies": [ "lucide-react" ], "registryDependencies": [ "utils", "https://ui.ballmac.com/r/badge.json", "https://ui.ballmac.com/r/button.json", "https://ui.ballmac.com/r/media.json" ], "files": [ { "path": "registry/ballmac/components/blocks/invite-1/invite-1.tsx", "type": "registry:component", "target": "@components/ballmac/blocks/invite-1/invite-1.tsx" } ], "categories": [ "blocks", "onboarding" ], "meta": { "schema": 1, "tier": "free", "tags": [ "invite", "invitation", "team", "workspace", "accept", "join" ], "version": "1.0.0", "updated": "2026-10-01", "ai": { "summary": "Landing page for an emailed invitation. Pass workspace, inviter, role, email, access, onAccept / onDecline / onRequestNew (throw to show an error) and status ('pending' | 'expired').", "whenToUse": [ "Team and workspace invitations", "Sharing links that need an explicit accept" ], "whenNotToUse": [ "Sending invitations (use invite-members)" ], "composesWith": [ "signup-1", "login-2", "onboarding-1", "verify-1" ], "a11y": [ { "keys": "Accept / Decline", "action": "Focus moves to the new heading and the result is announced as a status" }, { "keys": "Errors", "action": "A failed action is announced as an alert" } ], "customization": [ "status: 'expired' shows the request-a-new-link flow", "onDecline / onSwitchAccount: null hides them", "access: [] hides the list" ] }, "examples": [ "invite-1-demo", "invite-1-expired" ], "url": "https://ui.ballmac.com/components/invite-1" } }, { "name": "invite-1-demo", "type": "registry:example", "title": "Invite 1: accept a team invitation: Pending", "description": "Pending example of Invite 1: accept a team invitation.", "registryDependencies": [ "https://ui.ballmac.com/r/invite-1.json" ], "files": [ { "path": "registry/examples/invite-1-demo.tsx", "type": "registry:example", "target": "@components/ballmac/examples/invite-1-demo.tsx" } ], "categories": [ "blocks" ], "meta": { "example": true, "of": "invite-1", "tier": "free" } }, { "name": "invite-1-expired", "type": "registry:example", "title": "Invite 1: accept a team invitation: Expired", "description": "Expired example of Invite 1: accept a team invitation.", "registryDependencies": [ "https://ui.ballmac.com/r/invite-1.json" ], "files": [ { "path": "registry/examples/invite-1-expired.tsx", "type": "registry:example", "target": "@components/ballmac/examples/invite-1-expired.tsx" } ], "categories": [ "blocks" ], "meta": { "example": true, "of": "invite-1", "tier": "free" } }, { "name": "kanban-1", "type": "registry:block", "title": "Kanban 1: project board with drag and keyboard moves", "description": "A project board: columns with counts, rich task cards (tags, priority, due date, comments, assignee), drag and drop with a drop indicator, keyboard pick-up and move with announcements, a Move-to menu, quick add and a person filter.", "author": "Ballmac ", "dependencies": [ "lucide-react" ], "registryDependencies": [ "utils", "https://ui.ballmac.com/r/avatar.json", "https://ui.ballmac.com/r/badge.json", "https://ui.ballmac.com/r/button.json", "https://ui.ballmac.com/r/dropdown-menu.json", "https://ui.ballmac.com/r/input.json" ], "files": [ { "path": "registry/ballmac/components/blocks/kanban-1/kanban-1.tsx", "type": "registry:component", "target": "@components/ballmac/blocks/kanban-1/kanban-1.tsx" } ], "categories": [ "blocks", "kanban" ], "meta": { "schema": 1, "tier": "free", "tags": [ "kanban", "board", "tasks", "drag and drop", "project", "keyboard" ], "version": "1.0.0", "updated": "2026-10-01", "ai": { "summary": "A task board. Pass defaultColumns=[{ id, title, tasks: [{ id, title, tags?, priority?, assignee?, due?, comments? }] }] and onChange(columns).", "whenToUse": [ "Project and sprint boards", "Pipelines, hiring and support queues" ], "whenNotToUse": [ "A simple list of tasks (use a table)" ], "composesWith": [ "app-shell-1", "calendar-1", "mail-1" ], "a11y": [ { "keys": "Space or Enter on a card", "action": "Picks it up; Arrow keys move it between columns and positions; Space or Enter drops it; Escape puts it back" }, { "keys": "Move to menu", "action": "Every card has a menu that moves it to any column, for people who don't drag" }, { "keys": "Announcements", "action": "Each pick-up, move, drop and removal is announced politely" } ], "customization": [ "defaultColumns and onChange(columns)", "height of the board area", "priority: low, medium or high" ] }, "examples": [ "kanban-1-demo", "kanban-1-simple" ], "url": "https://ui.ballmac.com/components/kanban-1" } }, { "name": "kanban-1-demo", "type": "registry:example", "title": "Kanban 1: project board with drag and keyboard moves: Default", "description": "Default example of Kanban 1: project board with drag and keyboard moves.", "registryDependencies": [ "https://ui.ballmac.com/r/kanban-1.json" ], "files": [ { "path": "registry/examples/kanban-1-demo.tsx", "type": "registry:example", "target": "@components/ballmac/examples/kanban-1-demo.tsx" } ], "categories": [ "blocks" ], "meta": { "example": true, "of": "kanban-1", "tier": "free" } }, { "name": "kanban-1-simple", "type": "registry:example", "title": "Kanban 1: project board with drag and keyboard moves: Three columns", "description": "Three columns example of Kanban 1: project board with drag and keyboard moves.", "registryDependencies": [ "https://ui.ballmac.com/r/kanban-1.json" ], "files": [ { "path": "registry/examples/kanban-1-simple.tsx", "type": "registry:example", "target": "@components/ballmac/examples/kanban-1-simple.tsx" } ], "categories": [ "blocks" ], "meta": { "example": true, "of": "kanban-1", "tier": "free" } }, { "name": "login-1", "type": "registry:block", "title": "Login 1: card with SSO and magic link", "description": "Centered sign-in card: SSO and email-link buttons, an email and password form with remember me, a loading submit and an inline error.", "author": "Ballmac ", "dependencies": [ "lucide-react" ], "registryDependencies": [ "utils", "https://ui.ballmac.com/r/button.json", "https://ui.ballmac.com/r/checkbox.json", "https://ui.ballmac.com/r/input.json", "https://ui.ballmac.com/r/label.json" ], "files": [ { "path": "registry/ballmac/components/blocks/login-1/login-1.tsx", "type": "registry:component", "target": "@components/ballmac/blocks/login-1/login-1.tsx" } ], "categories": [ "blocks", "auth" ], "meta": { "schema": 1, "tier": "free", "tags": [ "login", "sign in", "auth", "form", "sso" ], "version": "1.0.0", "updated": "2026-09-28", "ai": { "summary": "A sign-in screen. Wire onSubmit to your auth (it can be async; the button shows a spinner), pass error to show failures, and onSso/onMagicLink for passwordless options.", "whenToUse": [ "App sign-in pages", "Admin or dashboard login" ], "whenNotToUse": [ "Sign-up with many fields (build a form from input, label and checkbox)" ], "composesWith": [ "footer-1" ], "a11y": [], "customization": [ "onSubmit({ email, password, remember })", "error, onSso, onMagicLink, forgotHref, signupHref props", "Pass onSso={null} or onMagicLink={null} to hide that button" ] }, "examples": [ "login-1-demo" ], "url": "https://ui.ballmac.com/components/login-1" } }, { "name": "login-1-demo", "type": "registry:example", "title": "Login 1: card with SSO and magic link: Default", "description": "Default example of Login 1: card with SSO and magic link.", "registryDependencies": [ "https://ui.ballmac.com/r/login-1.json" ], "files": [ { "path": "registry/examples/login-1-demo.tsx", "type": "registry:example", "target": "@components/ballmac/examples/login-1-demo.tsx" } ], "categories": [ "blocks" ], "meta": { "example": true, "of": "login-1", "tier": "free" } }, { "name": "login-2", "type": "registry:block", "title": "Login 2: split screen with testimonial", "description": "A split-screen sign-in: SSO and passkey buttons, validated email and password with show/hide, remember me and error state on one side, a soft colour mesh with a customer quote on the other.", "author": "Ballmac ", "dependencies": [ "lucide-react" ], "registryDependencies": [ "utils", "https://ui.ballmac.com/r/button.json", "https://ui.ballmac.com/r/checkbox.json", "https://ui.ballmac.com/r/field.json", "https://ui.ballmac.com/r/input.json", "https://ui.ballmac.com/r/password-input.json", "https://ui.ballmac.com/r/media.json" ], "files": [ { "path": "registry/ballmac/components/blocks/login-2/login-2.tsx", "type": "registry:component", "target": "@components/ballmac/blocks/login-2/login-2.tsx" } ], "categories": [ "blocks", "auth" ], "meta": { "schema": 1, "tier": "free", "tags": [ "login", "sign in", "auth", "split screen", "passkey", "sso" ], "version": "1.0.0", "updated": "2026-10-01", "ai": { "summary": "A full-width sign-in page. Pass onSubmit(values) (throw to show errorMessage), onSso / onPasskey (null hides), quote and author, or visual to replace the right side.", "whenToUse": [ "Product sign-in pages with room for a brand moment", "Apps with SSO and passkeys" ], "whenNotToUse": [ "Small centered dialogs (use login-1)" ], "composesWith": [ "signup-1", "forgot-password-1", "verify-1" ], "a11y": [ { "keys": "Submit with errors", "action": "Each error is announced and linked to its field; a failed sign-in is announced as an alert" }, { "keys": "Show / hide button", "action": "Toggles the password with aria-pressed" } ], "customization": [ "onSubmit(values) async; throw for the error state", "quote, author or visual (any node)", "onSso / onPasskey: null hides" ] }, "examples": [ "login-2-demo", "login-2-error" ], "url": "https://ui.ballmac.com/components/login-2" } }, { "name": "login-2-demo", "type": "registry:example", "title": "Login 2: split screen with testimonial: Default", "description": "Default example of Login 2: split screen with testimonial.", "registryDependencies": [ "https://ui.ballmac.com/r/login-2.json" ], "files": [ { "path": "registry/examples/login-2-demo.tsx", "type": "registry:example", "target": "@components/ballmac/examples/login-2-demo.tsx" } ], "categories": [ "blocks" ], "meta": { "example": true, "of": "login-2", "tier": "free" } }, { "name": "login-2-error", "type": "registry:example", "title": "Login 2: split screen with testimonial: Wrong password", "description": "Wrong password example of Login 2: split screen with testimonial.", "registryDependencies": [ "https://ui.ballmac.com/r/login-2.json" ], "files": [ { "path": "registry/examples/login-2-error.tsx", "type": "registry:example", "target": "@components/ballmac/examples/login-2-error.tsx" } ], "categories": [ "blocks" ], "meta": { "example": true, "of": "login-2", "tier": "free" } }, { "name": "logo-cloud-1", "type": "registry:block", "title": "Logo Cloud 1: marquee or grid", "description": "Customer logos as an endlessly scrolling row with faded edges, or a static grid with hairline dividers. Wordmarks brighten on hover.", "author": "Ballmac ", "dependencies": [ "lucide-react" ], "registryDependencies": [ "utils", "https://ui.ballmac.com/r/marquee.json" ], "files": [ { "path": "registry/ballmac/components/blocks/logo-cloud-1/logo-cloud-1.tsx", "type": "registry:component", "target": "@components/ballmac/blocks/logo-cloud-1/logo-cloud-1.tsx" } ], "categories": [ "blocks", "logo-cloud" ], "meta": { "schema": 1, "tier": "free", "tags": [ "logos", "social proof", "customers", "marquee" ], "version": "1.0.0", "updated": "2026-09-29", "ai": { "summary": "Social proof strip under a hero. Pass `logos` ({ name, icon? | logo? }[]) with your customers' SVG logos via `logo`; choose variant \"marquee\" or \"grid\".", "whenToUse": [ "Directly under a hero", "Near pricing to reassure buyers" ], "whenNotToUse": [ "Fewer than four logos (use a single line of text)" ], "composesWith": [ "hero-1", "hero-2", "testimonials-1" ], "a11y": [], "customization": [ "title, logos, variant props", "Marquee speed and gap in the source" ] }, "examples": [ "logo-cloud-1-demo", "logo-cloud-1-grid" ], "url": "https://ui.ballmac.com/components/logo-cloud-1" } }, { "name": "logo-cloud-1-demo", "type": "registry:example", "title": "Logo Cloud 1: marquee or grid: Marquee", "description": "Marquee example of Logo Cloud 1: marquee or grid.", "registryDependencies": [ "https://ui.ballmac.com/r/logo-cloud-1.json" ], "files": [ { "path": "registry/examples/logo-cloud-1-demo.tsx", "type": "registry:example", "target": "@components/ballmac/examples/logo-cloud-1-demo.tsx" } ], "categories": [ "blocks" ], "meta": { "example": true, "of": "logo-cloud-1", "tier": "free" } }, { "name": "logo-cloud-1-grid", "type": "registry:example", "title": "Logo Cloud 1: marquee or grid: Grid", "description": "Grid example of Logo Cloud 1: marquee or grid.", "registryDependencies": [ "https://ui.ballmac.com/r/logo-cloud-1.json" ], "files": [ { "path": "registry/examples/logo-cloud-1-grid.tsx", "type": "registry:example", "target": "@components/ballmac/examples/logo-cloud-1-grid.tsx" } ], "categories": [ "blocks" ], "meta": { "example": true, "of": "logo-cloud-1", "tier": "free" } }, { "name": "mail-1", "type": "registry:block", "title": "Mail 1: three-pane inbox", "description": "A working inbox: folders with an unread count, a searchable message list with stars and keyboard navigation, a reading pane with archive, delete, mark unread and reply, and a compose dialog. One pane at a time on phones.", "author": "Ballmac ", "dependencies": [ "lucide-react" ], "registryDependencies": [ "utils", "https://ui.ballmac.com/r/avatar.json", "https://ui.ballmac.com/r/button.json", "https://ui.ballmac.com/r/dialog.json", "https://ui.ballmac.com/r/input.json", "https://ui.ballmac.com/r/search-field.json", "https://ui.ballmac.com/r/select.json", "https://ui.ballmac.com/r/textarea.json" ], "files": [ { "path": "registry/ballmac/components/blocks/mail-1/mail-1.tsx", "type": "registry:component", "target": "@components/ballmac/blocks/mail-1/mail-1.tsx" } ], "categories": [ "blocks", "mail" ], "meta": { "schema": 1, "tier": "free", "tags": [ "mail", "inbox", "email", "three pane", "messages", "compose", "reply" ], "version": "1.0.0", "updated": "2026-10-01", "ai": { "summary": "An email client UI. Pass messages=[{ id, folder, from, subject, body[], time, unread?, starred?, attachments? }], me and onSend(to, subject, body); archive, delete, star, read state, search and reply are handled in state.", "whenToUse": [ "Webmail, support inboxes and notification centres", "A realistic product screenshot" ], "whenNotToUse": [ "Chat (use ai-chat-2 or the chat components)" ], "composesWith": [ "app-shell-1", "kanban-1", "calendar-1" ], "a11y": [ { "keys": "Arrow Up / Down or J / K", "action": "Moves focus between messages; Enter or Space opens one" }, { "keys": "Unread", "action": "Unread messages say 'Unread' to screen readers as well as being bold with a dot" }, { "keys": "Actions", "action": "Archive, delete and mark-unread results are announced politely" } ], "customization": [ "messages, me, height", "onSend(to, subject, body)", "folders are inbox, sent and archive plus Starred" ] }, "examples": [ "mail-1-demo", "mail-1-empty" ], "url": "https://ui.ballmac.com/components/mail-1" } }, { "name": "mail-1-demo", "type": "registry:example", "title": "Mail 1: three-pane inbox: Default", "description": "Default example of Mail 1: three-pane inbox.", "registryDependencies": [ "https://ui.ballmac.com/r/mail-1.json" ], "files": [ { "path": "registry/examples/mail-1-demo.tsx", "type": "registry:example", "target": "@components/ballmac/examples/mail-1-demo.tsx" } ], "categories": [ "blocks" ], "meta": { "example": true, "of": "mail-1", "tier": "free" } }, { "name": "mail-1-empty", "type": "registry:example", "title": "Mail 1: three-pane inbox: Empty inbox", "description": "Empty inbox example of Mail 1: three-pane inbox.", "registryDependencies": [ "https://ui.ballmac.com/r/mail-1.json" ], "files": [ { "path": "registry/examples/mail-1-empty.tsx", "type": "registry:example", "target": "@components/ballmac/examples/mail-1-empty.tsx" } ], "categories": [ "blocks" ], "meta": { "example": true, "of": "mail-1", "tier": "free" } }, { "name": "newsletter-1", "type": "registry:block", "title": "Newsletter 1: signup with topics and sample issue", "description": "An editorial newsletter signup: topic chips, an email field with validation, loading, error and success states, avatar social proof, and a tilted sample issue card beside it.", "author": "Ballmac ", "dependencies": [ "lucide-react" ], "registryDependencies": [ "utils", "https://ui.ballmac.com/r/button.json", "https://ui.ballmac.com/r/input.json", "https://ui.ballmac.com/r/media.json" ], "files": [ { "path": "registry/ballmac/components/blocks/newsletter-1/newsletter-1.tsx", "type": "registry:component", "target": "@components/ballmac/blocks/newsletter-1/newsletter-1.tsx" } ], "categories": [ "blocks", "newsletter" ], "meta": { "schema": 1, "tier": "free", "tags": [ "newsletter", "signup", "email", "subscribe", "topics", "form" ], "version": "1.0.0", "updated": "2026-10-01", "ai": { "summary": "A newsletter signup section. Pass topics (or [] for none), proof, issue headlines for the preview card, and onSubmit(email, topics); throw to show an error.", "whenToUse": [ "Blogs, changelogs and docs sites", "Anywhere readers choose what to receive" ], "whenNotToUse": [ "A waitlist over a dramatic background (use cta-2)" ], "composesWith": [ "blog-1", "changelog-1", "footer-2", "faq-2" ], "a11y": [ { "keys": "Enter / Space on a topic", "action": "Toggles it (aria-pressed)" }, { "keys": "Submit with a bad address", "action": "The error is announced as an alert and linked with aria-describedby" } ], "customization": [ "topics: [] hides the chips", "defaultTopics", "issue: { name, number, headlines } for the preview card", "onSubmit(email, topics)" ] }, "examples": [ "newsletter-1-demo", "newsletter-1-simple" ], "url": "https://ui.ballmac.com/components/newsletter-1" } }, { "name": "newsletter-1-demo", "type": "registry:example", "title": "Newsletter 1: signup with topics and sample issue: Default", "description": "Default example of Newsletter 1: signup with topics and sample issue.", "registryDependencies": [ "https://ui.ballmac.com/r/newsletter-1.json" ], "files": [ { "path": "registry/examples/newsletter-1-demo.tsx", "type": "registry:example", "target": "@components/ballmac/examples/newsletter-1-demo.tsx" } ], "categories": [ "blocks" ], "meta": { "example": true, "of": "newsletter-1", "tier": "free" } }, { "name": "newsletter-1-simple", "type": "registry:example", "title": "Newsletter 1: signup with topics and sample issue: Email only", "description": "Email only example of Newsletter 1: signup with topics and sample issue.", "registryDependencies": [ "https://ui.ballmac.com/r/newsletter-1.json" ], "files": [ { "path": "registry/examples/newsletter-1-simple.tsx", "type": "registry:example", "target": "@components/ballmac/examples/newsletter-1-simple.tsx" } ], "categories": [ "blocks" ], "meta": { "example": true, "of": "newsletter-1", "tier": "free" } }, { "name": "onboarding-1", "type": "registry:block", "title": "Onboarding 1: workspace setup wizard", "description": "A four-step setup wizard with a progress rail: name and address a workspace (auto-filled), pick goals as cards, invite teammates as removable chips, review, then a finish screen. Slides between steps.", "author": "Ballmac ", "dependencies": [ "lucide-react", "motion@^12" ], "registryDependencies": [ "utils", "https://ui.ballmac.com/r/button.json", "https://ui.ballmac.com/r/field.json", "https://ui.ballmac.com/r/input.json" ], "files": [ { "path": "registry/ballmac/components/blocks/onboarding-1/onboarding-1.tsx", "type": "registry:component", "target": "@components/ballmac/blocks/onboarding-1/onboarding-1.tsx" } ], "categories": [ "blocks", "onboarding" ], "meta": { "schema": 1, "tier": "free", "tags": [ "onboarding", "wizard", "setup", "workspace", "steps", "invite" ], "version": "1.0.0", "updated": "2026-10-01", "ai": { "summary": "First-run setup after signup. Pass product, domain, goals=[{ id, title, description }] and onComplete(values) with { name, slug, color, goals, invites } (throw to show an error).", "whenToUse": [ "The first screen after signup or verification", "Products where a workspace or team has to be created" ], "whenNotToUse": [ "A checklist that lives inside the app (use onboarding-checklist)" ], "composesWith": [ "signup-1", "verify-1", "invite-1", "app-shell" ], "a11y": [ { "keys": "Continue / Back", "action": "Focus moves to the new step's heading so the change is announced" }, { "keys": "Arrow keys on colors", "action": "Move between color radios; goals are checkboxes toggled with Space" }, { "keys": "Enter in the email field", "action": "Adds the address as a removable chip" } ], "customization": [ "goals: { id, title, description }[]", "product, domain, continueHref", "onComplete(values) async" ] }, "examples": [ "onboarding-1-demo", "onboarding-1-custom" ], "url": "https://ui.ballmac.com/components/onboarding-1" } }, { "name": "onboarding-1-demo", "type": "registry:example", "title": "Onboarding 1: workspace setup wizard: Default", "description": "Default example of Onboarding 1: workspace setup wizard.", "registryDependencies": [ "https://ui.ballmac.com/r/onboarding-1.json" ], "files": [ { "path": "registry/examples/onboarding-1-demo.tsx", "type": "registry:example", "target": "@components/ballmac/examples/onboarding-1-demo.tsx" } ], "categories": [ "blocks" ], "meta": { "example": true, "of": "onboarding-1", "tier": "free" } }, { "name": "onboarding-1-custom", "type": "registry:example", "title": "Onboarding 1: workspace setup wizard: Custom goals", "description": "Custom goals example of Onboarding 1: workspace setup wizard.", "registryDependencies": [ "https://ui.ballmac.com/r/onboarding-1.json" ], "files": [ { "path": "registry/examples/onboarding-1-custom.tsx", "type": "registry:example", "target": "@components/ballmac/examples/onboarding-1-custom.tsx" } ], "categories": [ "blocks" ], "meta": { "example": true, "of": "onboarding-1", "tier": "free" } }, { "name": "pricing-1", "type": "registry:block", "title": "Pricing 1: two tiers", "description": "Two pricing cards side by side with included and excluded features, a highlighted plan with a border beam and badge, and small print.", "author": "Ballmac ", "dependencies": [ "lucide-react" ], "registryDependencies": [ "utils", "https://ui.ballmac.com/r/badge.json", "https://ui.ballmac.com/r/border-beam.json", "https://ui.ballmac.com/r/button.json" ], "files": [ { "path": "registry/ballmac/components/blocks/pricing-1/pricing-1.tsx", "type": "registry:component", "target": "@components/ballmac/blocks/pricing-1/pricing-1.tsx" } ], "categories": [ "blocks", "pricing" ], "meta": { "schema": 1, "tier": "free", "tags": [ "pricing", "plans", "saas", "tiers" ], "version": "1.0.0", "updated": "2026-09-28", "ai": { "summary": "Pricing for a free-plus-paid or two-plan product. Pass plans=[{ name, price, period, description, features, cta, featured }].", "whenToUse": [ "Freemium products", "Two-plan pricing pages" ], "whenNotToUse": [ "Three or more plans side by side" ], "composesWith": [ "faq-1", "cta-1" ], "a11y": [], "customization": [ "plans: { name, price, period?, description, features: { label, included }[], cta, featured? }[]", "title, description, note props" ] }, "examples": [ "pricing-1-demo" ], "url": "https://ui.ballmac.com/components/pricing-1" } }, { "name": "pricing-1-demo", "type": "registry:example", "title": "Pricing 1: two tiers: Default", "description": "Default example of Pricing 1: two tiers.", "registryDependencies": [ "https://ui.ballmac.com/r/pricing-1.json" ], "files": [ { "path": "registry/examples/pricing-1-demo.tsx", "type": "registry:example", "target": "@components/ballmac/examples/pricing-1-demo.tsx" } ], "categories": [ "blocks" ], "meta": { "example": true, "of": "pricing-1", "tier": "free" } }, { "name": "pricing-2", "type": "registry:block", "title": "Pricing 2: three tiers with billing toggle", "description": "Three plan cards with a monthly/yearly switch. Prices roll to the new value, a savings badge and billed-total line update, and the middle plan is lifted with a border beam.", "author": "Ballmac ", "dependencies": [ "lucide-react" ], "registryDependencies": [ "utils", "https://ui.ballmac.com/r/animated-number-flow.json", "https://ui.ballmac.com/r/badge.json", "https://ui.ballmac.com/r/border-beam.json", "https://ui.ballmac.com/r/button.json", "https://ui.ballmac.com/r/segmented-control.json" ], "files": [ { "path": "registry/ballmac/components/blocks/pricing-2/pricing-2.tsx", "type": "registry:component", "target": "@components/ballmac/blocks/pricing-2/pricing-2.tsx" } ], "categories": [ "blocks", "pricing" ], "meta": { "schema": 1, "tier": "free", "tags": [ "pricing", "plans", "toggle", "yearly", "saas", "tiers" ], "version": "1.0.0", "updated": "2026-10-01", "ai": { "summary": "Standard SaaS pricing with a billing toggle. Pass plans=[{ name, description, price: { monthly, yearly } | string, unit?, lead?, features, cta, featured? }].", "whenToUse": [ "SaaS products with three plans", "Products that discount annual billing" ], "whenNotToUse": [ "Two plans only (use pricing-1)", "Usage-based pricing (use plan-selector or a calculator)" ], "composesWith": [ "faq-2", "logo-cloud-1", "cta-1", "pricing-3" ], "a11y": [ { "keys": "Arrow Left / Right", "action": "Switches billing interval" }, { "keys": "Status message", "action": "Announces the interval being shown" } ], "customization": [ "plans: price is { monthly, yearly } per month or a string like 'Custom'", "defaultInterval / interval / onIntervalChange", "discountLabel, currency, note, enterprise (null to hide)" ] }, "examples": [ "pricing-2-demo", "pricing-2-custom" ], "url": "https://ui.ballmac.com/components/pricing-2" } }, { "name": "pricing-2-demo", "type": "registry:example", "title": "Pricing 2: three tiers with billing toggle: Default", "description": "Default example of Pricing 2: three tiers with billing toggle.", "registryDependencies": [ "https://ui.ballmac.com/r/pricing-2.json" ], "files": [ { "path": "registry/examples/pricing-2-demo.tsx", "type": "registry:example", "target": "@components/ballmac/examples/pricing-2-demo.tsx" } ], "categories": [ "blocks" ], "meta": { "example": true, "of": "pricing-2", "tier": "free" } }, { "name": "pricing-2-custom", "type": "registry:example", "title": "Pricing 2: three tiers with billing toggle: Custom plans", "description": "Custom plans example of Pricing 2: three tiers with billing toggle.", "registryDependencies": [ "https://ui.ballmac.com/r/pricing-2.json" ], "files": [ { "path": "registry/examples/pricing-2-custom.tsx", "type": "registry:example", "target": "@components/ballmac/examples/pricing-2-custom.tsx" } ], "categories": [ "blocks" ], "meta": { "example": true, "of": "pricing-2", "tier": "free" } }, { "name": "pricing-3", "type": "registry:block", "title": "Pricing 3: full plan comparison", "description": "A feature-by-feature comparison table with a sticky plan header, collapsible groups and a highlighted column. On phones it becomes a plan switcher with one clean list.", "author": "Ballmac ", "dependencies": [ "lucide-react" ], "registryDependencies": [ "utils", "https://ui.ballmac.com/r/badge.json", "https://ui.ballmac.com/r/button.json", "https://ui.ballmac.com/r/segmented-control.json" ], "files": [ { "path": "registry/ballmac/components/blocks/pricing-3/pricing-3.tsx", "type": "registry:component", "target": "@components/ballmac/blocks/pricing-3/pricing-3.tsx" } ], "categories": [ "blocks", "pricing" ], "meta": { "schema": 1, "tier": "free", "tags": [ "pricing", "comparison", "table", "sticky", "plans", "features" ], "version": "1.0.0", "updated": "2026-10-01", "ai": { "summary": "The detailed pricing table for buyers who compare. Pass plans=[{ key, name, price, period?, cta, featured? }] and groups=[{ title, rows: [{ label, hint?, values: { [planKey]: boolean | string } }] }].", "whenToUse": [ "Below pricing cards, for buyers who want every detail", "Products with many differentiating features" ], "whenNotToUse": [ "Two simple plans (pricing-1 is enough)" ], "composesWith": [ "pricing-2", "faq-2", "cta-1", "header-1" ], "a11y": [ { "keys": "Enter / Space on a group heading", "action": "Collapses or expands the group" }, { "keys": "Arrow Left / Right (phones)", "action": "Switches the plan shown" } ], "customization": [ "stickyOffset: pixels to keep from the top when you have a fixed site header", "values: true / false render an icon with a text label; strings render as text" ] }, "examples": [ "pricing-3-demo", "pricing-3-two" ], "url": "https://ui.ballmac.com/components/pricing-3" } }, { "name": "pricing-3-demo", "type": "registry:example", "title": "Pricing 3: full plan comparison: Default", "description": "Default example of Pricing 3: full plan comparison.", "registryDependencies": [ "https://ui.ballmac.com/r/pricing-3.json" ], "files": [ { "path": "registry/examples/pricing-3-demo.tsx", "type": "registry:example", "target": "@components/ballmac/examples/pricing-3-demo.tsx" } ], "categories": [ "blocks" ], "meta": { "example": true, "of": "pricing-3", "tier": "free" } }, { "name": "pricing-3-two", "type": "registry:example", "title": "Pricing 3: full plan comparison: Two plans", "description": "Two plans example of Pricing 3: full plan comparison.", "registryDependencies": [ "https://ui.ballmac.com/r/pricing-3.json" ], "files": [ { "path": "registry/examples/pricing-3-two.tsx", "type": "registry:example", "target": "@components/ballmac/examples/pricing-3-two.tsx" } ], "categories": [ "blocks" ], "meta": { "example": true, "of": "pricing-3", "tier": "free" } }, { "name": "pricing-4", "type": "registry:block", "title": "Pricing 4: one-time license vs subscription", "description": "A pricing section for Mac apps that sell both ways: a Buy once / Subscribe switch, license size cards and a cumulative-cost chart that computes the break-even year.", "author": "Ballmac ", "dependencies": [ "lucide-react", "recharts@^3" ], "registryDependencies": [ "utils", "https://ui.ballmac.com/r/button.json", "https://ui.ballmac.com/r/chart.json", "https://ui.ballmac.com/r/label.json", "https://ui.ballmac.com/r/radio-group.json", "https://ui.ballmac.com/r/segmented-control.json", "https://ui.ballmac.com/r/switch.json" ], "files": [ { "path": "registry/ballmac/components/blocks/pricing-4/pricing-4.tsx", "type": "registry:component", "target": "@components/ballmac/blocks/pricing-4/pricing-4.tsx" } ], "categories": [ "blocks", "pricing" ], "meta": { "schema": 1, "tier": "free", "tags": [ "pricing", "license", "subscription", "one-time", "mac", "chart", "break-even" ], "version": "1.0.0", "updated": "2026-10-01", "ai": { "summary": "Pricing for apps with a one-time license and a subscription. Pass tiers=[{ id, name, description?, once, yearly }], optional renewal (price of paid updates after year 1), years, currency and href(tierId, mode). The chart and the 'pays for itself in year N' message are computed from the numbers.", "whenToUse": [ "Mac and desktop apps that offer a perpetual license next to a subscription", "When you want to show buyers the long-run cost honestly" ], "whenNotToUse": [ "Monthly SaaS plans with feature tiers (pricing-1 or pricing-3)" ], "composesWith": [ "download-1", "faq-2", "cta-1", "showcase-1" ], "a11y": [ { "keys": "Arrow Left / Right on the way-to-pay switch", "action": "Switches between Buy once and Subscribe" }, { "keys": "Arrow Up / Down on license size", "action": "Selects another size and updates the price and chart" }, { "keys": "Space on the updates switch", "action": "Includes optional update renewals in the one-time cost" } ], "customization": [ "renewal: a number, or { [tierId]: number }; 0 hides the updates switch", "href: build the checkout link from the tier and mode", "onceIncludes / subscribeIncludes: the checklist for each way to pay" ] }, "examples": [ "pricing-4-demo", "pricing-4-custom" ], "url": "https://ui.ballmac.com/components/pricing-4" } }, { "name": "pricing-4-demo", "type": "registry:example", "title": "Pricing 4: one-time license vs subscription: Default", "description": "Default example of Pricing 4: one-time license vs subscription.", "registryDependencies": [ "https://ui.ballmac.com/r/pricing-4.json" ], "files": [ { "path": "registry/examples/pricing-4-demo.tsx", "type": "registry:example", "target": "@components/ballmac/examples/pricing-4-demo.tsx" } ], "categories": [ "blocks" ], "meta": { "example": true, "of": "pricing-4", "tier": "free" } }, { "name": "pricing-4-custom", "type": "registry:example", "title": "Pricing 4: one-time license vs subscription: Two tiers in euros", "description": "Two tiers in euros example of Pricing 4: one-time license vs subscription.", "registryDependencies": [ "https://ui.ballmac.com/r/pricing-4.json" ], "files": [ { "path": "registry/examples/pricing-4-custom.tsx", "type": "registry:example", "target": "@components/ballmac/examples/pricing-4-custom.tsx" } ], "categories": [ "blocks" ], "meta": { "example": true, "of": "pricing-4", "tier": "free" } }, { "name": "settings-1", "type": "registry:block", "title": "Settings 1: profile and account", "description": "An account settings page: profile with username availability, sign-in details with a change-password dialog, language, time zone and appearance, a type-to-confirm delete, and a sticky save bar that appears only when something changed.", "author": "Ballmac ", "dependencies": [ "lucide-react" ], "registryDependencies": [ "utils", "https://ui.ballmac.com/r/alert-dialog.json", "https://ui.ballmac.com/r/avatar.json", "https://ui.ballmac.com/r/badge.json", "https://ui.ballmac.com/r/button.json", "https://ui.ballmac.com/r/dialog.json", "https://ui.ballmac.com/r/field.json", "https://ui.ballmac.com/r/input.json", "https://ui.ballmac.com/r/password-input.json", "https://ui.ballmac.com/r/segmented-control.json", "https://ui.ballmac.com/r/select.json", "https://ui.ballmac.com/r/textarea.json" ], "files": [ { "path": "registry/ballmac/components/blocks/settings-1/settings-1.tsx", "type": "registry:component", "target": "@components/ballmac/blocks/settings-1/settings-1.tsx" } ], "categories": [ "blocks", "settings" ], "meta": { "schema": 1, "tier": "free", "tags": [ "settings", "profile", "account", "preferences", "save bar", "danger zone" ], "version": "1.0.0", "updated": "2026-10-01", "ai": { "summary": "Profile and account settings. Pass defaultValues, email, onSave(values) (throw to show an error) and onDeleteAccount; the dirty-state save bar, validation and availability hint are built in.", "whenToUse": [ "Account and profile pages", "Any settings screen where edits are saved together" ], "whenNotToUse": [ "Toggle-style settings that save instantly (use settings-2 or settings-panel)" ], "composesWith": [ "app-shell-1", "settings-2", "settings-3", "billing-1" ], "a11y": [ { "keys": "Edit any field", "action": "The save bar slides in; its state (unsaved, saving, saved, error) is announced politely" }, { "keys": "Delete account", "action": "An alert dialog asks you to type 'delete'; the confirm button stays disabled until you do" }, { "keys": "Invalid name or username", "action": "Errors are announced and linked to the field; saving is blocked" } ], "customization": [ "defaultValues, email, takenUsernames, languages, timezones", "onSave(values), onDeleteAccount()" ] }, "examples": [ "settings-1-demo", "settings-1-save" ], "url": "https://ui.ballmac.com/components/settings-1" } }, { "name": "settings-1-demo", "type": "registry:example", "title": "Settings 1: profile and account: Default", "description": "Default example of Settings 1: profile and account.", "registryDependencies": [ "https://ui.ballmac.com/r/settings-1.json" ], "files": [ { "path": "registry/examples/settings-1-demo.tsx", "type": "registry:example", "target": "@components/ballmac/examples/settings-1-demo.tsx" } ], "categories": [ "blocks" ], "meta": { "example": true, "of": "settings-1", "tier": "free" } }, { "name": "settings-1-save", "type": "registry:example", "title": "Settings 1: profile and account: Failing save", "description": "Failing save example of Settings 1: profile and account.", "registryDependencies": [ "https://ui.ballmac.com/r/settings-1.json" ], "files": [ { "path": "registry/examples/settings-1-save.tsx", "type": "registry:example", "target": "@components/ballmac/examples/settings-1-save.tsx" } ], "categories": [ "blocks" ], "meta": { "example": true, "of": "settings-1", "tier": "free" } }, { "name": "settings-2", "type": "registry:block", "title": "Settings 2: notification preferences", "description": "Notification settings that save as you go: digest frequency as radio cards, a grid of switches for each event and channel (cards on phones), and quiet hours with times and weekdays.", "author": "Ballmac ", "dependencies": [ "lucide-react" ], "registryDependencies": [ "utils", "https://ui.ballmac.com/r/input.json", "https://ui.ballmac.com/r/switch.json", "https://ui.ballmac.com/r/toggle-group.json" ], "files": [ { "path": "registry/ballmac/components/blocks/settings-2/settings-2.tsx", "type": "registry:component", "target": "@components/ballmac/blocks/settings-2/settings-2.tsx" } ], "categories": [ "blocks", "settings" ], "meta": { "schema": 1, "tier": "free", "tags": [ "settings", "notifications", "preferences", "switches", "quiet hours", "digest" ], "version": "1.0.0", "updated": "2026-10-01", "ai": { "summary": "Notification preferences with instant saving. Pass events=[{ id, label, description }], defaultValues and onChange(values) (return a promise; throw to show an error).", "whenToUse": [ "Notification, alert and email preference pages", "Settings that apply the moment they are toggled" ], "whenNotToUse": [ "Forms that need an explicit Save (use settings-1)" ], "composesWith": [ "app-shell-1", "settings-1", "settings-3" ], "a11y": [ { "keys": "Arrow keys / Space", "action": "Digest radios move and select; switches toggle with Space" }, { "keys": "Screen reader", "action": "Each switch is named 'Event by Channel'; the saving state is announced politely" }, { "keys": "Weekdays", "action": "A toggle group with full day names as labels" } ], "customization": [ "events: { id, label, description }[]", "defaultValues: digest, events, quiet", "onChange(values) async" ] }, "examples": [ "settings-2-demo", "settings-2-custom" ], "url": "https://ui.ballmac.com/components/settings-2" } }, { "name": "settings-2-demo", "type": "registry:example", "title": "Settings 2: notification preferences: Default", "description": "Default example of Settings 2: notification preferences.", "registryDependencies": [ "https://ui.ballmac.com/r/settings-2.json" ], "files": [ { "path": "registry/examples/settings-2-demo.tsx", "type": "registry:example", "target": "@components/ballmac/examples/settings-2-demo.tsx" } ], "categories": [ "blocks" ], "meta": { "example": true, "of": "settings-2", "tier": "free" } }, { "name": "settings-2-custom", "type": "registry:example", "title": "Settings 2: notification preferences: Your events", "description": "Your events example of Settings 2: notification preferences.", "registryDependencies": [ "https://ui.ballmac.com/r/settings-2.json" ], "files": [ { "path": "registry/examples/settings-2-custom.tsx", "type": "registry:example", "target": "@components/ballmac/examples/settings-2-custom.tsx" } ], "categories": [ "blocks" ], "meta": { "example": true, "of": "settings-2", "tier": "free" } }, { "name": "settings-3", "type": "registry:block", "title": "Settings 3: team members and roles", "description": "Team management: a seats meter, an invite form with role, role filters and search, a member list with role selects, pending invitations and a confirm-before-remove dialog. Stacks cleanly on phones.", "author": "Ballmac ", "dependencies": [ "lucide-react" ], "registryDependencies": [ "utils", "https://ui.ballmac.com/r/alert-dialog.json", "https://ui.ballmac.com/r/avatar.json", "https://ui.ballmac.com/r/badge.json", "https://ui.ballmac.com/r/button.json", "https://ui.ballmac.com/r/dropdown-menu.json", "https://ui.ballmac.com/r/input.json", "https://ui.ballmac.com/r/search-field.json", "https://ui.ballmac.com/r/select.json" ], "files": [ { "path": "registry/ballmac/components/blocks/settings-3/settings-3.tsx", "type": "registry:component", "target": "@components/ballmac/blocks/settings-3/settings-3.tsx" } ], "categories": [ "blocks", "settings" ], "meta": { "schema": 1, "tier": "free", "tags": [ "settings", "team", "members", "roles", "invite", "permissions", "seats" ], "version": "1.0.0", "updated": "2026-10-01", "ai": { "summary": "Workspace member management. Pass members=[{ id, name, email, role, status, lastActive? }], roles, seats and onInvite / onRoleChange / onRemove; the Owner can't be changed or removed.", "whenToUse": [ "Workspace and organisation settings", "Any product with roles and seats" ], "whenNotToUse": [ "A first-run invite step (use onboarding-1)", "Sending many invites at once (use invite-members)" ], "composesWith": [ "app-shell-1", "settings-1", "billing-1", "invite-1" ], "a11y": [ { "keys": "Enter in the email field", "action": "Sends the invitation; errors are announced and linked to the field" }, { "keys": "Role select", "action": "Each is named 'Role for '; changes are announced politely" }, { "keys": "Actions menu", "action": "Opens a menu; removing asks for confirmation in an alert dialog" } ], "customization": [ "members, roles, seats", "onInvite(email, role) async; throw to show an error", "onRoleChange(id, role), onRemove(id)" ] }, "examples": [ "settings-3-demo", "settings-3-full" ], "url": "https://ui.ballmac.com/components/settings-3" } }, { "name": "settings-3-demo", "type": "registry:example", "title": "Settings 3: team members and roles: Default", "description": "Default example of Settings 3: team members and roles.", "registryDependencies": [ "https://ui.ballmac.com/r/settings-3.json" ], "files": [ { "path": "registry/examples/settings-3-demo.tsx", "type": "registry:example", "target": "@components/ballmac/examples/settings-3-demo.tsx" } ], "categories": [ "blocks" ], "meta": { "example": true, "of": "settings-3", "tier": "free" } }, { "name": "settings-3-full", "type": "registry:example", "title": "Settings 3: team members and roles: Seats full", "description": "Seats full example of Settings 3: team members and roles.", "registryDependencies": [ "https://ui.ballmac.com/r/settings-3.json" ], "files": [ { "path": "registry/examples/settings-3-full.tsx", "type": "registry:example", "target": "@components/ballmac/examples/settings-3-full.tsx" } ], "categories": [ "blocks" ], "meta": { "example": true, "of": "settings-3", "tier": "free" } }, { "name": "showcase-1", "type": "registry:block", "title": "Showcase 1: interactive Mac desktop", "description": "A working Mac desktop for your landing page: wallpaper, a menu bar with menus and a clock, draggable and resizable windows, desktop widgets and a magnifying dock that launches and relaunches them.", "author": "Ballmac ", "dependencies": [ "lucide-react" ], "registryDependencies": [ "utils", "https://ui.ballmac.com/r/dock.json", "https://ui.ballmac.com/r/menu-bar.json", "https://ui.ballmac.com/r/widgets.json", "https://ui.ballmac.com/r/window-manager.json" ], "files": [ { "path": "registry/ballmac/components/blocks/showcase-1/showcase-1.tsx", "type": "registry:component", "target": "@components/ballmac/blocks/showcase-1/showcase-1.tsx" } ], "categories": [ "blocks", "showcase" ], "meta": { "schema": 1, "tier": "free", "tags": [ "mac", "desktop", "showcase", "windows", "dock", "menu bar", "demo" ], "version": "1.0.0", "updated": "2026-10-01", "ai": { "summary": "A hero-sized interactive screenshot. Set app, time (ISO, fixed) and pass your own window content as children; widgets={false} hides the desk widgets and notes={false} the sample Notes window. Windows can be dragged, resized, zoomed and minimized; the dock reopens closed apps.", "whenToUse": [ "Landing pages for Mac apps that want to be tried, not just seen", "Under a hero as a live product tour" ], "whenNotToUse": [ "Showing one screenshot (use laptop-frame or browser-frame)", "Non-desktop products" ], "composesWith": [ "hero-5", "download-1", "features-7", "devices-1" ], "a11y": [ { "keys": "Arrow Left / Right in the dock", "action": "Moves between dock items; Enter launches or reopens an app" }, { "keys": "Window title bars", "action": "Windows can be moved and resized with the keyboard through the window manager; traffic lights are real buttons" }, { "keys": "Menu bar", "action": "Arrow keys move between menus; Escape closes" } ], "customization": [ "app, time, widgets, notes, height", "children: your window content, laid out in a container (use @sm: / @md: variants)" ] }, "examples": [ "showcase-1-demo", "showcase-1-custom" ], "url": "https://ui.ballmac.com/components/showcase-1" } }, { "name": "showcase-1-demo", "type": "registry:example", "title": "Showcase 1: interactive Mac desktop: Default", "description": "Default example of Showcase 1: interactive Mac desktop.", "registryDependencies": [ "https://ui.ballmac.com/r/showcase-1.json" ], "files": [ { "path": "registry/examples/showcase-1-demo.tsx", "type": "registry:example", "target": "@components/ballmac/examples/showcase-1-demo.tsx" } ], "categories": [ "blocks" ], "meta": { "example": true, "of": "showcase-1", "tier": "free" } }, { "name": "showcase-1-custom", "type": "registry:example", "title": "Showcase 1: interactive Mac desktop: Your own app window", "description": "Your own app window example of Showcase 1: interactive Mac desktop.", "registryDependencies": [ "https://ui.ballmac.com/r/showcase-1.json" ], "files": [ { "path": "registry/examples/showcase-1-custom.tsx", "type": "registry:example", "target": "@components/ballmac/examples/showcase-1-custom.tsx" } ], "categories": [ "blocks" ], "meta": { "example": true, "of": "showcase-1", "tier": "free" } }, { "name": "signup-1", "type": "registry:block", "title": "Signup 1: form with benefits column", "description": "A signup page: validated name, work email and password with a live strength guide, terms checkbox, SSO option and a check-your-inbox confirmation, beside a benefits list with social proof.", "author": "Ballmac ", "dependencies": [ "lucide-react" ], "registryDependencies": [ "utils", "https://ui.ballmac.com/r/button.json", "https://ui.ballmac.com/r/checkbox.json", "https://ui.ballmac.com/r/field.json", "https://ui.ballmac.com/r/input.json", "https://ui.ballmac.com/r/password-input.json", "https://ui.ballmac.com/r/media.json" ], "files": [ { "path": "registry/ballmac/components/blocks/signup-1/signup-1.tsx", "type": "registry:component", "target": "@components/ballmac/blocks/signup-1/signup-1.tsx" } ], "categories": [ "blocks", "auth" ], "meta": { "schema": 1, "tier": "free", "tags": [ "signup", "register", "auth", "password strength", "form", "sso" ], "version": "1.0.0", "updated": "2026-10-01", "ai": { "summary": "A registration page. Pass onSubmit(values) (throw to show an error), onSso (null hides), and benefits / pitch / proof for the left column.", "whenToUse": [ "Self-serve SaaS signup", "Pages that should sell while they collect details" ], "whenNotToUse": [ "Invitation acceptance (use invite-1)", "Multi-step setup (use onboarding-1)" ], "composesWith": [ "login-2", "verify-1", "onboarding-1", "header-2" ], "a11y": [ { "keys": "Submit with errors", "action": "Each error is announced and linked to its field" }, { "keys": "Password field", "action": "The strength guide is announced politely as you type" } ], "customization": [ "onSubmit(values) async; throw for the error state", "benefits, pitch, proof", "onSso: null hides the SSO button" ] }, "examples": [ "signup-1-demo", "signup-1-simple" ], "url": "https://ui.ballmac.com/components/signup-1" } }, { "name": "signup-1-demo", "type": "registry:example", "title": "Signup 1: form with benefits column: Default", "description": "Default example of Signup 1: form with benefits column.", "registryDependencies": [ "https://ui.ballmac.com/r/signup-1.json" ], "files": [ { "path": "registry/examples/signup-1-demo.tsx", "type": "registry:example", "target": "@components/ballmac/examples/signup-1-demo.tsx" } ], "categories": [ "blocks" ], "meta": { "example": true, "of": "signup-1", "tier": "free" } }, { "name": "signup-1-simple", "type": "registry:example", "title": "Signup 1: form with benefits column: No SSO, no pitch", "description": "No SSO, no pitch example of Signup 1: form with benefits column.", "registryDependencies": [ "https://ui.ballmac.com/r/signup-1.json" ], "files": [ { "path": "registry/examples/signup-1-simple.tsx", "type": "registry:example", "target": "@components/ballmac/examples/signup-1-simple.tsx" } ], "categories": [ "blocks" ], "meta": { "example": true, "of": "signup-1", "tier": "free" } }, { "name": "stats-1", "type": "registry:block", "title": "Stats 1: headline metrics with trends", "description": "Four large numbers in a hairline grid that count up on scroll, each with a change badge, a small trend line and one line of context. Heading and copy sit above.", "author": "Ballmac ", "dependencies": [ "lucide-react" ], "registryDependencies": [ "utils", "https://ui.ballmac.com/r/number-ticker.json", "https://ui.ballmac.com/r/sparkline.json" ], "files": [ { "path": "registry/ballmac/components/blocks/stats-1/stats-1.tsx", "type": "registry:component", "target": "@components/ballmac/blocks/stats-1/stats-1.tsx" } ], "categories": [ "blocks", "stats" ], "meta": { "schema": 1, "tier": "free", "tags": [ "stats", "metrics", "numbers", "social proof", "sparkline" ], "version": "1.0.0", "updated": "2026-10-01", "ai": { "summary": "Social proof as numbers. Pass stats=[{ label, value, prefix?, suffix?, decimals?, delta?, trend?, trendLabel?, note? }].", "whenToUse": [ "Under a hero or logo cloud as proof", "Company and about pages" ], "whenNotToUse": [ "Live product dashboards (use stat-card or kpi-row)", "Numbers you cannot back up" ], "composesWith": [ "hero-7", "logo-cloud-1", "testimonials-2", "cta-1" ], "a11y": [], "customization": [ "stats: omit trend and delta for a plain numbers layout", "decimals controls the digits after the point; suffix can be %, k, M+ and so on" ] }, "examples": [ "stats-1-demo", "stats-1-simple" ], "url": "https://ui.ballmac.com/components/stats-1" } }, { "name": "stats-1-demo", "type": "registry:example", "title": "Stats 1: headline metrics with trends: Default", "description": "Default example of Stats 1: headline metrics with trends.", "registryDependencies": [ "https://ui.ballmac.com/r/stats-1.json" ], "files": [ { "path": "registry/examples/stats-1-demo.tsx", "type": "registry:example", "target": "@components/ballmac/examples/stats-1-demo.tsx" } ], "categories": [ "blocks" ], "meta": { "example": true, "of": "stats-1", "tier": "free" } }, { "name": "stats-1-simple", "type": "registry:example", "title": "Stats 1: headline metrics with trends: Numbers only", "description": "Numbers only example of Stats 1: headline metrics with trends.", "registryDependencies": [ "https://ui.ballmac.com/r/stats-1.json" ], "files": [ { "path": "registry/examples/stats-1-simple.tsx", "type": "registry:example", "target": "@components/ballmac/examples/stats-1-simple.tsx" } ], "categories": [ "blocks" ], "meta": { "example": true, "of": "stats-1", "tier": "free" } }, { "name": "team-1", "type": "registry:block", "title": "Team 1: portrait grid with hover bios", "description": "A grid of team portraits with name, role, location and links. On hover or keyboard focus a bio slides up over the photo; phones show it inline. Initial tiles when there is no photo.", "author": "Ballmac ", "dependencies": [ "lucide-react" ], "registryDependencies": [ "utils", "https://ui.ballmac.com/r/button.json", "https://ui.ballmac.com/r/media.json" ], "files": [ { "path": "registry/ballmac/components/blocks/team-1/team-1.tsx", "type": "registry:component", "target": "@components/ballmac/blocks/team-1/team-1.tsx" } ], "categories": [ "blocks", "team" ], "meta": { "schema": 1, "tier": "free", "tags": [ "team", "people", "about", "company", "portraits" ], "version": "1.0.0", "updated": "2026-10-01", "ai": { "summary": "An About-page team section. Pass members=[{ name, role, bio?, location?, image?, links? }].", "whenToUse": [ "About and careers pages", "Showing the humans behind a product" ], "whenNotToUse": [ "Long staff directories (use a table)" ], "composesWith": [ "stats-1", "testimonials-2", "cta-1", "footer-1" ], "a11y": [ { "keys": "Tab", "action": "Focusing a member's link reveals their bio, like hover" } ], "customization": [ "members: { name, role, bio?, location?, image?, links?: { label, href, icon? }[] }[]", "action: link beside the heading (null to hide)" ] }, "examples": [ "team-1-demo", "team-1-small" ], "url": "https://ui.ballmac.com/components/team-1" } }, { "name": "team-1-demo", "type": "registry:example", "title": "Team 1: portrait grid with hover bios: Default", "description": "Default example of Team 1: portrait grid with hover bios.", "registryDependencies": [ "https://ui.ballmac.com/r/team-1.json" ], "files": [ { "path": "registry/examples/team-1-demo.tsx", "type": "registry:example", "target": "@components/ballmac/examples/team-1-demo.tsx" } ], "categories": [ "blocks" ], "meta": { "example": true, "of": "team-1", "tier": "free" } }, { "name": "team-1-small", "type": "registry:example", "title": "Team 1: portrait grid with hover bios: Four people", "description": "Four people example of Team 1: portrait grid with hover bios.", "registryDependencies": [ "https://ui.ballmac.com/r/team-1.json" ], "dependencies": [ "lucide-react" ], "files": [ { "path": "registry/examples/team-1-small.tsx", "type": "registry:example", "target": "@components/ballmac/examples/team-1-small.tsx" } ], "categories": [ "blocks" ], "meta": { "example": true, "of": "team-1", "tier": "free" } }, { "name": "testimonials-1", "type": "registry:block", "title": "Testimonials 1: scrolling wall of quotes", "description": "A wall of testimonial cards in three columns that scroll at different speeds in opposite directions, pausing on hover, with a plain list on phones.", "author": "Ballmac ", "registryDependencies": [ "utils", "https://ui.ballmac.com/r/avatar.json", "https://ui.ballmac.com/r/marquee.json" ], "files": [ { "path": "registry/ballmac/components/blocks/testimonials-1/testimonials-1.tsx", "type": "registry:component", "target": "@components/ballmac/blocks/testimonials-1/testimonials-1.tsx" } ], "categories": [ "blocks", "testimonials" ], "meta": { "schema": 1, "tier": "free", "tags": [ "testimonials", "social proof", "quotes", "marquee" ], "version": "1.0.0", "updated": "2026-09-29", "ai": { "summary": "Social proof section: pass `testimonials` ({ quote, name, role }[]); they are spread across three vertical marquees. Replace the placeholder quotes with real ones.", "whenToUse": [ "Landing pages after features or pricing", "Showing many short quotes without a carousel" ], "whenNotToUse": [ "One or two quotes (use a single large quote in a section)" ], "composesWith": [ "features-1", "pricing-1", "cta-1" ], "a11y": [], "customization": [ "eyebrow, title, description, testimonials props", "Column speed and direction are set per column in the source" ] }, "examples": [ "testimonials-1-demo" ], "url": "https://ui.ballmac.com/components/testimonials-1" } }, { "name": "testimonials-1-demo", "type": "registry:example", "title": "Testimonials 1: scrolling wall of quotes: Default", "description": "Default example of Testimonials 1: scrolling wall of quotes.", "registryDependencies": [ "https://ui.ballmac.com/r/testimonials-1.json" ], "files": [ { "path": "registry/examples/testimonials-1-demo.tsx", "type": "registry:example", "target": "@components/ballmac/examples/testimonials-1-demo.tsx" } ], "categories": [ "blocks" ], "meta": { "example": true, "of": "testimonials-1", "tier": "free" } }, { "name": "testimonials-2", "type": "registry:block", "title": "Testimonials 2: featured quote with avatar picker", "description": "One large quote at a time with the person, role and a highlighted result. A row of avatars switches quotes with arrow keys; optional gentle autoplay that pauses on hover and focus.", "author": "Ballmac ", "dependencies": [ "lucide-react", "motion@^12", "radix-ui" ], "registryDependencies": [ "utils", "https://ui.ballmac.com/r/avatar.json", "https://ui.ballmac.com/r/badge.json", "https://ui.ballmac.com/r/button.json" ], "files": [ { "path": "registry/ballmac/components/blocks/testimonials-2/testimonials-2.tsx", "type": "registry:component", "target": "@components/ballmac/blocks/testimonials-2/testimonials-2.tsx" } ], "categories": [ "blocks", "testimonials" ], "meta": { "schema": 1, "tier": "free", "tags": [ "testimonials", "quote", "carousel", "social proof", "avatars" ], "version": "1.0.0", "updated": "2026-10-01", "ai": { "summary": "A focused testimonial section. Pass items=[{ quote, name, role, company, image?, result? }]; control the index with value/onValueChange or let it manage itself.", "whenToUse": [ "Three to five strong quotes", "Above a pricing or CTA section" ], "whenNotToUse": [ "Many short reviews (use testimonials-1)" ], "composesWith": [ "stats-1", "pricing-2", "cta-1", "logo-cloud-1" ], "a11y": [ { "keys": "Arrow Left / Right", "action": "Moves to the previous or next quote" }, { "keys": "Home / End", "action": "Jumps to the first or last quote" }, { "keys": "Tab", "action": "Moves from the avatars into the quote" } ], "customization": [ "items: { quote, name, role, company, image?, result? }[]", "autoplay: milliseconds between quotes (0 = manual)", "value / defaultValue / onValueChange" ] }, "examples": [ "testimonials-2-demo", "testimonials-2-autoplay" ], "url": "https://ui.ballmac.com/components/testimonials-2" } }, { "name": "testimonials-2-demo", "type": "registry:example", "title": "Testimonials 2: featured quote with avatar picker: Default", "description": "Default example of Testimonials 2: featured quote with avatar picker.", "registryDependencies": [ "https://ui.ballmac.com/r/testimonials-2.json" ], "files": [ { "path": "registry/examples/testimonials-2-demo.tsx", "type": "registry:example", "target": "@components/ballmac/examples/testimonials-2-demo.tsx" } ], "categories": [ "blocks" ], "meta": { "example": true, "of": "testimonials-2", "tier": "free" } }, { "name": "testimonials-2-autoplay", "type": "registry:example", "title": "Testimonials 2: featured quote with avatar picker: Autoplay", "description": "Autoplay example of Testimonials 2: featured quote with avatar picker.", "registryDependencies": [ "https://ui.ballmac.com/r/testimonials-2.json" ], "files": [ { "path": "registry/examples/testimonials-2-autoplay.tsx", "type": "registry:example", "target": "@components/ballmac/examples/testimonials-2-autoplay.tsx" } ], "categories": [ "blocks" ], "meta": { "example": true, "of": "testimonials-2", "tier": "free" } }, { "name": "verify-1", "type": "registry:block", "title": "Verify 1: one-time code with resend", "description": "A code-entry screen: masked email, six slots that accept typing and pasting, automatic submit on the last digit, shake and alert on a wrong code, a resend countdown and an animated success state.", "author": "Ballmac ", "dependencies": [ "lucide-react", "motion@^12" ], "registryDependencies": [ "utils", "https://ui.ballmac.com/r/button.json", "https://ui.ballmac.com/r/input-otp.json" ], "files": [ { "path": "registry/ballmac/components/blocks/verify-1/verify-1.tsx", "type": "registry:component", "target": "@components/ballmac/blocks/verify-1/verify-1.tsx" } ], "categories": [ "blocks", "auth" ], "meta": { "schema": 1, "tier": "free", "tags": [ "verify", "otp", "code", "two-factor", "email", "resend" ], "version": "1.0.0", "updated": "2026-10-01", "ai": { "summary": "Email or SMS code verification. Pass email, length, onVerify(code) (throw for a wrong code) and onResend. Without onVerify any code except all zeros succeeds, so you can try every state.", "whenToUse": [ "Email confirmation after signup", "Two-factor sign-in and sensitive actions" ], "whenNotToUse": [ "Magic links that need no typing" ], "composesWith": [ "signup-1", "login-2", "forgot-password-1", "onboarding-1" ], "a11y": [ { "keys": "Typing or pasting", "action": "Fills the slots; the last digit submits automatically" }, { "keys": "Wrong code", "action": "Announced as an alert, the field is marked invalid and focus returns to it" }, { "keys": "Resend", "action": "The countdown is shown as text; the button is disabled until it ends" } ], "customization": [ "length: digits in the code", "onVerify, onResend, onChangeEmail (null hides)", "resendAfter: seconds" ] }, "examples": [ "verify-1-demo", "verify-1-four" ], "url": "https://ui.ballmac.com/components/verify-1" } }, { "name": "verify-1-demo", "type": "registry:example", "title": "Verify 1: one-time code with resend: Default", "description": "Default example of Verify 1: one-time code with resend.", "registryDependencies": [ "https://ui.ballmac.com/r/verify-1.json" ], "files": [ { "path": "registry/examples/verify-1-demo.tsx", "type": "registry:example", "target": "@components/ballmac/examples/verify-1-demo.tsx" } ], "categories": [ "blocks" ], "meta": { "example": true, "of": "verify-1", "tier": "free" } }, { "name": "verify-1-four", "type": "registry:example", "title": "Verify 1: one-time code with resend: Four digits", "description": "Four digits example of Verify 1: one-time code with resend.", "registryDependencies": [ "https://ui.ballmac.com/r/verify-1.json" ], "files": [ { "path": "registry/examples/verify-1-four.tsx", "type": "registry:example", "target": "@components/ballmac/examples/verify-1-four.tsx" } ], "categories": [ "blocks" ], "meta": { "example": true, "of": "verify-1", "tier": "free" } }, { "name": "blur-fade", "type": "registry:ui", "title": "Blur Fade", "description": "A wrapper that fades content in while it unblurs and slides a few pixels, once it scrolls into view, with a group that staggers its children.", "author": "Ballmac ", "dependencies": [ "motion@^12" ], "registryDependencies": [ "utils" ], "files": [ { "path": "registry/ballmac/components/blur-fade.tsx", "type": "registry:ui", "target": "@components/ballmac/blur-fade.tsx" } ], "categories": [ "motion" ], "meta": { "schema": 1, "tier": "free", "tags": [ "fade", "blur", "reveal", "scroll", "stagger" ], "version": "1.0.0", "updated": "2026-10-01", "ai": { "summary": "Wrap anything in . wraps each child and staggers them. Shows content instantly under reduced motion.", "whenToUse": [ "Hero and section intros", "Lists and cards that should arrive in sequence" ], "whenNotToUse": [ "Text that should animate letter by letter (text-animate)", "Content that must be visible without JavaScript before hydration" ], "composesWith": [ "text-animate", "bento-grid", "card" ], "a11y": [ { "keys": "Reduced motion", "action": "Content appears at once with no blur or travel" }, { "keys": "Screen readers", "action": "Content is in the DOM from the start; only opacity, blur and position change" } ], "customization": [ "direction: up | down | left | right | none", "offset and blur amounts", "inView, once, delay, duration", "BlurFadeGroup stagger and item settings" ] }, "examples": [ "blur-fade-demo", "blur-fade-directions" ], "url": "https://ui.ballmac.com/components/blur-fade" } }, { "name": "blur-fade-demo", "type": "registry:example", "title": "Blur Fade: Staggered page intro", "description": "Staggered page intro example of Blur Fade.", "registryDependencies": [ "https://ui.ballmac.com/r/blur-fade.json" ], "files": [ { "path": "registry/examples/blur-fade-demo.tsx", "type": "registry:example", "target": "@components/ballmac/examples/blur-fade-demo.tsx" } ], "categories": [ "motion" ], "meta": { "example": true, "of": "blur-fade", "tier": "free" } }, { "name": "blur-fade-directions", "type": "registry:example", "title": "Blur Fade: Directions and blur", "description": "Directions and blur example of Blur Fade.", "registryDependencies": [ "https://ui.ballmac.com/r/blur-fade.json" ], "files": [ { "path": "registry/examples/blur-fade-directions.tsx", "type": "registry:example", "target": "@components/ballmac/examples/blur-fade-directions.tsx" } ], "categories": [ "motion" ], "meta": { "example": true, "of": "blur-fade", "tier": "free" } }, { "name": "border-beam", "type": "registry:ui", "title": "Border Beam", "description": "A short beam of light that travels around the inside edge of its parent's border at a constant speed. Decorative, token-colored, hidden under reduced motion.", "author": "Ballmac ", "dependencies": [ "motion@^12" ], "registryDependencies": [ "utils" ], "files": [ { "path": "registry/ballmac/components/border-beam.tsx", "type": "registry:ui", "target": "@components/ballmac/border-beam.tsx" } ], "categories": [ "motion" ], "meta": { "schema": 1, "tier": "free", "tags": [ "border", "glow", "highlight", "decorative", "motion" ], "version": "1.0.0", "updated": "2026-09-28", "ai": { "summary": "Drop as the last child of any element with position: relative and a border radius; it inherits the radius and draws only in a borderWidth-thick ring (aria-hidden, pointer-events-none). Renders a span, so it is valid inside buttons.", "whenToUse": [ "Drawing attention to one highlighted card, such as the recommended pricing plan", "Marking a live or running state on a panel (an agent working, a deploy in progress)", "A featured call-to-action button" ], "whenNotToUse": [ "Several elements on the same screen; one beam per view", "Communicating status on its own (pair it with text; it is hidden under reduced motion)" ], "composesWith": [ "spotlight-card", "button", "magnetic-button" ], "a11y": [], "customization": [ "duration (s per lap, default 8), delay, reverse", "size: beam length in px (default 80); borderWidth: ring thickness in px (default 1)", "colorFrom / colorTo: any CSS color, default var(--ring) fading out; try var(--chart-2)", "Two beams with delay={duration / 2} give an opposed pair; className=\"-inset-px\" moves the ring onto a 1px parent border", "Needs CSS offset-path rect() (Chrome 116, Firefox 122, Safari 17.2); older browsers simply don't show the beam" ] }, "source": { "name": "Magic UI Border Beam", "url": "https://github.com/magicuidesign/magicui", "license": "MIT", "copyright": "Copyright (c) Magic UI", "modified": true }, "examples": [ "border-beam-demo", "border-beam-button" ], "url": "https://ui.ballmac.com/components/border-beam" } }, { "name": "border-beam-demo", "type": "registry:example", "title": "Border Beam: Card", "description": "Card example of Border Beam.", "registryDependencies": [ "https://ui.ballmac.com/r/border-beam.json" ], "files": [ { "path": "registry/examples/border-beam-demo.tsx", "type": "registry:example", "target": "@components/ballmac/examples/border-beam-demo.tsx" } ], "categories": [ "motion" ], "meta": { "example": true, "of": "border-beam", "tier": "free" } }, { "name": "border-beam-button", "type": "registry:example", "title": "Border Beam: Button", "description": "Button example of Border Beam.", "registryDependencies": [ "https://ui.ballmac.com/r/border-beam.json", "https://ui.ballmac.com/r/button.json" ], "dependencies": [ "lucide-react" ], "files": [ { "path": "registry/examples/border-beam-button.tsx", "type": "registry:example", "target": "@components/ballmac/examples/border-beam-button.tsx" } ], "categories": [ "motion" ], "meta": { "example": true, "of": "border-beam", "tier": "free" } }, { "name": "breadcrumb", "type": "registry:ui", "title": "Breadcrumb", "description": "A compact navigation trail with truncation, semantic current page, and visible keyboard focus.", "author": "Ballmac ", "dependencies": [ "lucide-react" ], "registryDependencies": [ "utils", "https://ui.ballmac.com/r/i18n.json" ], "files": [ { "path": "registry/ballmac/components/breadcrumb.tsx", "type": "registry:ui", "target": "@components/ballmac/breadcrumb.tsx" } ], "categories": [ "navigation" ], "meta": { "schema": 1, "tier": "free", "tags": [ "navigation", "hierarchy", "links" ], "version": "1.0.0", "updated": "2026-09-29", "ai": { "summary": "A compact navigation trail with truncation, semantic current page, and visible keyboard focus.", "whenToUse": [ "Show a location inside a deep hierarchy", "Provide a way back to parent sections" ], "whenNotToUse": [ "Use tabs for switching peer views" ], "composesWith": [ "pagination" ], "a11y": [ { "keys": "Tab", "action": "moves among breadcrumb links" } ], "customization": [ "aria-label: name the navigation landmark" ] }, "source": { "name": "shadcn/ui Breadcrumb", "url": "https://github.com/shadcn-ui/ui", "license": "MIT", "copyright": "Copyright (c) 2023 shadcn", "modified": true }, "examples": [ "breadcrumb-demo", "breadcrumb-states" ], "url": "https://ui.ballmac.com/components/breadcrumb" } }, { "name": "breadcrumb-demo", "type": "registry:example", "title": "Breadcrumb: Overview", "description": "Overview example of Breadcrumb.", "registryDependencies": [ "https://ui.ballmac.com/r/breadcrumb.json" ], "files": [ { "path": "registry/examples/breadcrumb-demo.tsx", "type": "registry:example", "target": "@components/ballmac/examples/breadcrumb-demo.tsx" } ], "categories": [ "navigation" ], "meta": { "example": true, "of": "breadcrumb", "tier": "free" } }, { "name": "breadcrumb-states", "type": "registry:example", "title": "Breadcrumb: States and variants", "description": "States and variants example of Breadcrumb.", "registryDependencies": [ "https://ui.ballmac.com/r/breadcrumb.json" ], "files": [ { "path": "registry/examples/breadcrumb-states.tsx", "type": "registry:example", "target": "@components/ballmac/examples/breadcrumb-states.tsx" } ], "categories": [ "navigation" ], "meta": { "example": true, "of": "breadcrumb", "tier": "free" } }, { "name": "browser-frame", "type": "registry:ui", "title": "Browser Frame", "description": "A Safari-style window with traffic lights, a padlocked address field and optional tabs. Children render as the page, either at natural size or laid out at desktop width and scaled to fit.", "author": "Ballmac ", "dependencies": [ "lucide-react" ], "registryDependencies": [ "utils", "https://ui.ballmac.com/r/i18n.json", "https://ui.ballmac.com/r/media.json" ], "files": [ { "path": "registry/ballmac/components/browser-frame.tsx", "type": "registry:ui", "target": "@components/ballmac/browser-frame.tsx" } ], "categories": [ "devices" ], "meta": { "schema": 1, "tier": "free", "tags": [ "mockup", "browser", "safari", "window", "screenshot", "website", "hero" ], "version": "1.0.0", "updated": "2026-09-29", "ai": { "summary": "Wrap web content in . Pass screenWidth={1280} (plus aspectRatio) to render a full desktop layout scaled down, tabs={[\"Home\", \"Docs\"]} for a tab strip, or src for a screenshot. Chrome colors follow the theme tokens.", "whenToUse": [ "Showing a website or web app on a landing page or in docs", "Template and theme galleries", "Before/after comparisons of a web page" ], "whenNotToUse": [ "Native desktop apps (use laptop-frame, or a plain window)", "Mobile layouts (use phone-frame)" ], "composesWith": [ "laptop-frame", "phone-frame" ], "a11y": [], "customization": [ "url, secure (padlock), tabs (strings or { title, icon }), activeTab", "screenWidth + aspectRatio for a scaled desktop layout; omit both for natural size", "Traffic-light colors: override --traffic-close, --traffic-minimize, --traffic-zoom", "Parts: [data-slot=browser-frame-toolbar], -address, -tabs, -screen" ] }, "examples": [ "browser-frame-demo", "browser-frame-minimal" ], "url": "https://ui.ballmac.com/components/browser-frame" } }, { "name": "browser-frame-demo", "type": "registry:example", "title": "Browser Frame: Landing page with tabs", "description": "Landing page with tabs example of Browser Frame.", "registryDependencies": [ "https://ui.ballmac.com/r/browser-frame.json" ], "dependencies": [ "lucide-react" ], "files": [ { "path": "registry/examples/browser-frame-demo.tsx", "type": "registry:example", "target": "@components/ballmac/examples/browser-frame-demo.tsx" } ], "categories": [ "devices" ], "meta": { "example": true, "of": "browser-frame", "tier": "free" } }, { "name": "browser-frame-minimal", "type": "registry:example", "title": "Browser Frame: Natural size", "description": "Natural size example of Browser Frame.", "registryDependencies": [ "https://ui.ballmac.com/r/browser-frame.json" ], "files": [ { "path": "registry/examples/browser-frame-minimal.tsx", "type": "registry:example", "target": "@components/ballmac/examples/browser-frame-minimal.tsx" } ], "categories": [ "devices" ], "meta": { "example": true, "of": "browser-frame", "tier": "free" } }, { "name": "button-group", "type": "registry:ui", "title": "Button Group", "description": "Join adjacent actions into one compact control surface while retaining each button's visible keyboard focus and accessible name.", "author": "Ballmac ", "registryDependencies": [ "utils" ], "files": [ { "path": "registry/ballmac/components/button-group.tsx", "type": "registry:ui", "target": "@components/ballmac/button-group.tsx" } ], "categories": [ "primitives" ], "meta": { "schema": 1, "tier": "free", "tags": [ "buttons", "actions", "toolbar" ], "version": "1.0.0", "updated": "2026-09-30", "ai": { "summary": "Groups closely related actions without turning them into a selection widget.", "whenToUse": [ "Adjacent document or editor actions", "Compact controls with one shared boundary" ], "whenNotToUse": [ "Mutually exclusive options; use toggle-group", "Unrelated actions" ], "composesWith": [ "button" ], "a11y": [ { "keys": "Tab", "action": "Moves between each button in document order" }, { "keys": "Enter / Space", "action": "Activates the focused button" } ], "customization": [ "orientation: horizontal | vertical", "button and text parts" ] }, "examples": [ "button-group-demo", "button-group-states" ], "url": "https://ui.ballmac.com/components/button-group" } }, { "name": "button-group-demo", "type": "registry:example", "title": "Button Group: Document actions", "description": "Document actions example of Button Group.", "registryDependencies": [ "https://ui.ballmac.com/r/button-group.json" ], "dependencies": [ "lucide-react" ], "files": [ { "path": "registry/examples/button-group-demo.tsx", "type": "registry:example", "target": "@components/ballmac/examples/button-group-demo.tsx" } ], "categories": [ "primitives" ], "meta": { "example": true, "of": "button-group", "tier": "free" } }, { "name": "button-group-states", "type": "registry:example", "title": "Button Group: Orientations", "description": "Orientations example of Button Group.", "registryDependencies": [ "https://ui.ballmac.com/r/button-group.json" ], "dependencies": [ "lucide-react" ], "files": [ { "path": "registry/examples/button-group-states.tsx", "type": "registry:example", "target": "@components/ballmac/examples/button-group-states.tsx" } ], "categories": [ "primitives" ], "meta": { "example": true, "of": "button-group", "tier": "free" } }, { "name": "button", "type": "registry:ui", "title": "Button", "description": "A button with six variants, three sizes, a pill shape and a built-in loading state. buttonVariants() styles links the same way.", "author": "Ballmac ", "dependencies": [ "radix-ui", "class-variance-authority" ], "registryDependencies": [ "utils" ], "files": [ { "path": "registry/ballmac/components/button.tsx", "type": "registry:ui", "target": "@components/ballmac/button.tsx" } ], "categories": [ "primitives" ], "meta": { "schema": 1, "tier": "free", "tags": [ "button", "cta", "loading", "radix" ], "version": "1.0.0", "updated": "2026-09-28", "ai": { "summary": "The base action control. Use variant for emphasis, size for density, and loading while an async action runs.", "whenToUse": [ "Primary and secondary actions", "Form submit buttons", "Links that should look like buttons (className={buttonVariants()} on an )" ], "whenNotToUse": [ "Navigation inside running text (use a link)", "Toggling state (use a switch or toggle)" ], "composesWith": [ "kbd", "tooltip" ], "a11y": [ { "keys": "Enter / Space", "action": "Activates the button" }, { "keys": "Tab", "action": "Moves focus to the button" } ], "customization": [ "variant: default | secondary | outline | ghost | link | destructive", "size: sm | default | lg | icon | icon-sm", "shape: default | pill" ] }, "source": { "name": "shadcn/ui Button", "url": "https://github.com/shadcn-ui/ui", "license": "MIT", "copyright": "Copyright (c) 2023 shadcn", "modified": true }, "examples": [ "button-demo", "button-variants", "button-loading" ], "url": "https://ui.ballmac.com/components/button" } }, { "name": "button-demo", "type": "registry:example", "title": "Button: Default", "description": "Default example of Button.", "registryDependencies": [ "https://ui.ballmac.com/r/button.json" ], "dependencies": [ "lucide-react" ], "files": [ { "path": "registry/examples/button-demo.tsx", "type": "registry:example", "target": "@components/ballmac/examples/button-demo.tsx" } ], "categories": [ "primitives" ], "meta": { "example": true, "of": "button", "tier": "free" } }, { "name": "button-variants", "type": "registry:example", "title": "Button: Variants", "description": "Variants example of Button.", "registryDependencies": [ "https://ui.ballmac.com/r/button.json" ], "files": [ { "path": "registry/examples/button-variants.tsx", "type": "registry:example", "target": "@components/ballmac/examples/button-variants.tsx" } ], "categories": [ "primitives" ], "meta": { "example": true, "of": "button", "tier": "free" } }, { "name": "button-loading", "type": "registry:example", "title": "Button: Loading", "description": "Loading example of Button.", "registryDependencies": [ "https://ui.ballmac.com/r/button.json" ], "files": [ { "path": "registry/examples/button-loading.tsx", "type": "registry:example", "target": "@components/ballmac/examples/button-loading.tsx" } ], "categories": [ "primitives" ], "meta": { "example": true, "of": "button", "tier": "free" } }, { "name": "calendar-agenda", "type": "registry:ui", "title": "Calendar Agenda", "description": "A day agenda with native date entry, adjacent-day controls, and accessible event times.", "author": "Ballmac ", "dependencies": [ "lucide-react" ], "registryDependencies": [ "utils", "https://ui.ballmac.com/r/i18n.json" ], "files": [ { "path": "registry/ballmac/components/calendar-agenda.tsx", "type": "registry:ui", "target": "@components/ballmac/calendar-agenda.tsx" } ], "categories": [ "data-display" ], "meta": { "schema": 1, "tier": "free", "tags": [ "calendar", "agenda", "events" ], "version": "1.0.0", "updated": "2026-09-30", "ai": { "summary": "A day agenda with native date entry, adjacent-day controls, and accessible event times.", "whenToUse": [ "Show scheduled events for one day" ], "whenNotToUse": [ "Use a full calendar for month-level date picking" ], "composesWith": [ "timeline" ], "a11y": [ { "keys": "Tab / Enter / Space", "action": "Changes the day through native date input and buttons" } ], "customization": [ "Controlled and uncontrolled state", "Content and token-based className styling" ] }, "examples": [ "calendar-agenda-demo", "calendar-agenda-states" ], "url": "https://ui.ballmac.com/components/calendar-agenda" } }, { "name": "calendar-agenda-demo", "type": "registry:example", "title": "Calendar Agenda: Overview", "description": "Overview example of Calendar Agenda.", "registryDependencies": [ "https://ui.ballmac.com/r/calendar-agenda.json" ], "files": [ { "path": "registry/examples/calendar-agenda-demo.tsx", "type": "registry:example", "target": "@components/ballmac/examples/calendar-agenda-demo.tsx" } ], "categories": [ "data-display" ], "meta": { "example": true, "of": "calendar-agenda", "tier": "free" } }, { "name": "calendar-agenda-states", "type": "registry:example", "title": "Calendar Agenda: States and variants", "description": "States and variants example of Calendar Agenda.", "registryDependencies": [ "https://ui.ballmac.com/r/calendar-agenda.json" ], "files": [ { "path": "registry/examples/calendar-agenda-states.tsx", "type": "registry:example", "target": "@components/ballmac/examples/calendar-agenda-states.tsx" } ], "categories": [ "data-display" ], "meta": { "example": true, "of": "calendar-agenda", "tier": "free" } }, { "name": "calendar", "type": "registry:ui", "title": "Calendar", "description": "A date grid for one day, several days or a range, with month and year selects, week numbers, disabled rules and range-end styling, on React DayPicker.", "author": "Ballmac ", "dependencies": [ "react-day-picker@^9", "lucide-react" ], "registryDependencies": [ "utils", "https://ui.ballmac.com/r/direction.json" ], "files": [ { "path": "registry/ballmac/components/calendar.tsx", "type": "registry:ui", "target": "@components/ballmac/calendar.tsx" } ], "categories": [ "forms" ], "meta": { "schema": 1, "tier": "free", "tags": [ "date", "calendar", "range", "day-picker" ], "version": "1.0.0", "updated": "2026-09-30", "ai": { "summary": "Use mode single, multiple or range with selected and onSelect. All DayPicker props work: disabled, numberOfMonths, captionLayout dropdown, locale.", "whenToUse": [ "Choosing a date or range inside a card or popover", "Booking and scheduling", "Showing availability with disabled days" ], "whenNotToUse": [ "A date field in a form; use date-picker", "Typing a range with inputs; use date-range-picker" ], "composesWith": [ "popover", "date-picker", "button" ], "a11y": [ { "keys": "Arrow keys", "action": "Move between days" }, { "keys": "PageUp / PageDown", "action": "Previous or next month; with Shift, previous or next year" }, { "keys": "Home / End", "action": "First or last day of the week" }, { "keys": "Enter / Space", "action": "Selects the focused day" } ], "customization": [ "mode: single | multiple | range", "captionLayout dropdown with startMonth and endMonth", "disabled rules and max selection", "bordered surface", "footer text" ] }, "source": { "name": "shadcn/ui Calendar", "url": "https://github.com/shadcn-ui/ui", "license": "MIT", "copyright": "Copyright (c) 2023 shadcn", "modified": true }, "examples": [ "calendar-demo", "calendar-states" ], "url": "https://ui.ballmac.com/components/calendar" } }, { "name": "calendar-demo", "type": "registry:example", "title": "Calendar: Date range", "description": "Date range example of Calendar.", "registryDependencies": [ "https://ui.ballmac.com/r/calendar.json" ], "dependencies": [ "react-day-picker@^9" ], "files": [ { "path": "registry/examples/calendar-demo.tsx", "type": "registry:example", "target": "@components/ballmac/examples/calendar-demo.tsx" } ], "categories": [ "forms" ], "meta": { "example": true, "of": "calendar", "tier": "free" } }, { "name": "calendar-states", "type": "registry:example", "title": "Calendar: Dropdowns and multiple", "description": "Dropdowns and multiple example of Calendar.", "registryDependencies": [ "https://ui.ballmac.com/r/calendar.json" ], "files": [ { "path": "registry/examples/calendar-states.tsx", "type": "registry:example", "target": "@components/ballmac/examples/calendar-states.tsx" } ], "categories": [ "forms" ], "meta": { "example": true, "of": "calendar", "tier": "free" } }, { "name": "callout", "type": "registry:ui", "title": "Callout", "description": "An editorial guidance panel with a clear kind label, icon, title, and optional action.", "author": "Ballmac ", "dependencies": [ "lucide-react" ], "registryDependencies": [ "utils" ], "files": [ { "path": "registry/ballmac/components/callout.tsx", "type": "registry:ui", "target": "@components/ballmac/callout.tsx" } ], "categories": [ "feedback" ], "meta": { "schema": 1, "tier": "free", "tags": [ "guidance", "tip", "note" ], "version": "1.0.0", "updated": "2026-09-30", "ai": { "summary": "An editorial guidance panel with a clear kind label, icon, title, and optional action.", "whenToUse": [ "Add contextual guidance to docs or settings", "Explain a recommended next step" ], "whenNotToUse": [ "Use alert for urgent system feedback" ], "composesWith": [ "alert", "button" ], "a11y": [ { "keys": "Tab", "action": "Focus an optional action" } ], "customization": [ "kind: tip | note | caution", "Action slot and content" ] }, "examples": [ "callout-demo", "callout-states" ], "url": "https://ui.ballmac.com/components/callout" } }, { "name": "callout-demo", "type": "registry:example", "title": "Callout: Overview", "description": "Overview example of Callout.", "registryDependencies": [ "https://ui.ballmac.com/r/callout.json" ], "files": [ { "path": "registry/examples/callout-demo.tsx", "type": "registry:example", "target": "@components/ballmac/examples/callout-demo.tsx" } ], "categories": [ "feedback" ], "meta": { "example": true, "of": "callout", "tier": "free" } }, { "name": "callout-states", "type": "registry:example", "title": "Callout: States and variants", "description": "States and variants example of Callout.", "registryDependencies": [ "https://ui.ballmac.com/r/callout.json" ], "files": [ { "path": "registry/examples/callout-states.tsx", "type": "registry:example", "target": "@components/ballmac/examples/callout-states.tsx" } ], "categories": [ "feedback" ], "meta": { "example": true, "of": "callout", "tier": "free" } }, { "name": "card", "type": "registry:ui", "title": "Card", "description": "A composable content surface with compact spacing, an action slot, and optional interactive feedback.", "author": "Ballmac ", "registryDependencies": [ "utils" ], "files": [ { "path": "registry/ballmac/components/card.tsx", "type": "registry:ui", "target": "@components/ballmac/card.tsx" } ], "categories": [ "data-display" ], "meta": { "schema": 1, "tier": "free", "tags": [ "surface", "panel", "dashboard" ], "version": "1.0.0", "updated": "2026-09-29", "ai": { "summary": "A composable content surface with compact spacing, an action slot, and optional interactive feedback.", "whenToUse": [ "Group a related set of content and actions", "Present a dashboard metric or settings panel" ], "whenNotToUse": [ "Use an alert for status messages" ], "composesWith": [ "button", "badge" ], "a11y": [ { "keys": "Tab", "action": "reaches controls and links inside the card" } ], "customization": [ "size: default | sm", "interactive: emphasize cards with controls" ] }, "source": { "name": "shadcn/ui Card", "url": "https://github.com/shadcn-ui/ui", "license": "MIT", "copyright": "Copyright (c) 2023 shadcn", "modified": true }, "examples": [ "card-demo", "card-states" ], "url": "https://ui.ballmac.com/components/card" } }, { "name": "card-demo", "type": "registry:example", "title": "Card: Overview", "description": "Overview example of Card.", "registryDependencies": [ "https://ui.ballmac.com/r/card.json", "https://ui.ballmac.com/r/badge.json" ], "dependencies": [ "lucide-react" ], "files": [ { "path": "registry/examples/card-demo.tsx", "type": "registry:example", "target": "@components/ballmac/examples/card-demo.tsx" } ], "categories": [ "data-display" ], "meta": { "example": true, "of": "card", "tier": "free" } }, { "name": "card-states", "type": "registry:example", "title": "Card: States and variants", "description": "States and variants example of Card.", "registryDependencies": [ "https://ui.ballmac.com/r/card.json" ], "files": [ { "path": "registry/examples/card-states.tsx", "type": "registry:example", "target": "@components/ballmac/examples/card-states.tsx" } ], "categories": [ "data-display" ], "meta": { "example": true, "of": "card", "tier": "free" } }, { "name": "carousel", "type": "registry:ui", "title": "Carousel", "description": "A swipeable, keyboard-operable carousel on Embla with slide labels, dot pagination, vertical mode, loop, and autoplay that pauses on hover, focus and reduced motion.", "author": "Ballmac ", "dependencies": [ "embla-carousel-react@^8", "lucide-react" ], "registryDependencies": [ "utils", "https://ui.ballmac.com/r/motion-presets.json", "https://ui.ballmac.com/r/i18n.json", "https://ui.ballmac.com/r/direction.json" ], "files": [ { "path": "registry/ballmac/components/carousel.tsx", "type": "registry:ui", "target": "@components/ballmac/carousel.tsx" } ], "categories": [ "data-display" ], "meta": { "schema": 1, "tier": "free", "tags": [ "slider", "swipe", "slides", "embla" ], "version": "1.0.0", "updated": "2026-09-30", "ai": { "summary": "Compose Carousel, CarouselContent and CarouselItem with CarouselPrevious, CarouselNext, CarouselDots and CarouselPlayPause. Give Carousel a label.", "whenToUse": [ "Feature highlights and testimonials", "Product image galleries", "Horizontal lists that overflow" ], "whenNotToUse": [ "Content people must read in full; show it all", "A marquee of logos; use marquee" ], "composesWith": [ "card", "button" ], "a11y": [ { "keys": "ArrowLeft / ArrowRight", "action": "Previous or next slide (Up / Down when vertical)" }, { "keys": "Tab", "action": "Reaches arrows, dots and the pause button" }, { "keys": "Swipe / drag", "action": "Moves slides with touch or mouse" } ], "customization": [ "opts (loop, align, slidesToScroll)", "orientation", "autoplay in ms", "item basis classes for several visible slides" ] }, "source": { "name": "shadcn/ui Carousel", "url": "https://github.com/shadcn-ui/ui", "license": "MIT", "copyright": "Copyright (c) 2023 shadcn", "modified": true }, "examples": [ "carousel-demo", "carousel-states" ], "url": "https://ui.ballmac.com/components/carousel" } }, { "name": "carousel-demo", "type": "registry:example", "title": "Carousel: Product highlights", "description": "Product highlights example of Carousel.", "registryDependencies": [ "https://ui.ballmac.com/r/carousel.json" ], "dependencies": [ "lucide-react" ], "files": [ { "path": "registry/examples/carousel-demo.tsx", "type": "registry:example", "target": "@components/ballmac/examples/carousel-demo.tsx" } ], "categories": [ "data-display" ], "meta": { "example": true, "of": "carousel", "tier": "free" } }, { "name": "carousel-states", "type": "registry:example", "title": "Carousel: Multiple and vertical", "description": "Multiple and vertical example of Carousel.", "registryDependencies": [ "https://ui.ballmac.com/r/carousel.json" ], "files": [ { "path": "registry/examples/carousel-states.tsx", "type": "registry:example", "target": "@components/ballmac/examples/carousel-states.tsx" } ], "categories": [ "data-display" ], "meta": { "example": true, "of": "carousel", "tier": "free" } }, { "name": "changelog-feed", "type": "registry:ui", "title": "Changelog Feed", "description": "A release-notes feed with a sticky date and version column, change-type labels, optional media, filter chips with counts and show-more for long releases.", "author": "Ballmac ", "dependencies": [ "motion@^12", "lucide-react" ], "registryDependencies": [ "utils", "https://ui.ballmac.com/r/motion-presets.json", "https://ui.ballmac.com/r/i18n.json" ], "files": [ { "path": "registry/ballmac/components/changelog-feed.tsx", "type": "registry:ui", "target": "@components/ballmac/changelog-feed.tsx" } ], "categories": [ "saas" ], "meta": { "schema": 1, "tier": "free", "tags": [ "changelog", "release notes", "updates", "timeline" ], "version": "1.0.0", "updated": "2026-09-30", "ai": { "summary": "entries[] with {id,version,date (ISO),title,summary,changes:[{type,text}],media}. Types: new | improved | fixed | removed. Dates format in UTC.", "whenToUse": [ "Product changelog pages", "What's-new surfaces" ], "whenNotToUse": [ "Activity of people on a record; use activity-feed", "A single status message; use banner" ], "composesWith": [ "timeline", "activity-feed", "badge" ], "a11y": [ { "keys": "Tab", "action": "Filter chips and show-more are buttons with aria-pressed / aria-expanded" }, { "keys": "Screen readers", "action": "Each release is an article with a time element; change types have text labels" } ], "customization": [ "filterable", "collapsedCount", "locale", "media" ] }, "examples": [ "changelog-feed-demo", "changelog-feed-states" ], "url": "https://ui.ballmac.com/components/changelog-feed" } }, { "name": "changelog-feed-demo", "type": "registry:example", "title": "Changelog Feed: Release notes", "description": "Release notes example of Changelog Feed.", "registryDependencies": [ "https://ui.ballmac.com/r/changelog-feed.json" ], "files": [ { "path": "registry/examples/changelog-feed-demo.tsx", "type": "registry:example", "target": "@components/ballmac/examples/changelog-feed-demo.tsx" } ], "categories": [ "saas" ], "meta": { "example": true, "of": "changelog-feed", "tier": "free" } }, { "name": "changelog-feed-states", "type": "registry:example", "title": "Changelog Feed: Single release with media", "description": "Single release with media example of Changelog Feed.", "registryDependencies": [ "https://ui.ballmac.com/r/changelog-feed.json" ], "dependencies": [ "lucide-react" ], "files": [ { "path": "registry/examples/changelog-feed-states.tsx", "type": "registry:example", "target": "@components/ballmac/examples/changelog-feed-states.tsx" } ], "categories": [ "saas" ], "meta": { "example": true, "of": "changelog-feed", "tier": "free" } }, { "name": "chart", "type": "registry:ui", "title": "Chart", "description": "Theme-aware chart wrapper for Recharts with token colors, a styled tooltip and legend, a named figure with a screen-reader summary, and keyboard navigation.", "author": "Ballmac ", "dependencies": [ "recharts@^3" ], "registryDependencies": [ "utils" ], "files": [ { "path": "registry/ballmac/components/chart.tsx", "type": "registry:ui", "target": "@components/ballmac/chart.tsx" } ], "categories": [ "data-display" ], "meta": { "schema": 1, "tier": "free", "tags": [ "chart", "recharts", "graph", "data" ], "version": "1.0.0", "updated": "2026-09-30", "ai": { "summary": "Wrap any Recharts chart in ChartContainer with a config of label and color per series. Use ChartTooltipContent and ChartLegendContent. Always pass label and summary.", "whenToUse": [ "Dashboards and reports", "Trends, comparisons and proportions" ], "whenNotToUse": [ "A tiny inline trend; use sparkline", "A single ring value; use progress-ring" ], "composesWith": [ "card", "stat-card" ], "a11y": [ { "keys": "Arrow keys", "action": "Move between data points (accessibilityLayer)" }, { "keys": "Screen readers", "action": "Read the figure name and summary" } ], "customization": [ "config colors via chart tokens", "tooltip indicator: dot | line | dashed", "legend content", "summary text for assistive tech" ] }, "source": { "name": "shadcn/ui Chart", "url": "https://github.com/shadcn-ui/ui", "license": "MIT", "copyright": "Copyright (c) 2023 shadcn", "modified": true }, "examples": [ "chart-demo", "chart-bars", "chart-donut" ], "url": "https://ui.ballmac.com/components/chart" } }, { "name": "chart-demo", "type": "registry:example", "title": "Chart: Revenue area chart", "description": "Revenue area chart example of Chart.", "registryDependencies": [ "https://ui.ballmac.com/r/chart.json" ], "dependencies": [ "recharts@^3" ], "files": [ { "path": "registry/examples/chart-demo.tsx", "type": "registry:example", "target": "@components/ballmac/examples/chart-demo.tsx" } ], "categories": [ "data-display" ], "meta": { "example": true, "of": "chart", "tier": "free" } }, { "name": "chart-bars", "type": "registry:example", "title": "Chart: Grouped bars", "description": "Grouped bars example of Chart.", "registryDependencies": [ "https://ui.ballmac.com/r/chart.json" ], "dependencies": [ "recharts@^3" ], "files": [ { "path": "registry/examples/chart-bars.tsx", "type": "registry:example", "target": "@components/ballmac/examples/chart-bars.tsx" } ], "categories": [ "data-display" ], "meta": { "example": true, "of": "chart", "tier": "free" } }, { "name": "chart-donut", "type": "registry:example", "title": "Chart: Donut", "description": "Donut example of Chart.", "registryDependencies": [ "https://ui.ballmac.com/r/chart.json" ], "dependencies": [ "recharts@^3" ], "files": [ { "path": "registry/examples/chart-donut.tsx", "type": "registry:example", "target": "@components/ballmac/examples/chart-donut.tsx" } ], "categories": [ "data-display" ], "meta": { "example": true, "of": "chart", "tier": "free" } }, { "name": "chat-attachment", "type": "registry:ui", "title": "Chat Attachment", "description": "File chips and image tiles for composers and messages, with type detection, sizes, upload progress, failed-upload retry, remove and open actions, and animated list changes.", "author": "Ballmac ", "dependencies": [ "motion@^12", "lucide-react" ], "registryDependencies": [ "utils", "https://ui.ballmac.com/r/i18n.json" ], "files": [ { "path": "registry/ballmac/components/chat-attachment.tsx", "type": "registry:ui", "target": "@components/ballmac/chat-attachment.tsx" } ], "categories": [ "ai" ], "meta": { "schema": 1, "tier": "free", "tags": [ "ai", "chat", "attachment", "file", "upload", "image" ], "version": "1.0.0", "updated": "2026-09-30", "ai": { "summary": " holds . Kind and icon come from the MIME type or extension. Also exports formatFileSize and attachmentKind.", "whenToUse": [ "Files staged in a prompt input before sending", "Attachments shown inside a sent message" ], "whenNotToUse": [ "A drag and drop upload area", "Generic file tables" ], "composesWith": [ "prompt-input", "ai-message" ], "a11y": [ { "keys": "Tab", "action": "Reaches open, retry and remove for each file" }, { "keys": "Enter / Space", "action": "Runs the focused action" }, { "keys": "Screen readers", "action": "List of attachments, buttons named 'Remove report.pdf', and a progressbar per upload" } ], "customization": [ "variant: chip | tile", "status: ready | uploading | error", "progress 0 to 100", "error text" ] }, "examples": [ "chat-attachment-demo", "chat-attachment-tiles" ], "url": "https://ui.ballmac.com/components/chat-attachment" } }, { "name": "chat-attachment-demo", "type": "registry:example", "title": "Chat Attachment: Chips with upload states", "description": "Chips with upload states example of Chat Attachment.", "registryDependencies": [ "https://ui.ballmac.com/r/chat-attachment.json" ], "files": [ { "path": "registry/examples/chat-attachment-demo.tsx", "type": "registry:example", "target": "@components/ballmac/examples/chat-attachment-demo.tsx" } ], "categories": [ "ai" ], "meta": { "example": true, "of": "chat-attachment", "tier": "free" } }, { "name": "chat-attachment-tiles", "type": "registry:example", "title": "Chat Attachment: Image tiles", "description": "Image tiles example of Chat Attachment.", "registryDependencies": [ "https://ui.ballmac.com/r/chat-attachment.json" ], "files": [ { "path": "registry/examples/chat-attachment-tiles.tsx", "type": "registry:example", "target": "@components/ballmac/examples/chat-attachment-tiles.tsx" } ], "categories": [ "ai" ], "meta": { "example": true, "of": "chat-attachment", "tier": "free" } }, { "name": "checkbox", "type": "registry:ui", "title": "Checkbox", "description": "A Radix checkbox with checked and indeterminate (mixed) states, a check or minus icon, focus ring and invalid styling, for forms and select-all lists.", "author": "Ballmac ", "dependencies": [ "radix-ui", "lucide-react" ], "registryDependencies": [ "utils" ], "files": [ { "path": "registry/ballmac/components/checkbox.tsx", "type": "registry:ui", "target": "@components/ballmac/checkbox.tsx" } ], "categories": [ "primitives" ], "meta": { "schema": 1, "tier": "free", "tags": [ "checkbox", "form", "indeterminate", "radix" ], "version": "1.0.0", "updated": "2026-09-28", "ai": { "summary": "Binary or tri-state choice. Pass checked=\"indeterminate\" for a parent row whose children are partly selected; aria-checked becomes \"mixed\". Pair with Label via id/htmlFor.", "whenToUse": [ "Agreeing to terms or opting into emails", "Multi-select lists and table row selection", "A select-all control that reflects partial selection" ], "whenNotToUse": [ "Settings that apply immediately (use switch)", "Choosing exactly one option from several (use a radio group or select)" ], "composesWith": [ "label", "button" ], "a11y": [ { "keys": "Space", "action": "Toggles the checkbox" }, { "keys": "Tab", "action": "Moves focus to the checkbox" } ], "customization": [ "checked: boolean | \"indeterminate\"; onCheckedChange receives the new state", "aria-invalid=\"true\" for errors", "Inherits the peer class so a following Label dims when disabled" ] }, "source": { "name": "shadcn/ui Checkbox", "url": "https://github.com/shadcn-ui/ui", "license": "MIT", "copyright": "Copyright (c) 2023 shadcn", "modified": true }, "examples": [ "checkbox-demo", "checkbox-indeterminate" ], "url": "https://ui.ballmac.com/components/checkbox" } }, { "name": "checkbox-demo", "type": "registry:example", "title": "Checkbox: Default", "description": "Default example of Checkbox.", "registryDependencies": [ "https://ui.ballmac.com/r/checkbox.json", "https://ui.ballmac.com/r/label.json" ], "files": [ { "path": "registry/examples/checkbox-demo.tsx", "type": "registry:example", "target": "@components/ballmac/examples/checkbox-demo.tsx" } ], "categories": [ "primitives" ], "meta": { "example": true, "of": "checkbox", "tier": "free" } }, { "name": "checkbox-indeterminate", "type": "registry:example", "title": "Checkbox: Select all", "description": "Select all example of Checkbox.", "registryDependencies": [ "https://ui.ballmac.com/r/checkbox.json", "https://ui.ballmac.com/r/label.json" ], "files": [ { "path": "registry/examples/checkbox-indeterminate.tsx", "type": "registry:example", "target": "@components/ballmac/examples/checkbox-indeterminate.tsx" } ], "categories": [ "primitives" ], "meta": { "example": true, "of": "checkbox", "tier": "free" } }, { "name": "circular-progress", "type": "registry:ui", "title": "Circular Progress", "description": "Concentric progress rings or a 270 degree gauge in theme colors with animated fills, a legend with values and a center slot, for goals, quotas and activity summaries.", "author": "Ballmac ", "dependencies": [ "motion@^12" ], "registryDependencies": [ "utils" ], "files": [ { "path": "registry/ballmac/components/circular-progress.tsx", "type": "registry:ui", "target": "@components/ballmac/circular-progress.tsx" } ], "categories": [ "data-display" ], "meta": { "schema": 1, "tier": "free", "tags": [ "progress", "rings", "gauge", "activity", "chart" ], "version": "1.0.0", "updated": "2026-10-01", "ai": { "summary": "center. One ring is role=meter; several are a named group whose value text lists every ring. sweep=270 makes a gauge.", "whenToUse": [ "Daily goals and multi-metric summaries", "Storage, quota or score gauges" ], "whenNotToUse": [ "A single small ring in a table (progress-ring)", "Time series (chart)" ], "composesWith": [ "progress-ring", "usage-meter", "stat-card" ], "a11y": [ { "keys": "Screen readers", "action": "Value text such as Move 74%, Exercise 38%; the legend repeats values as text" }, { "keys": "Color", "action": "Each ring is named in the legend; color is not the only cue" }, { "keys": "Reduced motion", "action": "Rings are drawn full length at once" } ], "customization": [ "rings", "sweep", "thickness and gap", "legend", "duration" ] }, "examples": [ "circular-progress-demo", "circular-progress-gauge" ], "url": "https://ui.ballmac.com/components/circular-progress" } }, { "name": "circular-progress-demo", "type": "registry:example", "title": "Circular Progress: Activity rings", "description": "Activity rings example of Circular Progress.", "registryDependencies": [ "https://ui.ballmac.com/r/circular-progress.json" ], "files": [ { "path": "registry/examples/circular-progress-demo.tsx", "type": "registry:example", "target": "@components/ballmac/examples/circular-progress-demo.tsx" } ], "categories": [ "data-display" ], "meta": { "example": true, "of": "circular-progress", "tier": "free" } }, { "name": "circular-progress-gauge", "type": "registry:example", "title": "Circular Progress: Gauge with center content", "description": "Gauge with center content example of Circular Progress.", "registryDependencies": [ "https://ui.ballmac.com/r/circular-progress.json" ], "files": [ { "path": "registry/examples/circular-progress-gauge.tsx", "type": "registry:example", "target": "@components/ballmac/examples/circular-progress-gauge.tsx" } ], "categories": [ "data-display" ], "meta": { "example": true, "of": "circular-progress", "tier": "free" } }, { "name": "citation", "type": "registry:ui", "title": "Citation", "description": "An inline source marker for AI answers, as a numbered chip or a site pill. Hover or focus opens a preview card with title, excerpt and link, and a pager when one claim has several sources.", "author": "Ballmac ", "dependencies": [ "lucide-react" ], "registryDependencies": [ "utils", "https://ui.ballmac.com/r/hover-card.json", "https://ui.ballmac.com/r/i18n.json" ], "files": [ { "path": "registry/ballmac/components/citation.tsx", "type": "registry:ui", "target": "@components/ballmac/citation.tsx" } ], "categories": [ "ai" ], "meta": { "schema": 1, "tier": "free", "tags": [ "ai", "citation", "source", "reference", "hover" ], "version": "1.0.0", "updated": "2026-09-30", "ai": { "summary": "Place right after the claim. Pass an array for several sources. variant is number | pill. The marker is a real link, so touch users open the page directly. Also exports SourceFavicon and hostOf.", "whenToUse": [ "Answers grounded in web or document sources", "Footnotes that should not pull the reader away from the text" ], "whenNotToUse": [ "A full list of references; use sources-list", "Tooltips with no link; use tooltip" ], "composesWith": [ "sources-list", "ai-message", "hover-card" ], "a11y": [ { "keys": "Tab", "action": "Focuses the marker and opens its card" }, { "keys": "Enter", "action": "Opens the source in a new tab" }, { "keys": "Screen readers", "action": "Named 'Source 1: Title', with 'and 2 more' for grouped sources" } ], "customization": [ "variant", "index", "sources as one or many", "favicon url (monogram by default, nothing is fetched)" ] }, "examples": [ "citation-demo", "citation-pill" ], "url": "https://ui.ballmac.com/components/citation" } }, { "name": "citation-demo", "type": "registry:example", "title": "Citation: Numbered markers in an answer", "description": "Numbered markers in an answer example of Citation.", "registryDependencies": [ "https://ui.ballmac.com/r/citation.json" ], "files": [ { "path": "registry/examples/citation-demo.tsx", "type": "registry:example", "target": "@components/ballmac/examples/citation-demo.tsx" } ], "categories": [ "ai" ], "meta": { "example": true, "of": "citation", "tier": "free" } }, { "name": "citation-pill", "type": "registry:example", "title": "Citation: Site pills with several sources", "description": "Site pills with several sources example of Citation.", "registryDependencies": [ "https://ui.ballmac.com/r/citation.json" ], "files": [ { "path": "registry/examples/citation-pill.tsx", "type": "registry:example", "target": "@components/ballmac/examples/citation-pill.tsx" } ], "categories": [ "ai" ], "meta": { "example": true, "of": "citation", "tier": "free" } }, { "name": "code-block", "type": "registry:ui", "title": "Code Block", "description": "A code panel with filename and language header, line numbers, highlighted lines, a wrap toggle, copy feedback and file tabs. No highlighter bundled; pass Shiki output as children.", "author": "Ballmac ", "dependencies": [ "lucide-react", "radix-ui" ], "registryDependencies": [ "utils", "https://ui.ballmac.com/r/i18n.json" ], "files": [ { "path": "registry/ballmac/components/code-block.tsx", "type": "registry:ui", "target": "@components/ballmac/code-block.tsx" } ], "categories": [ "developer" ], "meta": { "schema": 1, "tier": "free", "tags": [ "code", "snippet", "syntax", "copy", "shiki", "tabs", "developer", "docs" ], "version": "1.0.0", "updated": "2026-09-28", "ai": { "summary": " renders plain monospace text. For syntax colors, highlight on the server (e.g. Shiki) and pass the result as children plus the raw code for copying. shows several files.", "whenToUse": [ "Code samples in docs, READMEs rendered on the web and blog posts", "Showing a changed file with specific lines highlighted", "Several related files (component, usage, config) in one panel with tabs" ], "whenNotToUse": [ "One-line install commands for several package managers (use install-tabs)", "Terminal sessions with prompts and output (use terminal)", "Editable code (use a code editor)" ], "composesWith": [ "install-tabs", "terminal", "ai-message" ], "a11y": [ { "keys": "Tab", "action": "Focuses the scrollable code region (arrow keys scroll long lines), then wrap and copy buttons" }, { "keys": "← / →", "action": "In CodeBlockTabs, moves between file tabs" }, { "keys": "—", "action": "Copying announces 'Copied to clipboard' through a polite live region" } ], "customization": [ "code (plain text) or children (pre-highlighted markup). Line numbers use a CSS counter on .line spans, which is also what Shiki emits", "highlight: 1-based line numbers (plain code only; with Shiki use its notation transformers)", "wrap (initial) and wrapToggle; copyable={false} hides copy", "bodyClassName for a max height, e.g. 'max-h-80'", "Shiki: const html = await codeToHtml(code, { lang, themes }) then
" ] }, "examples": [ "code-block-demo", "code-block-tabs" ], "url": "https://ui.ballmac.com/components/code-block" } }, { "name": "code-block-demo", "type": "registry:example", "title": "Code Block: Default", "description": "Default example of Code Block.", "registryDependencies": [ "https://ui.ballmac.com/r/code-block.json", "https://ui.ballmac.com/r/button.json" ], "files": [ { "path": "registry/examples/code-block-demo.tsx", "type": "registry:example", "target": "@components/ballmac/examples/code-block-demo.tsx" } ], "categories": [ "developer" ], "meta": { "example": true, "of": "code-block", "tier": "free" } }, { "name": "code-block-tabs", "type": "registry:example", "title": "Code Block: File tabs", "description": "File tabs example of Code Block.", "registryDependencies": [ "https://ui.ballmac.com/r/code-block.json" ], "files": [ { "path": "registry/examples/code-block-tabs.tsx", "type": "registry:example", "target": "@components/ballmac/examples/code-block-tabs.tsx" } ], "categories": [ "developer" ], "meta": { "example": true, "of": "code-block", "tier": "free" } }, { "name": "collapsible", "type": "registry:ui", "title": "Collapsible", "description": "A single disclosure panel with a generous trigger, visible open state, and reduced-motion-aware content transition.", "author": "Ballmac ", "dependencies": [ "radix-ui", "lucide-react" ], "registryDependencies": [ "utils" ], "files": [ { "path": "registry/ballmac/components/collapsible.tsx", "type": "registry:ui", "target": "@components/ballmac/collapsible.tsx" } ], "categories": [ "primitives" ], "meta": { "schema": 1, "tier": "free", "tags": [ "disclosure", "details", "radix" ], "version": "1.0.0", "updated": "2026-09-30", "ai": { "summary": "Reveals one optional section of information with a keyboard-accessible disclosure trigger.", "whenToUse": [ "Advanced settings", "Supporting detail in a dense card" ], "whenNotToUse": [ "Several related disclosures; use accordion", "Primary content that should always be visible" ], "composesWith": [ "card" ], "a11y": [ { "keys": "Enter / Space", "action": "Opens or closes the disclosure" }, { "keys": "Tab", "action": "Moves into visible content" } ], "customization": [ "controlled or uncontrolled open state", "optional trigger chevron" ] }, "examples": [ "collapsible-demo", "collapsible-states" ], "url": "https://ui.ballmac.com/components/collapsible" } }, { "name": "collapsible-demo", "type": "registry:example", "title": "Collapsible: Release details", "description": "Release details example of Collapsible.", "registryDependencies": [ "https://ui.ballmac.com/r/collapsible.json" ], "dependencies": [ "lucide-react" ], "files": [ { "path": "registry/examples/collapsible-demo.tsx", "type": "registry:example", "target": "@components/ballmac/examples/collapsible-demo.tsx" } ], "categories": [ "primitives" ], "meta": { "example": true, "of": "collapsible", "tier": "free" } }, { "name": "collapsible-states", "type": "registry:example", "title": "Collapsible: Controlled disclosure", "description": "Controlled disclosure example of Collapsible.", "registryDependencies": [ "https://ui.ballmac.com/r/collapsible.json" ], "files": [ { "path": "registry/examples/collapsible-states.tsx", "type": "registry:example", "target": "@components/ballmac/examples/collapsible-states.tsx" } ], "categories": [ "primitives" ], "meta": { "example": true, "of": "collapsible", "tier": "free" } }, { "name": "color-picker", "type": "registry:ui", "title": "Color Picker", "description": "A native color chooser paired with an editable hex field and a live swatch.", "author": "Ballmac ", "registryDependencies": [ "utils", "https://ui.ballmac.com/r/i18n.json" ], "files": [ { "path": "registry/ballmac/components/color-picker.tsx", "type": "registry:ui", "target": "@components/ballmac/color-picker.tsx" } ], "categories": [ "forms" ], "meta": { "schema": 1, "tier": "free", "tags": [ "color", "picker", "hex" ], "version": "1.0.0", "updated": "2026-09-30", "ai": { "summary": "A native color chooser paired with an editable hex field and a live swatch.", "whenToUse": [ "Choose a custom brand or annotation color", "Edit a color precisely by hexadecimal value" ], "whenNotToUse": [ "Use theme tokens for application chrome" ], "composesWith": [ "input" ], "a11y": [ { "keys": "Tab", "action": "Moves between color and text inputs" }, { "keys": "Enter", "action": "Accepts a native color selection" } ], "customization": [ "value / defaultValue and onValueChange", "name: form field name" ] }, "examples": [ "color-picker-demo", "color-picker-states" ], "url": "https://ui.ballmac.com/components/color-picker" } }, { "name": "color-picker-demo", "type": "registry:example", "title": "Color Picker: Overview", "description": "Overview example of Color Picker.", "registryDependencies": [ "https://ui.ballmac.com/r/color-picker.json" ], "files": [ { "path": "registry/examples/color-picker-demo.tsx", "type": "registry:example", "target": "@components/ballmac/examples/color-picker-demo.tsx" } ], "categories": [ "forms" ], "meta": { "example": true, "of": "color-picker", "tier": "free" } }, { "name": "color-picker-states", "type": "registry:example", "title": "Color Picker: States and variants", "description": "States and variants example of Color Picker.", "registryDependencies": [ "https://ui.ballmac.com/r/color-picker.json" ], "files": [ { "path": "registry/examples/color-picker-states.tsx", "type": "registry:example", "target": "@components/ballmac/examples/color-picker-states.tsx" } ], "categories": [ "forms" ], "meta": { "example": true, "of": "color-picker", "tier": "free" } }, { "name": "combobox", "type": "registry:ui", "title": "Combobox", "description": "A searchable single-choice select with groups, descriptions, keywords, clearable value, invalid state and hidden-input form submission.", "author": "Ballmac ", "dependencies": [ "lucide-react" ], "registryDependencies": [ "utils", "https://ui.ballmac.com/r/command.json", "https://ui.ballmac.com/r/popover.json", "https://ui.ballmac.com/r/i18n.json" ], "files": [ { "path": "registry/ballmac/components/combobox.tsx", "type": "registry:ui", "target": "@components/ballmac/combobox.tsx" } ], "categories": [ "forms" ], "meta": { "schema": 1, "tier": "free", "tags": [ "select", "search", "autocomplete", "form" ], "version": "1.0.0", "updated": "2026-09-30", "ai": { "summary": "Pass options with value and label. It opens a filterable list; the trigger is a combobox button that submits through name.", "whenToUse": [ "Choosing from more than about seven options", "Time zones, countries, users and frameworks" ], "whenNotToUse": [ "Short lists; use select or radio-group", "Choosing several values; use multi-select" ], "composesWith": [ "field", "command", "popover" ], "a11y": [ { "keys": "Enter / Space / ArrowDown", "action": "Opens the list from the trigger" }, { "keys": "Type", "action": "Filters options; matches value, label and keywords" }, { "keys": "ArrowUp / ArrowDown / Enter", "action": "Moves and selects" }, { "keys": "Escape", "action": "Closes and returns focus to the trigger" } ], "customization": [ "options with group, icon, description and keywords", "clearable", "invalid", "name for native form submission" ] }, "examples": [ "combobox-demo", "combobox-states" ], "url": "https://ui.ballmac.com/components/combobox" } }, { "name": "combobox-demo", "type": "registry:example", "title": "Combobox: Framework picker", "description": "Framework picker example of Combobox.", "registryDependencies": [ "https://ui.ballmac.com/r/combobox.json", "https://ui.ballmac.com/r/field.json" ], "files": [ { "path": "registry/examples/combobox-demo.tsx", "type": "registry:example", "target": "@components/ballmac/examples/combobox-demo.tsx" } ], "categories": [ "forms" ], "meta": { "example": true, "of": "combobox", "tier": "free" } }, { "name": "combobox-states", "type": "registry:example", "title": "Combobox: Groups and states", "description": "Groups and states example of Combobox.", "registryDependencies": [ "https://ui.ballmac.com/r/combobox.json" ], "dependencies": [ "lucide-react" ], "files": [ { "path": "registry/examples/combobox-states.tsx", "type": "registry:example", "target": "@components/ballmac/examples/combobox-states.tsx" } ], "categories": [ "forms" ], "meta": { "example": true, "of": "combobox", "tier": "free" } }, { "name": "command-bar", "type": "registry:ui", "title": "Command Bar", "description": "A command palette with pages: a search-field style trigger, grouped commands, drill-in pages with a breadcrumb, Backspace to go back and a footer of key hints.", "author": "Ballmac ", "dependencies": [ "lucide-react" ], "registryDependencies": [ "utils", "https://ui.ballmac.com/r/command.json", "https://ui.ballmac.com/r/kbd.json", "https://ui.ballmac.com/r/i18n.json" ], "files": [ { "path": "registry/ballmac/components/command-bar.tsx", "type": "registry:ui", "target": "@components/ballmac/command-bar.tsx" } ], "categories": [ "navigation" ], "meta": { "schema": 1, "tier": "free", "tags": [ "command palette", "search", "pages", "keyboard" ], "version": "1.0.0", "updated": "2026-09-30", "ai": { "summary": "groups: {heading, items:[{id,label,icon,shortcut,keywords,onSelect,pages}]}. An item with pages opens a second page. hotkey toggles with Cmd/Ctrl; trigger={false} hides the button.", "whenToUse": [ "Global quick actions and navigation", "Apps with many commands and sub-choices" ], "whenNotToUse": [ "A macOS-style launcher; use spotlight-search", "Choosing one value in a form; use combobox" ], "composesWith": [ "command", "kbd", "dialog" ], "a11y": [ { "keys": "Cmd/Ctrl+K", "action": "Toggles the bar" }, { "keys": "Type", "action": "Filters commands" }, { "keys": "ArrowUp / ArrowDown / Enter", "action": "Moves and runs" }, { "keys": "Backspace on an empty field", "action": "Goes back one page" }, { "keys": "Escape", "action": "Closes" } ], "customization": [ "hotkey", "trigger text or false", "pages for nested choices", "controlled open" ] }, "examples": [ "command-bar-demo", "command-bar-states" ], "url": "https://ui.ballmac.com/components/command-bar" } }, { "name": "command-bar-demo", "type": "registry:example", "title": "Command Bar: Global commands", "description": "Global commands example of Command Bar.", "registryDependencies": [ "https://ui.ballmac.com/r/command-bar.json" ], "dependencies": [ "lucide-react" ], "files": [ { "path": "registry/examples/command-bar-demo.tsx", "type": "registry:example", "target": "@components/ballmac/examples/command-bar-demo.tsx" } ], "categories": [ "navigation" ], "meta": { "example": true, "of": "command-bar", "tier": "free" } }, { "name": "command-bar-states", "type": "registry:example", "title": "Command Bar: Own trigger", "description": "Own trigger example of Command Bar.", "registryDependencies": [ "https://ui.ballmac.com/r/command-bar.json", "https://ui.ballmac.com/r/button.json" ], "dependencies": [ "lucide-react" ], "files": [ { "path": "registry/examples/command-bar-states.tsx", "type": "registry:example", "target": "@components/ballmac/examples/command-bar-states.tsx" } ], "categories": [ "navigation" ], "meta": { "example": true, "of": "command-bar", "tier": "free" } }, { "name": "command", "type": "registry:ui", "title": "Command", "description": "A filterable command list on cmdk, inline or in a Cmd/Ctrl+K dialog, with groups, shortcuts, descriptions, loading state and page-safe scrolling.", "author": "Ballmac ", "dependencies": [ "cmdk@^1", "radix-ui", "lucide-react" ], "registryDependencies": [ "utils", "https://ui.ballmac.com/r/i18n.json" ], "files": [ { "path": "registry/ballmac/components/command.tsx", "type": "registry:ui", "target": "@components/ballmac/command.tsx" } ], "categories": [ "navigation" ], "meta": { "schema": 1, "tier": "free", "tags": [ "command palette", "search", "cmdk", "keyboard" ], "version": "1.0.0", "updated": "2026-09-30", "ai": { "summary": "Compose Command, CommandInput, CommandList, CommandGroup and CommandItem. CommandDialog adds the modal and the ⌘K hotkey.", "whenToUse": [ "Command palettes and quick switchers", "Searchable action lists", "The list inside a combobox" ], "whenNotToUse": [ "macOS-style launcher visuals; use spotlight-search", "A simple select; use select" ], "composesWith": [ "popover", "dialog", "kbd" ], "a11y": [ { "keys": "Type", "action": "Filters the list" }, { "keys": "ArrowUp / ArrowDown", "action": "Moves the highlighted item" }, { "keys": "Enter", "action": "Runs the highlighted item" }, { "keys": "Cmd/Ctrl+K", "action": "Toggles CommandDialog" }, { "keys": "Escape", "action": "Closes the dialog" } ], "customization": [ "hotkey key or false", "filter and shouldFilter from cmdk", "item description and selected check", "CommandLoading for async results" ] }, "source": { "name": "shadcn/ui Command", "url": "https://github.com/shadcn-ui/ui", "license": "MIT", "copyright": "Copyright (c) 2023 shadcn", "modified": true }, "examples": [ "command-demo", "command-dialog" ], "url": "https://ui.ballmac.com/components/command" } }, { "name": "command-demo", "type": "registry:example", "title": "Command: Inline menu", "description": "Inline menu example of Command.", "registryDependencies": [ "https://ui.ballmac.com/r/command.json" ], "dependencies": [ "lucide-react" ], "files": [ { "path": "registry/examples/command-demo.tsx", "type": "registry:example", "target": "@components/ballmac/examples/command-demo.tsx" } ], "categories": [ "navigation" ], "meta": { "example": true, "of": "command", "tier": "free" } }, { "name": "command-dialog", "type": "registry:example", "title": "Command: Cmd+K dialog", "description": "Cmd+K dialog example of Command.", "registryDependencies": [ "https://ui.ballmac.com/r/command.json", "https://ui.ballmac.com/r/button.json", "https://ui.ballmac.com/r/kbd.json" ], "dependencies": [ "lucide-react" ], "files": [ { "path": "registry/examples/command-dialog.tsx", "type": "registry:example", "target": "@components/ballmac/examples/command-dialog.tsx" } ], "categories": [ "navigation" ], "meta": { "example": true, "of": "command", "tier": "free" } }, { "name": "comparison-table", "type": "registry:ui", "title": "Comparison Table", "description": "A semantic feature matrix with a highlighted choice and accessible boolean values.", "author": "Ballmac ", "dependencies": [ "lucide-react" ], "registryDependencies": [ "utils", "https://ui.ballmac.com/r/i18n.json" ], "files": [ { "path": "registry/ballmac/components/comparison-table.tsx", "type": "registry:ui", "target": "@components/ballmac/comparison-table.tsx" } ], "categories": [ "data-display" ], "meta": { "schema": 1, "tier": "free", "tags": [ "comparison", "pricing", "features" ], "version": "1.0.0", "updated": "2026-09-30", "ai": { "summary": "A semantic feature matrix with a highlighted choice and accessible boolean values.", "whenToUse": [ "Compare capabilities across choices" ], "whenNotToUse": [ "Use Description List for one object" ], "composesWith": [ "description-list" ], "a11y": [ { "keys": "Tab / Arrow keys", "action": "Focuses and scrolls the comparison region when narrow" } ], "customization": [ "Content, layout, and token-based className styling" ] }, "examples": [ "comparison-table-demo", "comparison-table-states" ], "url": "https://ui.ballmac.com/components/comparison-table" } }, { "name": "comparison-table-demo", "type": "registry:example", "title": "Comparison Table: Overview", "description": "Overview example of Comparison Table.", "registryDependencies": [ "https://ui.ballmac.com/r/comparison-table.json" ], "files": [ { "path": "registry/examples/comparison-table-demo.tsx", "type": "registry:example", "target": "@components/ballmac/examples/comparison-table-demo.tsx" } ], "categories": [ "data-display" ], "meta": { "example": true, "of": "comparison-table", "tier": "free" } }, { "name": "comparison-table-states", "type": "registry:example", "title": "Comparison Table: States and variants", "description": "States and variants example of Comparison Table.", "registryDependencies": [ "https://ui.ballmac.com/r/comparison-table.json" ], "files": [ { "path": "registry/examples/comparison-table-states.tsx", "type": "registry:example", "target": "@components/ballmac/examples/comparison-table-states.tsx" } ], "categories": [ "data-display" ], "meta": { "example": true, "of": "comparison-table", "tier": "free" } }, { "name": "confetti", "type": "registry:ui", "title": "Confetti", "description": "Confetti in your theme colors: fireConfetti(), a useConfetti() hook that fires from an element, and a ConfettiButton. Presets for burst, side cannons, stars and fireworks; nothing fires under reduced motion.", "author": "Ballmac ", "dependencies": [ "canvas-confetti@^1.9.3", "class-variance-authority" ], "devDependencies": [ "@types/canvas-confetti" ], "registryDependencies": [ "utils", "https://ui.ballmac.com/r/button.json", "https://ui.ballmac.com/r/color.json" ], "files": [ { "path": "registry/ballmac/components/confetti.tsx", "type": "registry:ui", "target": "@components/ballmac/confetti.tsx" } ], "categories": [ "motion" ], "meta": { "schema": 1, "tier": "free", "tags": [ "confetti", "celebration", "success", "canvas", "button", "motion" ], "version": "1.0.0", "updated": "2026-09-29", "ai": { "summary": "Call fireConfetti({ preset, colors, element }) from an event handler, or useConfetti().fireFrom(buttonRef.current) after an async success. is a Ballmac button that bursts from itself on click. Colors default to --chart-1…5.", "whenToUse": [ "Rewarding a finished milestone: first deploy, upgrade, completed onboarding", "Success states after a long async action", "Playful marketing buttons (sparingly)" ], "whenNotToUse": [ "Routine actions such as saving a form (use a toast or inline check)", "As the only success signal; always show a text confirmation too" ], "composesWith": [ "button", "number-ticker" ], "a11y": [], "customization": [ "preset: burst | sides | stars | fireworks", "colors: theme variables (\"--chart-2\") or CSS colors", "Any canvas-confetti option (particleCount, spread, scalar, ticks…) passes through", "ConfettiButton takes the button variants (variant, size, shape)", "Reduced motion: fireConfetti resolves immediately without drawing" ] }, "examples": [ "confetti-demo", "confetti-presets" ], "url": "https://ui.ballmac.com/components/confetti" } }, { "name": "confetti-demo", "type": "registry:example", "title": "Confetti: Deploy success", "description": "Deploy success example of Confetti.", "registryDependencies": [ "https://ui.ballmac.com/r/confetti.json", "https://ui.ballmac.com/r/button.json" ], "dependencies": [ "lucide-react" ], "files": [ { "path": "registry/examples/confetti-demo.tsx", "type": "registry:example", "target": "@components/ballmac/examples/confetti-demo.tsx" } ], "categories": [ "motion" ], "meta": { "example": true, "of": "confetti", "tier": "free" } }, { "name": "confetti-presets", "type": "registry:example", "title": "Confetti: Presets", "description": "Presets example of Confetti.", "registryDependencies": [ "https://ui.ballmac.com/r/confetti.json" ], "dependencies": [ "lucide-react" ], "files": [ { "path": "registry/examples/confetti-presets.tsx", "type": "registry:example", "target": "@components/ballmac/examples/confetti-presets.tsx" } ], "categories": [ "motion" ], "meta": { "example": true, "of": "confetti", "tier": "free" } }, { "name": "container-scroll", "type": "registry:ui", "title": "Container Scroll", "description": "A showcase frame that starts tilted back in 3D and flattens to face the reader as it scrolls into view, with a title that lifts alongside.", "author": "Ballmac ", "dependencies": [ "motion@^12" ], "registryDependencies": [ "utils" ], "files": [ { "path": "registry/ballmac/components/container-scroll.tsx", "type": "registry:ui", "target": "@components/ballmac/container-scroll.tsx" } ], "categories": [ "layout" ], "meta": { "schema": 1, "tier": "free", "tags": [ "3d", "scroll", "hero", "showcase" ], "version": "1.0.0", "updated": "2026-09-30", "ai": { "summary": "{screenshot or live demo}. tilt sets the starting angle; container tracks a scrollable element.", "whenToUse": [ "Product hero sections", "Showing a dashboard or app screenshot" ], "whenNotToUse": [ "Content that must stay flat and readable at all times", "Pages that scroll inside nested containers without passing container" ], "composesWith": [ "browser-frame", "sticky-scroll", "bento-grid" ], "a11y": [ { "keys": "Reduced motion", "action": "The frame is flat from the start, with no transform" }, { "keys": "Content", "action": "Children stay real, selectable, focusable content" } ], "customization": [ "tilt", "title slot", "frameClassName", "container" ] }, "examples": [ "container-scroll-demo", "container-scroll-states" ], "url": "https://ui.ballmac.com/components/container-scroll" } }, { "name": "container-scroll-demo", "type": "registry:example", "title": "Container Scroll: Product showcase", "description": "Product showcase example of Container Scroll.", "registryDependencies": [ "https://ui.ballmac.com/r/container-scroll.json" ], "files": [ { "path": "registry/examples/container-scroll-demo.tsx", "type": "registry:example", "target": "@components/ballmac/examples/container-scroll-demo.tsx" } ], "categories": [ "layout" ], "meta": { "example": true, "of": "container-scroll", "tier": "free" } }, { "name": "container-scroll-states", "type": "registry:example", "title": "Container Scroll: Steeper tilt", "description": "Steeper tilt example of Container Scroll.", "registryDependencies": [ "https://ui.ballmac.com/r/container-scroll.json" ], "files": [ { "path": "registry/examples/container-scroll-states.tsx", "type": "registry:example", "target": "@components/ballmac/examples/container-scroll-states.tsx" } ], "categories": [ "layout" ], "meta": { "example": true, "of": "container-scroll", "tier": "free" } }, { "name": "context-menu", "type": "registry:ui", "title": "Context Menu", "description": "A right-click, long-press and Shift+F10 menu with submenus, checkbox and radio items, shortcut hints and a destructive style, built on Radix.", "author": "Ballmac ", "dependencies": [ "radix-ui", "lucide-react" ], "registryDependencies": [ "utils", "https://ui.ballmac.com/r/direction.json" ], "files": [ { "path": "registry/ballmac/components/context-menu.tsx", "type": "registry:ui", "target": "@components/ballmac/context-menu.tsx" } ], "categories": [ "primitives" ], "meta": { "schema": 1, "tier": "free", "tags": [ "menu", "right-click", "overlay", "radix" ], "version": "1.0.0", "updated": "2026-09-30", "ai": { "summary": "Shows actions at the pointer on right-click or long-press. Keyboard users open it with Shift+F10 or the Menu key on a focusable trigger.", "whenToUse": [ "File, card and canvas actions", "Secondary actions that also exist elsewhere", "Desktop-style apps" ], "whenNotToUse": [ "The only way to reach an action; menus must be discoverable, so also offer a dropdown-menu button", "Touch-first layouts without a visible trigger" ], "composesWith": [ "dropdown-menu", "card" ], "a11y": [ { "keys": "Right-click / long-press", "action": "Opens the menu at the pointer" }, { "keys": "Shift+F10 / Menu key", "action": "Opens it from a focused trigger" }, { "keys": "ArrowUp / ArrowDown", "action": "Moves between items" }, { "keys": "ArrowRight / ArrowLeft", "action": "Opens and closes a submenu" }, { "keys": "Escape", "action": "Closes the menu" } ], "customization": [ "destructive item style", "give the trigger tabIndex 0 and a label so it is keyboard reachable", "checkbox and radio items" ] }, "source": { "name": "shadcn/ui Context Menu", "url": "https://github.com/shadcn-ui/ui", "license": "MIT", "copyright": "Copyright (c) 2023 shadcn", "modified": true }, "examples": [ "context-menu-demo", "context-menu-states" ], "url": "https://ui.ballmac.com/components/context-menu" } }, { "name": "context-menu-demo", "type": "registry:example", "title": "Context Menu: File actions", "description": "File actions example of Context Menu.", "registryDependencies": [ "https://ui.ballmac.com/r/context-menu.json" ], "dependencies": [ "lucide-react" ], "files": [ { "path": "registry/examples/context-menu-demo.tsx", "type": "registry:example", "target": "@components/ballmac/examples/context-menu-demo.tsx" } ], "categories": [ "primitives" ], "meta": { "example": true, "of": "context-menu", "tier": "free" } }, { "name": "context-menu-states", "type": "registry:example", "title": "Context Menu: View options", "description": "View options example of Context Menu.", "registryDependencies": [ "https://ui.ballmac.com/r/context-menu.json" ], "files": [ { "path": "registry/examples/context-menu-states.tsx", "type": "registry:example", "target": "@components/ballmac/examples/context-menu-states.tsx" } ], "categories": [ "primitives" ], "meta": { "example": true, "of": "context-menu", "tier": "free" } }, { "name": "contribution-graph", "type": "registry:ui", "title": "Contribution Graph", "description": "A compact daily activity heatmap with token-based intensity and an accessible summary.", "author": "Ballmac ", "registryDependencies": [ "utils", "https://ui.ballmac.com/r/i18n.json" ], "files": [ { "path": "registry/ballmac/components/contribution-graph.tsx", "type": "registry:ui", "target": "@components/ballmac/contribution-graph.tsx" } ], "categories": [ "data-display" ], "meta": { "schema": 1, "tier": "free", "tags": [ "heatmap", "activity", "calendar" ], "version": "1.0.0", "updated": "2026-09-30", "ai": { "summary": "A compact daily activity heatmap with token-based intensity and an accessible summary.", "whenToUse": [ "Show a daily activity pattern over time" ], "whenNotToUse": [ "Use a calendar when dates need interaction" ], "composesWith": [ "activity-feed" ], "a11y": [ { "keys": "Tab / Arrow keys", "action": "Focuses and scrolls the heatmap; total and date span are announced" } ], "customization": [ "Content, layout, and token-based className styling" ] }, "examples": [ "contribution-graph-demo", "contribution-graph-states" ], "url": "https://ui.ballmac.com/components/contribution-graph" } }, { "name": "contribution-graph-demo", "type": "registry:example", "title": "Contribution Graph: Overview", "description": "Overview example of Contribution Graph.", "registryDependencies": [ "https://ui.ballmac.com/r/contribution-graph.json" ], "files": [ { "path": "registry/examples/contribution-graph-demo.tsx", "type": "registry:example", "target": "@components/ballmac/examples/contribution-graph-demo.tsx" } ], "categories": [ "data-display" ], "meta": { "example": true, "of": "contribution-graph", "tier": "free" } }, { "name": "contribution-graph-states", "type": "registry:example", "title": "Contribution Graph: States and variants", "description": "States and variants example of Contribution Graph.", "registryDependencies": [ "https://ui.ballmac.com/r/contribution-graph.json" ], "files": [ { "path": "registry/examples/contribution-graph-states.tsx", "type": "registry:example", "target": "@components/ballmac/examples/contribution-graph-states.tsx" } ], "categories": [ "data-display" ], "meta": { "example": true, "of": "contribution-graph", "tier": "free" } }, { "name": "control-center", "type": "registry:ui", "title": "Control Center", "description": "The macOS Control Center panel in frosted glass: toggle tiles with round badges, grouped Wi-Fi, Bluetooth and AirDrop rows, pill sliders with the icon in the track, and a Now Playing tile. Real toggle buttons and Radix sliders.", "author": "Ballmac ", "dependencies": [ "radix-ui", "lucide-react" ], "registryDependencies": [ "utils", "https://ui.ballmac.com/r/i18n.json", "https://ui.ballmac.com/r/media.json" ], "files": [ { "path": "registry/ballmac/components/control-center.tsx", "type": "registry:ui", "target": "@components/ballmac/control-center.tsx" } ], "categories": [ "macos" ], "meta": { "schema": 1, "tier": "free", "tags": [ "control-center", "macos", "toggles", "slider", "settings", "panel", "media" ], "version": "1.0.0", "updated": "2026-10-01", "ai": { "summary": " is a 2-column grid. Put with toggles first, then , and . Toggles are controlled with pressed / onPressedChange or uncontrolled.", "whenToUse": [ "Mac system UI mockups", "Quick-settings popovers" ], "whenNotToUse": [ "Full settings pages (use field, switch, slider)" ], "composesWith": [ "menu-bar", "mac-window", "hud", "switch" ], "a11y": [ { "keys": "Tab / Space / Enter", "action": "Every tile and row is a button with aria-pressed" }, { "keys": "Arrow keys", "action": "Adjust a slider; Home and End jump to the ends" }, { "keys": "Reduced motion", "action": "No press scale or color transitions" } ], "customization": [ "ControlTile: icon, label, status, pressed, stacked", "ControlSlider: label, icon, value, onValueChange", "ControlNowPlaying: title, artist, artwork, playing" ] }, "examples": [ "control-center-demo", "control-center-compact" ], "url": "https://ui.ballmac.com/components/control-center" } }, { "name": "control-center-demo", "type": "registry:example", "title": "Control Center: Full panel", "description": "Full panel example of Control Center.", "registryDependencies": [ "https://ui.ballmac.com/r/control-center.json" ], "dependencies": [ "lucide-react" ], "files": [ { "path": "registry/examples/control-center-demo.tsx", "type": "registry:example", "target": "@components/ballmac/examples/control-center-demo.tsx" } ], "categories": [ "macos" ], "meta": { "example": true, "of": "control-center", "tier": "free" } }, { "name": "control-center-compact", "type": "registry:example", "title": "Control Center: Tiles only", "description": "Tiles only example of Control Center.", "registryDependencies": [ "https://ui.ballmac.com/r/control-center.json" ], "dependencies": [ "lucide-react" ], "files": [ { "path": "registry/examples/control-center-compact.tsx", "type": "registry:example", "target": "@components/ballmac/examples/control-center-compact.tsx" } ], "categories": [ "macos" ], "meta": { "example": true, "of": "control-center", "tier": "free" } }, { "name": "cookie-consent", "type": "registry:ui", "title": "Cookie Consent", "description": "A privacy banner with equal-weight Accept all and Reject non-essential, plus a preferences view with a switch per category and locked required ones.", "author": "Ballmac ", "dependencies": [ "motion@^12", "lucide-react" ], "registryDependencies": [ "utils", "https://ui.ballmac.com/r/motion-presets.json", "https://ui.ballmac.com/r/i18n.json" ], "files": [ { "path": "registry/ballmac/components/cookie-consent.tsx", "type": "registry:ui", "target": "@components/ballmac/cookie-consent.tsx" } ], "categories": [ "saas" ], "meta": { "schema": 1, "tier": "free", "tags": [ "privacy", "cookies", "consent", "gdpr" ], "version": "1.0.0", "updated": "2026-09-30", "ai": { "summary": "categories[] with {id,label,description,required}. onConsent receives a map of category to boolean. storageKey saves and remembers the choice in localStorage.", "whenToUse": [ "Sites that set non-essential cookies", "Consent prompts for analytics and marketing" ], "whenNotToUse": [ "Legal advice: check your own requirements", "Unrelated notices; use banner" ], "composesWith": [ "banner", "switch", "dialog" ], "a11y": [ { "keys": "Tab", "action": "Buttons and switches are all reachable; the banner never traps focus" }, { "keys": "Focus", "action": "Opening preferences moves focus to the new heading" }, { "keys": "Screen readers", "action": "A labelled non-modal dialog; switches announce their state" } ], "customization": [ "categories", "placement", "policyHref", "storageKey or controlled open" ] }, "examples": [ "cookie-consent-demo", "cookie-consent-states" ], "url": "https://ui.ballmac.com/components/cookie-consent" } }, { "name": "cookie-consent-demo", "type": "registry:example", "title": "Cookie Consent: Banner", "description": "Banner example of Cookie Consent.", "registryDependencies": [ "https://ui.ballmac.com/r/cookie-consent.json" ], "files": [ { "path": "registry/examples/cookie-consent-demo.tsx", "type": "registry:example", "target": "@components/ballmac/examples/cookie-consent-demo.tsx" } ], "categories": [ "saas" ], "meta": { "example": true, "of": "cookie-consent", "tier": "free" } }, { "name": "cookie-consent-states", "type": "registry:example", "title": "Cookie Consent: Controlled", "description": "Controlled example of Cookie Consent.", "registryDependencies": [ "https://ui.ballmac.com/r/cookie-consent.json" ], "files": [ { "path": "registry/examples/cookie-consent-states.tsx", "type": "registry:example", "target": "@components/ballmac/examples/cookie-consent-states.tsx" } ], "categories": [ "saas" ], "meta": { "example": true, "of": "cookie-consent", "tier": "free" } }, { "name": "copy-button", "type": "registry:ui", "title": "Copy Button", "description": "A copy-to-clipboard button with a morphing check icon, an optional label, a fallback for blocked clipboards, an error state and a polite announcement.", "author": "Ballmac ", "dependencies": [ "motion@^12", "lucide-react", "class-variance-authority" ], "registryDependencies": [ "utils", "https://ui.ballmac.com/r/i18n.json" ], "files": [ { "path": "registry/ballmac/components/copy-button.tsx", "type": "registry:ui", "target": "@components/ballmac/copy-button.tsx" } ], "categories": [ "developer" ], "meta": { "schema": 1, "tier": "free", "tags": [ "copy", "clipboard", "button", "developer" ], "version": "1.0.0", "updated": "2026-10-01", "ai": { "summary": "Pass value (or getValue for content read at click time). label adds visible text, variant is ghost | outline | solid, size sm | default | lg. Falls back to execCommand when navigator.clipboard is blocked and shows 'Copy failed' if both fail.", "whenToUse": [ "Any value a developer will paste: keys, URLs, commands, IDs", "Toolbars on code, logs and config" ], "whenNotToUse": [ "Copying a whole code block with a header (code-block has its own button)" ], "composesWith": [ "code-block", "api-key-field", "terminal" ], "a11y": [ { "keys": "Enter / Space", "action": "Copies and confirms" }, { "keys": "Screen readers", "action": "Name changes to 'Copied' and a polite status announces it; failures say 'Copy failed'" }, { "keys": "Reduced motion", "action": "The icon swaps with a fade only" } ], "customization": [ "variant", "size", "label and copiedLabel", "getValue for async or dynamic text", "resetAfter", "onCopied / onError" ] }, "examples": [ "copy-button-demo", "copy-button-inline" ], "url": "https://ui.ballmac.com/components/copy-button" } }, { "name": "copy-button-demo", "type": "registry:example", "title": "Copy Button: Icon, label and variants", "description": "Icon, label and variants example of Copy Button.", "registryDependencies": [ "https://ui.ballmac.com/r/copy-button.json" ], "files": [ { "path": "registry/examples/copy-button-demo.tsx", "type": "registry:example", "target": "@components/ballmac/examples/copy-button-demo.tsx" } ], "categories": [ "developer" ], "meta": { "example": true, "of": "copy-button", "tier": "free" } }, { "name": "copy-button-inline", "type": "registry:example", "title": "Copy Button: Inline with a value", "description": "Inline with a value example of Copy Button.", "registryDependencies": [ "https://ui.ballmac.com/r/copy-button.json" ], "files": [ { "path": "registry/examples/copy-button-inline.tsx", "type": "registry:example", "target": "@components/ballmac/examples/copy-button-inline.tsx" } ], "categories": [ "developer" ], "meta": { "example": true, "of": "copy-button", "tier": "free" } }, { "name": "countdown", "type": "registry:ui", "title": "Countdown", "description": "An SSR-safe timer with controlled or local seconds, pause support, and a completion announcement.", "author": "Ballmac ", "registryDependencies": [ "utils", "https://ui.ballmac.com/r/i18n.json" ], "files": [ { "path": "registry/ballmac/components/countdown.tsx", "type": "registry:ui", "target": "@components/ballmac/countdown.tsx" } ], "categories": [ "feedback" ], "meta": { "schema": 1, "tier": "free", "tags": [ "timer", "countdown", "time" ], "version": "1.0.0", "updated": "2026-09-30", "ai": { "summary": "An SSR-safe timer with controlled or local seconds, pause support, and a completion announcement.", "whenToUse": [ "Show time until a short event", "Display a temporary offer or session limit" ], "whenNotToUse": [ "Use progress for work completion" ], "composesWith": [ "progress-ring" ], "a11y": [ { "keys": "None", "action": "Timer is labelled; completion is announced" } ], "customization": [ "Controlled or uncontrolled seconds", "Pause and completion callback" ] }, "examples": [ "countdown-demo", "countdown-states" ], "url": "https://ui.ballmac.com/components/countdown" } }, { "name": "countdown-demo", "type": "registry:example", "title": "Countdown: Overview", "description": "Overview example of Countdown.", "registryDependencies": [ "https://ui.ballmac.com/r/countdown.json" ], "files": [ { "path": "registry/examples/countdown-demo.tsx", "type": "registry:example", "target": "@components/ballmac/examples/countdown-demo.tsx" } ], "categories": [ "feedback" ], "meta": { "example": true, "of": "countdown", "tier": "free" } }, { "name": "countdown-states", "type": "registry:example", "title": "Countdown: States and variants", "description": "States and variants example of Countdown.", "registryDependencies": [ "https://ui.ballmac.com/r/countdown.json" ], "files": [ { "path": "registry/examples/countdown-states.tsx", "type": "registry:example", "target": "@components/ballmac/examples/countdown-states.tsx" } ], "categories": [ "feedback" ], "meta": { "example": true, "of": "countdown", "tier": "free" } }, { "name": "currency-input", "type": "registry:ui", "title": "Currency Input", "description": "A locale-aware money field that formats on blur while keeping editing and caret behavior simple.", "author": "Ballmac ", "registryDependencies": [ "utils", "https://ui.ballmac.com/r/i18n.json" ], "files": [ { "path": "registry/ballmac/components/currency-input.tsx", "type": "registry:ui", "target": "@components/ballmac/currency-input.tsx" } ], "categories": [ "forms" ], "meta": { "schema": 1, "tier": "free", "tags": [ "currency", "money", "input" ], "version": "1.0.0", "updated": "2026-09-30", "ai": { "summary": "A locale-aware money field that formats on blur while keeping editing and caret behavior simple.", "whenToUse": [ "Collect prices, budgets, or payment amounts" ], "whenNotToUse": [ "Use Number Input for unitless quantities" ], "composesWith": [ "number-input" ], "a11y": [ { "keys": "Tab / typing", "action": "Enters a numeric amount and formats it on blur" } ], "customization": [ "Controlled and uncontrolled value", "Tokens and state styling" ] }, "examples": [ "currency-input-demo", "currency-input-states" ], "url": "https://ui.ballmac.com/components/currency-input" } }, { "name": "currency-input-demo", "type": "registry:example", "title": "Currency Input: Overview", "description": "Overview example of Currency Input.", "registryDependencies": [ "https://ui.ballmac.com/r/currency-input.json" ], "files": [ { "path": "registry/examples/currency-input-demo.tsx", "type": "registry:example", "target": "@components/ballmac/examples/currency-input-demo.tsx" } ], "categories": [ "forms" ], "meta": { "example": true, "of": "currency-input", "tier": "free" } }, { "name": "currency-input-states", "type": "registry:example", "title": "Currency Input: States and variants", "description": "States and variants example of Currency Input.", "registryDependencies": [ "https://ui.ballmac.com/r/currency-input.json" ], "files": [ { "path": "registry/examples/currency-input-states.tsx", "type": "registry:example", "target": "@components/ballmac/examples/currency-input-states.tsx" } ], "categories": [ "forms" ], "meta": { "example": true, "of": "currency-input", "tier": "free" } }, { "name": "data-table", "type": "registry:ui", "title": "Data Table", "description": "A complete data grid on TanStack Table: sortable headers, search, column visibility, row selection, pagination, a loading state and live result counts.", "author": "Ballmac ", "dependencies": [ "@tanstack/react-table@^8", "lucide-react" ], "registryDependencies": [ "utils", "https://ui.ballmac.com/r/button.json", "https://ui.ballmac.com/r/checkbox.json", "https://ui.ballmac.com/r/dropdown-menu.json", "https://ui.ballmac.com/r/table.json", "https://ui.ballmac.com/r/i18n.json" ], "files": [ { "path": "registry/ballmac/components/data-table.tsx", "type": "registry:ui", "target": "@components/ballmac/data-table.tsx" } ], "categories": [ "data-display" ], "meta": { "schema": 1, "tier": "free", "tags": [ "table", "sorting", "filter", "pagination", "tanstack" ], "version": "1.0.0", "updated": "2026-09-30", "ai": { "summary": "Pass columns (TanStack ColumnDef) and data. Use DataTableColumnHeader for sortable headers. selectable adds checkboxes; pageSize sets rows per page.", "whenToUse": [ "Lists of records people search, sort and select", "Admin and billing screens" ], "whenNotToUse": [ "A small static table; use table", "Server-side paging for huge datasets without adapting the parts" ], "composesWith": [ "table", "badge", "dropdown-menu" ], "a11y": [ { "keys": "Tab / Enter", "action": "Sort buttons, checkboxes, pagination and the column menu are real controls" }, { "keys": "Screen readers", "action": "aria-sort on headers; the result count is a polite live region" } ], "customization": [ "columns and cell renderers", "selectable and onSelectionChange", "searchable, columnToggle, pageSize", "stickyHeader with maxHeightClassName", "toolbar slot" ] }, "source": { "name": "shadcn/ui Data Table", "url": "https://github.com/shadcn-ui/ui", "license": "MIT", "copyright": "Copyright (c) 2023 shadcn", "modified": true }, "examples": [ "data-table-demo", "data-table-states" ], "url": "https://ui.ballmac.com/components/data-table" } }, { "name": "data-table-demo", "type": "registry:example", "title": "Data Table: Invoices", "description": "Invoices example of Data Table.", "registryDependencies": [ "https://ui.ballmac.com/r/data-table.json", "https://ui.ballmac.com/r/badge.json" ], "files": [ { "path": "registry/examples/data-table-demo.tsx", "type": "registry:example", "target": "@components/ballmac/examples/data-table-demo.tsx" } ], "categories": [ "data-display" ], "meta": { "example": true, "of": "data-table", "tier": "free" } }, { "name": "data-table-states", "type": "registry:example", "title": "Data Table: Loading and empty", "description": "Loading and empty example of Data Table.", "registryDependencies": [ "https://ui.ballmac.com/r/data-table.json" ], "files": [ { "path": "registry/examples/data-table-states.tsx", "type": "registry:example", "target": "@components/ballmac/examples/data-table-states.tsx" } ], "categories": [ "data-display" ], "meta": { "example": true, "of": "data-table", "tier": "free" } }, { "name": "date-picker", "type": "registry:ui", "title": "Date Picker", "description": "A button that opens a calendar popover to choose one date, with presets, month and year selects, min and max dates, clearing, invalid state and form submission.", "author": "Ballmac ", "dependencies": [ "lucide-react" ], "registryDependencies": [ "utils", "https://ui.ballmac.com/r/calendar.json", "https://ui.ballmac.com/r/popover.json", "https://ui.ballmac.com/r/i18n.json" ], "files": [ { "path": "registry/ballmac/components/date-picker.tsx", "type": "registry:ui", "target": "@components/ballmac/date-picker.tsx" } ], "categories": [ "forms" ], "meta": { "schema": 1, "tier": "free", "tags": [ "date", "input", "popover", "form" ], "version": "1.0.0", "updated": "2026-09-30", "ai": { "summary": "Give it a defaultValue or value and onValueChange. presets add quick picks, dropdowns adds month and year selects, name submits YYYY-MM-DD.", "whenToUse": [ "A single date in a form", "Deadlines, birthdays and delivery dates", "When quick picks like Tomorrow help" ], "whenNotToUse": [ "A date range; use date-range-picker", "An always-visible calendar; use calendar" ], "composesWith": [ "field", "calendar", "popover" ], "a11y": [ { "keys": "Enter / Space / ArrowDown", "action": "Opens the calendar from the trigger" }, { "keys": "Arrow keys", "action": "Move between days" }, { "keys": "Escape", "action": "Closes and returns focus to the trigger" } ], "customization": [ "presets", "dropdowns for distant dates", "minDate and maxDate", "format (Intl options) and locale", "clearable and invalid" ] }, "examples": [ "date-picker-demo", "date-picker-states" ], "url": "https://ui.ballmac.com/components/date-picker" } }, { "name": "date-picker-demo", "type": "registry:example", "title": "Date Picker: Delivery date with presets", "description": "Delivery date with presets example of Date Picker.", "registryDependencies": [ "https://ui.ballmac.com/r/date-picker.json", "https://ui.ballmac.com/r/field.json" ], "files": [ { "path": "registry/examples/date-picker-demo.tsx", "type": "registry:example", "target": "@components/ballmac/examples/date-picker-demo.tsx" } ], "categories": [ "forms" ], "meta": { "example": true, "of": "date-picker", "tier": "free" } }, { "name": "date-picker-states", "type": "registry:example", "title": "Date Picker: Birthday, invalid, disabled", "description": "Birthday, invalid, disabled example of Date Picker.", "registryDependencies": [ "https://ui.ballmac.com/r/date-picker.json", "https://ui.ballmac.com/r/field.json" ], "files": [ { "path": "registry/examples/date-picker-states.tsx", "type": "registry:example", "target": "@components/ballmac/examples/date-picker-states.tsx" } ], "categories": [ "forms" ], "meta": { "example": true, "of": "date-picker", "tier": "free" } }, { "name": "date-range-picker", "type": "registry:ui", "title": "Date Range Picker", "description": "Two native date controls with inclusive range correction and quick-select presets.", "author": "Ballmac ", "registryDependencies": [ "utils", "https://ui.ballmac.com/r/i18n.json" ], "files": [ { "path": "registry/ballmac/components/date-range-picker.tsx", "type": "registry:ui", "target": "@components/ballmac/date-range-picker.tsx" } ], "categories": [ "forms" ], "meta": { "schema": 1, "tier": "free", "tags": [ "date", "range", "calendar" ], "version": "1.0.0", "updated": "2026-09-30", "ai": { "summary": "Two native date controls with inclusive range correction and quick-select presets.", "whenToUse": [ "Pick report or booking date windows" ], "whenNotToUse": [ "Use Date Picker for one date" ], "composesWith": [ "time-picker" ], "a11y": [ { "keys": "Tab / Arrow keys", "action": "Edits native date fields and activates presets" } ], "customization": [ "Controlled and uncontrolled value", "Tokens and state styling" ] }, "examples": [ "date-range-picker-demo", "date-range-picker-states" ], "url": "https://ui.ballmac.com/components/date-range-picker" } }, { "name": "date-range-picker-demo", "type": "registry:example", "title": "Date Range Picker: Overview", "description": "Overview example of Date Range Picker.", "registryDependencies": [ "https://ui.ballmac.com/r/date-range-picker.json" ], "files": [ { "path": "registry/examples/date-range-picker-demo.tsx", "type": "registry:example", "target": "@components/ballmac/examples/date-range-picker-demo.tsx" } ], "categories": [ "forms" ], "meta": { "example": true, "of": "date-range-picker", "tier": "free" } }, { "name": "date-range-picker-states", "type": "registry:example", "title": "Date Range Picker: States and variants", "description": "States and variants example of Date Range Picker.", "registryDependencies": [ "https://ui.ballmac.com/r/date-range-picker.json" ], "files": [ { "path": "registry/examples/date-range-picker-states.tsx", "type": "registry:example", "target": "@components/ballmac/examples/date-range-picker-states.tsx" } ], "categories": [ "forms" ], "meta": { "example": true, "of": "date-range-picker", "tier": "free" } }, { "name": "description-list", "type": "registry:ui", "title": "Description List", "description": "A semantic key-value surface with responsive split and stacked layouts.", "author": "Ballmac ", "registryDependencies": [ "utils" ], "files": [ { "path": "registry/ballmac/components/description-list.tsx", "type": "registry:ui", "target": "@components/ballmac/description-list.tsx" } ], "categories": [ "data-display" ], "meta": { "schema": 1, "tier": "free", "tags": [ "details", "key-value", "metadata" ], "version": "1.0.0", "updated": "2026-09-30", "ai": { "summary": "A semantic key-value surface with responsive split and stacked layouts.", "whenToUse": [ "Display read-only properties for an object" ], "whenNotToUse": [ "Use a form for editable fields" ], "composesWith": [ "card" ], "a11y": [ { "keys": "None", "action": "Static content is announced with semantic structure" } ], "customization": [ "Content, layout, and token-based className styling" ] }, "examples": [ "description-list-demo", "description-list-states" ], "url": "https://ui.ballmac.com/components/description-list" } }, { "name": "description-list-demo", "type": "registry:example", "title": "Description List: Overview", "description": "Overview example of Description List.", "registryDependencies": [ "https://ui.ballmac.com/r/description-list.json" ], "files": [ { "path": "registry/examples/description-list-demo.tsx", "type": "registry:example", "target": "@components/ballmac/examples/description-list-demo.tsx" } ], "categories": [ "data-display" ], "meta": { "example": true, "of": "description-list", "tier": "free" } }, { "name": "description-list-states", "type": "registry:example", "title": "Description List: States and variants", "description": "States and variants example of Description List.", "registryDependencies": [ "https://ui.ballmac.com/r/description-list.json" ], "files": [ { "path": "registry/examples/description-list-states.tsx", "type": "registry:example", "target": "@components/ballmac/examples/description-list-states.tsx" } ], "categories": [ "data-display" ], "meta": { "example": true, "of": "description-list", "tier": "free" } }, { "name": "desktop-icons", "type": "registry:ui", "title": "Desktop Icons", "description": "A macOS desktop of icons: box-select with the pointer, drag to move with snapping to grid cells, double-click or Return to open, arrow keys to move focus and Alt plus arrows to move an icon.", "author": "Ballmac ", "registryDependencies": [ "utils", "https://ui.ballmac.com/r/mac-icons.json", "https://ui.ballmac.com/r/i18n.json" ], "files": [ { "path": "registry/ballmac/components/desktop-icons.tsx", "type": "registry:ui", "target": "@components/ballmac/desktop-icons.tsx" } ], "categories": [ "macos" ], "meta": { "schema": 1, "tier": "free", "tags": [ "desktop", "icons", "drag", "selection", "macos" ], "version": "1.0.0", "updated": "2026-10-01", "ai": { "summary": ". Positions are grid cells. Icons that land on an occupied cell move to the nearest free one.", "whenToUse": [ "Desktop-style demos and playgrounds", "Launch surfaces with draggable shortcuts" ], "whenNotToUse": [ "Ordinary file lists (file-browser)" ], "composesWith": [ "window-manager", "finder-window", "mac-icons", "mac-context-menu" ], "a11y": [ { "keys": "Arrow keys", "action": "Move focus to the nearest icon in that direction" }, { "keys": "Alt+Arrow", "action": "Moves the focused icon one cell" }, { "keys": "Enter", "action": "Opens" }, { "keys": "Space", "action": "Toggles selection" } ], "customization": [ "cell size", "items and positions", "onItemsChange" ] }, "examples": [ "desktop-icons-demo", "desktop-icons-window" ], "url": "https://ui.ballmac.com/components/desktop-icons" } }, { "name": "desktop-icons-demo", "type": "registry:example", "title": "Desktop Icons: Desktop on a wallpaper", "description": "Desktop on a wallpaper example of Desktop Icons.", "registryDependencies": [ "https://ui.ballmac.com/r/desktop-icons.json" ], "dependencies": [ "lucide-react" ], "files": [ { "path": "registry/examples/desktop-icons-demo.tsx", "type": "registry:example", "target": "@components/ballmac/examples/desktop-icons-demo.tsx" } ], "categories": [ "macos" ], "meta": { "example": true, "of": "desktop-icons", "tier": "free" } }, { "name": "desktop-icons-window", "type": "registry:example", "title": "Desktop Icons: Icons behind windows", "description": "Icons behind windows example of Desktop Icons.", "registryDependencies": [ "https://ui.ballmac.com/r/desktop-icons.json" ], "dependencies": [ "lucide-react" ], "files": [ { "path": "registry/examples/desktop-icons-window.tsx", "type": "registry:example", "target": "@components/ballmac/examples/desktop-icons-window.tsx" } ], "categories": [ "macos" ], "meta": { "example": true, "of": "desktop-icons", "tier": "free" } }, { "name": "dialog", "type": "registry:ui", "title": "Dialog", "description": "A Radix modal dialog with a blurred overlay, centered card surface that fits 360 px screens, header and footer parts, optional close button and animations.", "author": "Ballmac ", "dependencies": [ "radix-ui", "lucide-react" ], "devDependencies": [ "tw-animate-css" ], "registryDependencies": [ "utils", "https://ui.ballmac.com/r/i18n.json" ], "files": [ { "path": "registry/ballmac/components/dialog.tsx", "type": "registry:ui", "target": "@components/ballmac/dialog.tsx" } ], "categories": [ "primitives" ], "meta": { "schema": 1, "tier": "free", "tags": [ "dialog", "modal", "overlay", "radix" ], "version": "1.0.0", "updated": "2026-09-28", "ai": { "summary": "Modal window that traps focus. Compose Dialog > DialogTrigger (style it with buttonVariants) + DialogContent with DialogHeader (DialogTitle, DialogDescription) and DialogFooter; use DialogClose with buttonVariants for cancel buttons. Avoid asChild so the files also work in Base UI projects.", "whenToUse": [ "Short forms that shouldn't leave the page (edit profile, rename)", "Confirming destructive actions", "Focused detail views" ], "whenNotToUse": [ "Non-blocking messages (use a toast)", "Long multi-step flows (use a page)", "Content tied to a control that should stay visible (use a popover)" ], "composesWith": [ "button", "input", "label", "textarea", "select" ], "a11y": [ { "keys": "Escape", "action": "Closes the dialog" }, { "keys": "Tab / Shift+Tab", "action": "Cycles focus inside the dialog" }, { "keys": "Enter / Space on trigger", "action": "Opens the dialog" } ], "customization": [ "showCloseButton (default true) and closeLabel for the X button", "DialogContent max-w-lg by default; override with className", "Always include a DialogTitle (use a sr-only class to hide it visually)", "Needs the tw-animate-css classes for the open and close animation" ] }, "source": { "name": "shadcn/ui Dialog", "url": "https://github.com/shadcn-ui/ui", "license": "MIT", "copyright": "Copyright (c) 2023 shadcn", "modified": true }, "examples": [ "dialog-demo", "dialog-confirm" ], "url": "https://ui.ballmac.com/components/dialog" } }, { "name": "dialog-demo", "type": "registry:example", "title": "Dialog: Edit profile", "description": "Edit profile example of Dialog.", "registryDependencies": [ "https://ui.ballmac.com/r/dialog.json", "https://ui.ballmac.com/r/button.json", "https://ui.ballmac.com/r/input.json", "https://ui.ballmac.com/r/label.json" ], "files": [ { "path": "registry/examples/dialog-demo.tsx", "type": "registry:example", "target": "@components/ballmac/examples/dialog-demo.tsx" } ], "categories": [ "primitives" ], "meta": { "example": true, "of": "dialog", "tier": "free" } }, { "name": "dialog-confirm", "type": "registry:example", "title": "Dialog: Confirm", "description": "Confirm example of Dialog.", "registryDependencies": [ "https://ui.ballmac.com/r/dialog.json", "https://ui.ballmac.com/r/button.json" ], "dependencies": [ "lucide-react" ], "files": [ { "path": "registry/examples/dialog-confirm.tsx", "type": "registry:example", "target": "@components/ballmac/examples/dialog-confirm.tsx" } ], "categories": [ "primitives" ], "meta": { "example": true, "of": "dialog", "tier": "free" } }, { "name": "diff-viewer", "type": "registry:ui", "title": "Diff Viewer", "description": "A line-by-line text diff with change counts, line numbers, and accessible change labels.", "author": "Ballmac ", "registryDependencies": [ "utils", "https://ui.ballmac.com/r/i18n.json" ], "files": [ { "path": "registry/ballmac/components/diff-viewer.tsx", "type": "registry:ui", "target": "@components/ballmac/diff-viewer.tsx" } ], "categories": [ "data-display" ], "meta": { "schema": 1, "tier": "free", "tags": [ "diff", "code", "comparison" ], "version": "1.0.0", "updated": "2026-09-30", "ai": { "summary": "A line-by-line text diff with change counts, line numbers, and accessible change labels.", "whenToUse": [ "Review before-and-after text changes" ], "whenNotToUse": [ "Use Comparison Table for product features" ], "composesWith": [ "code-block" ], "a11y": [ { "keys": "Tab / Arrow keys", "action": "Focuses and scrolls long diffs" } ], "customization": [ "Controlled and uncontrolled state", "Content and token-based className styling" ] }, "examples": [ "diff-viewer-demo", "diff-viewer-states" ], "url": "https://ui.ballmac.com/components/diff-viewer" } }, { "name": "diff-viewer-demo", "type": "registry:example", "title": "Diff Viewer: Overview", "description": "Overview example of Diff Viewer.", "registryDependencies": [ "https://ui.ballmac.com/r/diff-viewer.json" ], "files": [ { "path": "registry/examples/diff-viewer-demo.tsx", "type": "registry:example", "target": "@components/ballmac/examples/diff-viewer-demo.tsx" } ], "categories": [ "data-display" ], "meta": { "example": true, "of": "diff-viewer", "tier": "free" } }, { "name": "diff-viewer-states", "type": "registry:example", "title": "Diff Viewer: States and variants", "description": "States and variants example of Diff Viewer.", "registryDependencies": [ "https://ui.ballmac.com/r/diff-viewer.json" ], "files": [ { "path": "registry/examples/diff-viewer-states.tsx", "type": "registry:example", "target": "@components/ballmac/examples/diff-viewer-states.tsx" } ], "categories": [ "data-display" ], "meta": { "example": true, "of": "diff-viewer", "tier": "free" } }, { "name": "dock", "type": "registry:ui", "title": "Dock", "description": "A macOS-style dock whose icons grow with spring physics as the pointer approaches and push their neighbors apart. Labels, running dots, a launch bounce and arrow-key navigation included.", "author": "Ballmac ", "dependencies": [ "motion@^12" ], "registryDependencies": [ "utils", "https://ui.ballmac.com/r/direction.json" ], "files": [ { "path": "registry/ballmac/components/dock.tsx", "type": "registry:ui", "target": "@components/ballmac/dock.tsx" } ], "categories": [ "macos" ], "meta": { "schema": 1, "tier": "free", "tags": [ "dock", "macos", "magnification", "toolbar", "navigation", "motion", "app launcher" ], "version": "1.0.0", "updated": "2026-09-29", "ai": { "summary": " is a role=toolbar row (or column with orientation=\"vertical\") of buttons with cursor-proximity magnification; draws the divider. Style each tile through DockItem's className (gradients, colors); icons are sized to about half the tile.", "whenToUse": [ "An app-launcher or quick-links bar on a Mac-flavored landing page or product hero", "A floating navigation bar for a portfolio or dashboard with a handful of destinations", "Showing off the apps or integrations a product ships with" ], "whenNotToUse": [ "Primary navigation with many text links (use a header or sidebar)", "More than about 12 items, or anywhere it would need to scroll horizontally" ], "composesWith": [ "mac-window", "menu-bar", "dynamic-island" ], "a11y": [ { "keys": "Tab", "action": "Moves focus into the dock (one tab stop) and out again" }, { "keys": "ArrowLeft / ArrowRight (ArrowUp / ArrowDown when vertical)", "action": "Moves between items; the focused item magnifies and shows its label" }, { "keys": "Home / End", "action": "Jumps to the first or last item" }, { "keys": "Enter / Space", "action": "Activates the focused item" } ], "customization": [ "size: resting item size in px (default 48); magnification: size under the pointer (default 76); distance: reach in px (default 150)", "orientation: horizontal | vertical", "DockItem: label, icon, active (running dot, also announced), bounce (launch bounce on click), className for the tile, containerClassName for the wrapper (e.g. max-sm:hidden)", "Under reduced motion the dock does not magnify or bounce; items brighten on hover and focus instead" ] }, "examples": [ "dock-demo", "dock-vertical" ], "url": "https://ui.ballmac.com/components/dock" } }, { "name": "dock-demo", "type": "registry:example", "title": "Dock: App dock", "description": "App dock example of Dock.", "registryDependencies": [ "https://ui.ballmac.com/r/dock.json" ], "dependencies": [ "lucide-react" ], "files": [ { "path": "registry/examples/dock-demo.tsx", "type": "registry:example", "target": "@components/ballmac/examples/dock-demo.tsx" } ], "categories": [ "macos" ], "meta": { "example": true, "of": "dock", "tier": "free" } }, { "name": "dock-vertical", "type": "registry:example", "title": "Dock: Vertical", "description": "Vertical example of Dock.", "registryDependencies": [ "https://ui.ballmac.com/r/dock.json" ], "dependencies": [ "lucide-react" ], "files": [ { "path": "registry/examples/dock-vertical.tsx", "type": "registry:example", "target": "@components/ballmac/examples/dock-vertical.tsx" } ], "categories": [ "macos" ], "meta": { "example": true, "of": "dock", "tier": "free" } }, { "name": "dot-pattern", "type": "registry:ui", "title": "Dot Pattern", "description": "A lightweight SVG dot grid background with an optional radial fade and a few softly pulsing glow dots. One pattern element, token colors, hydration-safe, still under reduced motion.", "author": "Ballmac ", "registryDependencies": [ "utils" ], "files": [ { "path": "registry/ballmac/components/dot-pattern.tsx", "type": "registry:ui", "target": "@components/ballmac/dot-pattern.tsx" } ], "categories": [ "backgrounds" ], "meta": { "schema": 1, "tier": "free", "tags": [ "dots", "pattern", "grid", "svg", "background", "decorative" ], "version": "1.0.0", "updated": "2026-09-29", "ai": { "summary": "Place as the first child of a relative, overflow-hidden container (absolute inset-0, aria-hidden, pointer-events-none). Add glow for a few pulsing accent dots. The cheapest Ballmac background; safe for large areas.", "whenToUse": [ "Quiet texture behind heroes, feature cards, empty states and auth pages", "Large page areas where canvas effects would be too heavy" ], "whenNotToUse": [ "When you want visible motion as the focal point (use flickering-grid or beams-background)" ], "composesWith": [ "orbiting-circles", "animated-beam", "spotlight-card" ], "a11y": [], "customization": [ "width / height: dot spacing in px (default 16); radius (default 1)", "glow, glowCount (default 18), glowColor (default var(--chart-1))", "radialMask toggles the edge fade; dot color is the --dot CSS variable: className=\"[--dot:var(--chart-2)]\"" ] }, "examples": [ "dot-pattern-demo", "dot-pattern-dense" ], "url": "https://ui.ballmac.com/components/dot-pattern" } }, { "name": "dot-pattern-demo", "type": "registry:example", "title": "Dot Pattern: Glowing dots", "description": "Glowing dots example of Dot Pattern.", "registryDependencies": [ "https://ui.ballmac.com/r/dot-pattern.json" ], "files": [ { "path": "registry/examples/dot-pattern-demo.tsx", "type": "registry:example", "target": "@components/ballmac/examples/dot-pattern-demo.tsx" } ], "categories": [ "backgrounds" ], "meta": { "example": true, "of": "dot-pattern", "tier": "free" } }, { "name": "dot-pattern-dense", "type": "registry:example", "title": "Dot Pattern: Dense, no glow", "description": "Dense, no glow example of Dot Pattern.", "registryDependencies": [ "https://ui.ballmac.com/r/dot-pattern.json" ], "files": [ { "path": "registry/examples/dot-pattern-dense.tsx", "type": "registry:example", "target": "@components/ballmac/examples/dot-pattern-dense.tsx" } ], "categories": [ "backgrounds" ], "meta": { "example": true, "of": "dot-pattern", "tier": "free" } }, { "name": "dotted-map", "type": "registry:ui", "title": "Dotted Map", "description": "A world map built from dots, with pulsing markers, optional labels and animated routes between places, as one lightweight SVG with a text summary for screen readers.", "author": "Ballmac ", "dependencies": [ "motion@^12" ], "registryDependencies": [ "utils", "https://ui.ballmac.com/r/motion-presets.json", "https://ui.ballmac.com/r/i18n.json" ], "files": [ { "path": "registry/ballmac/components/dotted-map.tsx", "type": "registry:ui", "target": "@components/ballmac/dotted-map.tsx" } ], "categories": [ "data-display" ], "meta": { "schema": 1, "tier": "free", "tags": [ "map", "world", "dots", "markers", "locations" ], "version": "1.0.0", "updated": "2026-10-01", "ai": { "summary": ". The land mask is built in; nothing is fetched. Higher dots gives finer coastlines.", "whenToUse": [ "Where-we-operate and customer-location sections", "Network and traffic visualizations" ], "whenNotToUse": [ "Interactive geographic data or zooming (use a map library)", "A 3D globe (globe)" ], "composesWith": [ "globe", "stat-card" ], "a11y": [ { "keys": "Screen readers", "action": "The map is an image whose name lists every labelled place" }, { "keys": "Reduced motion", "action": "Routes are drawn solid and markers do not pulse" } ], "customization": [ "dots", "latRange", "tone", "labels", "markers and arcs" ] }, "source": { "name": "cobe", "url": "https://github.com/shuding/cobe", "license": "MIT", "copyright": "Copyright (c) 2021 Shu Ding", "modified": true }, "examples": [ "dotted-map-demo", "dotted-map-regions" ], "url": "https://ui.ballmac.com/components/dotted-map" } }, { "name": "dotted-map-demo", "type": "registry:example", "title": "Dotted Map: Offices with routes", "description": "Offices with routes example of Dotted Map.", "registryDependencies": [ "https://ui.ballmac.com/r/dotted-map.json" ], "files": [ { "path": "registry/examples/dotted-map-demo.tsx", "type": "registry:example", "target": "@components/ballmac/examples/dotted-map-demo.tsx" } ], "categories": [ "data-display" ], "meta": { "example": true, "of": "dotted-map", "tier": "free" } }, { "name": "dotted-map-regions", "type": "registry:example", "title": "Dotted Map: Dense map with labels", "description": "Dense map with labels example of Dotted Map.", "registryDependencies": [ "https://ui.ballmac.com/r/dotted-map.json" ], "files": [ { "path": "registry/examples/dotted-map-regions.tsx", "type": "registry:example", "target": "@components/ballmac/examples/dotted-map-regions.tsx" } ], "categories": [ "data-display" ], "meta": { "example": true, "of": "dotted-map", "tier": "free" } }, { "name": "drawer", "type": "registry:ui", "title": "Drawer", "description": "A swipe-to-dismiss panel from any edge on Vaul, with grab handle, header, scrollable body and footer, drag-safe inner content and reduced-motion handling.", "author": "Ballmac ", "dependencies": [ "vaul@^1" ], "registryDependencies": [ "utils" ], "files": [ { "path": "registry/ballmac/components/drawer.tsx", "type": "registry:ui", "target": "@components/ballmac/drawer.tsx" } ], "categories": [ "primitives" ], "meta": { "schema": 1, "tier": "free", "tags": [ "overlay", "mobile", "bottom sheet", "vaul" ], "version": "1.0.0", "updated": "2026-09-30", "ai": { "summary": "Bottom drawers suit mobile actions; use direction left or right for side panels. Compose DrawerHeader, DrawerBody and DrawerFooter.", "whenToUse": [ "Mobile-first confirmations and pickers", "Panels users may want to flick away" ], "whenNotToUse": [ "Desktop settings panels; use sheet", "Critical confirmations; use alert-dialog" ], "composesWith": [ "button", "sheet" ], "a11y": [ { "keys": "Tab / Shift+Tab", "action": "Cycles focus inside the drawer" }, { "keys": "Escape", "action": "Closes and returns focus to the trigger" }, { "keys": "Drag / swipe", "action": "Dismisses by gesture" } ], "customization": [ "direction", "snapPoints", "dismissible", "handle visibility" ] }, "source": { "name": "shadcn/ui Drawer", "url": "https://github.com/shadcn-ui/ui", "license": "MIT", "copyright": "Copyright (c) 2023 shadcn", "modified": true }, "examples": [ "drawer-demo", "drawer-states" ], "url": "https://ui.ballmac.com/components/drawer" } }, { "name": "drawer-demo", "type": "registry:example", "title": "Drawer: Order review", "description": "Order review example of Drawer.", "registryDependencies": [ "https://ui.ballmac.com/r/drawer.json", "https://ui.ballmac.com/r/button.json" ], "dependencies": [ "lucide-react" ], "files": [ { "path": "registry/examples/drawer-demo.tsx", "type": "registry:example", "target": "@components/ballmac/examples/drawer-demo.tsx" } ], "categories": [ "primitives" ], "meta": { "example": true, "of": "drawer", "tier": "free" } }, { "name": "drawer-states", "type": "registry:example", "title": "Drawer: Four directions", "description": "Four directions example of Drawer.", "registryDependencies": [ "https://ui.ballmac.com/r/drawer.json", "https://ui.ballmac.com/r/button.json" ], "files": [ { "path": "registry/examples/drawer-states.tsx", "type": "registry:example", "target": "@components/ballmac/examples/drawer-states.tsx" } ], "categories": [ "primitives" ], "meta": { "example": true, "of": "drawer", "tier": "free" } }, { "name": "dropdown-menu", "type": "registry:ui", "title": "Dropdown Menu", "description": "An action menu on a trigger with checkbox and radio items, submenus, shortcut hints and destructive rows, built on Radix for full keyboard and typeahead support.", "author": "Ballmac ", "dependencies": [ "radix-ui", "lucide-react" ], "registryDependencies": [ "utils", "https://ui.ballmac.com/r/direction.json" ], "files": [ { "path": "registry/ballmac/components/dropdown-menu.tsx", "type": "registry:ui", "target": "@components/ballmac/dropdown-menu.tsx" } ], "categories": [ "primitives" ], "meta": { "schema": 1, "tier": "free", "tags": [ "menu", "overlay", "actions", "radix" ], "version": "1.0.0", "updated": "2026-09-30", "ai": { "summary": "Opens a menu of actions from a button. Supports groups, labels, checkbox and radio items, nested submenus, shortcuts and a destructive style.", "whenToUse": [ "Account, row and overflow (…) actions", "Sort and view preferences with radio items", "Menus with a submenu or checked options" ], "whenNotToUse": [ "Choosing a form value; use select or combobox", "Right-click menus; use context-menu", "A persistent app menu bar; use menubar" ], "composesWith": [ "button", "kbd" ], "a11y": [ { "keys": "Enter / Space / ArrowDown", "action": "Opens the menu from the trigger" }, { "keys": "ArrowUp / ArrowDown", "action": "Moves between items; Home and End jump" }, { "keys": "Type a letter", "action": "Jumps to the next item starting with it" }, { "keys": "ArrowRight / ArrowLeft", "action": "Opens and closes a submenu" }, { "keys": "Escape", "action": "Closes and returns focus to the trigger" } ], "customization": [ "destructive item style", "inset alignment for mixed icon rows", "alignment and side offset on the content", "controlled open state" ] }, "source": { "name": "shadcn/ui Dropdown Menu", "url": "https://github.com/shadcn-ui/ui", "license": "MIT", "copyright": "Copyright (c) 2023 shadcn", "modified": true }, "examples": [ "dropdown-menu-demo", "dropdown-menu-states" ], "url": "https://ui.ballmac.com/components/dropdown-menu" } }, { "name": "dropdown-menu-demo", "type": "registry:example", "title": "Dropdown Menu: Account menu", "description": "Account menu example of Dropdown Menu.", "registryDependencies": [ "https://ui.ballmac.com/r/dropdown-menu.json" ], "dependencies": [ "lucide-react" ], "files": [ { "path": "registry/examples/dropdown-menu-demo.tsx", "type": "registry:example", "target": "@components/ballmac/examples/dropdown-menu-demo.tsx" } ], "categories": [ "primitives" ], "meta": { "example": true, "of": "dropdown-menu", "tier": "free" } }, { "name": "dropdown-menu-states", "type": "registry:example", "title": "Dropdown Menu: Radio choices", "description": "Radio choices example of Dropdown Menu.", "registryDependencies": [ "https://ui.ballmac.com/r/dropdown-menu.json" ], "dependencies": [ "lucide-react" ], "files": [ { "path": "registry/examples/dropdown-menu-states.tsx", "type": "registry:example", "target": "@components/ballmac/examples/dropdown-menu-states.tsx" } ], "categories": [ "primitives" ], "meta": { "example": true, "of": "dropdown-menu", "tier": "free" } }, { "name": "dynamic-island", "type": "registry:ui", "title": "Dynamic Island", "description": "A black pill or MacBook-style notch that morphs between live activities (timers, uploads, an AI thinking state, notifications) with a spring layout animation. Each view is announced politely.", "author": "Ballmac ", "dependencies": [ "motion@^12" ], "registryDependencies": [ "utils" ], "files": [ { "path": "registry/ballmac/components/dynamic-island.tsx", "type": "registry:ui", "target": "@components/ballmac/dynamic-island.tsx" } ], "categories": [ "macos" ], "meta": { "schema": 1, "tier": "free", "tags": [ "dynamic island", "notch", "macos", "ios", "live activity", "status", "motion", "morph" ], "version": "1.0.0", "updated": "2026-09-29", "ai": { "summary": " renders whichever child matches and springs its size and corner radius to fit. Size each view with className (h-/w-/padding); set radius per view; label is announced via a polite live region.", "whenToUse": [ "Showing one live background activity at a time: an upload, a build, a timer, an AI response in progress", "A compact status surface pinned to the top of an app or a product mockup", "Landing-page heroes that demo a Mac notch or iPhone app" ], "whenNotToUse": [ "Several notifications that need to stay visible together (use notification-stack)", "Long or critical messages that must not disappear (use a dialog or an inline alert)" ], "composesWith": [ "dock" ], "a11y": [ { "keys": "—", "action": "The active view's label is announced in a polite live region; interactive content inside a view is reachable with Tab" } ], "customization": [ "view: the active view value (controlled)", "shape: pill | notch (square top corners, hangs from the top edge)", "DynamicIslandView: value, radius (px, default 22), label (announced), className for size and layout", "Always black like the hardware it imitates; accent content with chart-1..5 tokens", "Under reduced motion the island switches views without the morph" ] }, "examples": [ "dynamic-island-demo", "dynamic-island-pill" ], "url": "https://ui.ballmac.com/components/dynamic-island" } }, { "name": "dynamic-island-demo", "type": "registry:example", "title": "Dynamic Island: MacBook notch", "description": "MacBook notch example of Dynamic Island.", "registryDependencies": [ "https://ui.ballmac.com/r/dynamic-island.json", "utils" ], "dependencies": [ "motion@^12", "lucide-react" ], "files": [ { "path": "registry/examples/dynamic-island-demo.tsx", "type": "registry:example", "target": "@components/ballmac/examples/dynamic-island-demo.tsx" } ], "categories": [ "macos" ], "meta": { "example": true, "of": "dynamic-island", "tier": "free" } }, { "name": "dynamic-island-pill", "type": "registry:example", "title": "Dynamic Island: Floating pill", "description": "Floating pill example of Dynamic Island.", "registryDependencies": [ "https://ui.ballmac.com/r/dynamic-island.json" ], "dependencies": [ "lucide-react" ], "files": [ { "path": "registry/examples/dynamic-island-pill.tsx", "type": "registry:example", "target": "@components/ballmac/examples/dynamic-island-pill.tsx" } ], "categories": [ "macos" ], "meta": { "example": true, "of": "dynamic-island", "tier": "free" } }, { "name": "empty-state", "type": "registry:ui", "title": "Empty State", "description": "A ready-to-use empty screen with guidance and primary and secondary action slots.", "author": "Ballmac ", "dependencies": [ "lucide-react" ], "registryDependencies": [ "https://ui.ballmac.com/r/empty.json", "utils" ], "files": [ { "path": "registry/ballmac/components/empty-state.tsx", "type": "registry:ui", "target": "@components/ballmac/empty-state.tsx" } ], "categories": [ "feedback" ], "meta": { "schema": 1, "tier": "free", "tags": [ "empty", "placeholder", "action" ], "version": "1.0.0", "updated": "2026-09-30", "ai": { "summary": "A ready-to-use empty screen with guidance and primary and secondary action slots.", "whenToUse": [ "Explain an empty collection", "Offer a clear first action" ], "whenNotToUse": [ "Use empty for a custom composition" ], "composesWith": [ "empty", "button" ], "a11y": [ { "keys": "Tab / Enter", "action": "Focus and activate supplied actions" } ], "customization": [ "Compact layout", "Icon and actions" ] }, "examples": [ "empty-state-demo", "empty-state-states" ], "url": "https://ui.ballmac.com/components/empty-state" } }, { "name": "empty-state-demo", "type": "registry:example", "title": "Empty State: Overview", "description": "Overview example of Empty State.", "registryDependencies": [ "https://ui.ballmac.com/r/empty-state.json" ], "files": [ { "path": "registry/examples/empty-state-demo.tsx", "type": "registry:example", "target": "@components/ballmac/examples/empty-state-demo.tsx" } ], "categories": [ "feedback" ], "meta": { "example": true, "of": "empty-state", "tier": "free" } }, { "name": "empty-state-states", "type": "registry:example", "title": "Empty State: States and variants", "description": "States and variants example of Empty State.", "registryDependencies": [ "https://ui.ballmac.com/r/empty-state.json" ], "files": [ { "path": "registry/examples/empty-state-states.tsx", "type": "registry:example", "target": "@components/ballmac/examples/empty-state-states.tsx" } ], "categories": [ "feedback" ], "meta": { "example": true, "of": "empty-state", "tier": "free" } }, { "name": "empty", "type": "registry:ui", "title": "Empty", "description": "A responsive empty-state surface with media, concise guidance, and a dedicated action area.", "author": "Ballmac ", "registryDependencies": [ "utils" ], "files": [ { "path": "registry/ballmac/components/empty.tsx", "type": "registry:ui", "target": "@components/ballmac/empty.tsx" } ], "categories": [ "feedback" ], "meta": { "schema": 1, "tier": "free", "tags": [ "empty", "placeholder", "state" ], "version": "1.0.0", "updated": "2026-09-29", "ai": { "summary": "A responsive empty-state surface with media, concise guidance, and a dedicated action area.", "whenToUse": [ "Explain why a list has no content", "Give the next step after a search yields no results" ], "whenNotToUse": [ "Use a skeleton while loading" ], "composesWith": [ "button" ], "a11y": [ { "keys": "Tab", "action": "reaches actions in the empty state" } ], "customization": [ "compact: reduce vertical padding" ] }, "source": { "name": "shadcn/ui Empty", "url": "https://github.com/shadcn-ui/ui", "license": "MIT", "copyright": "Copyright (c) 2023 shadcn", "modified": true }, "examples": [ "empty-demo", "empty-states" ], "url": "https://ui.ballmac.com/components/empty" } }, { "name": "empty-demo", "type": "registry:example", "title": "Empty: Overview", "description": "Overview example of Empty.", "registryDependencies": [ "https://ui.ballmac.com/r/empty.json", "https://ui.ballmac.com/r/button.json" ], "dependencies": [ "lucide-react" ], "files": [ { "path": "registry/examples/empty-demo.tsx", "type": "registry:example", "target": "@components/ballmac/examples/empty-demo.tsx" } ], "categories": [ "feedback" ], "meta": { "example": true, "of": "empty", "tier": "free" } }, { "name": "empty-states", "type": "registry:example", "title": "Empty: States and variants", "description": "States and variants example of Empty.", "registryDependencies": [ "https://ui.ballmac.com/r/empty.json" ], "dependencies": [ "lucide-react" ], "files": [ { "path": "registry/examples/empty-states.tsx", "type": "registry:example", "target": "@components/ballmac/examples/empty-states.tsx" } ], "categories": [ "feedback" ], "meta": { "example": true, "of": "empty", "tier": "free" } }, { "name": "env-editor", "type": "registry:ui", "title": "Env Editor", "description": "A .env editor with masked values, show and hide, name validation and duplicate detection, paste-to-import for whole .env files, and copy as .env.", "author": "Ballmac ", "dependencies": [ "motion@^12", "lucide-react" ], "registryDependencies": [ "utils", "https://ui.ballmac.com/r/copy-button.json", "https://ui.ballmac.com/r/i18n.json" ], "files": [ { "path": "registry/ballmac/components/env-editor.tsx", "type": "registry:ui", "target": "@components/ballmac/env-editor.tsx" } ], "categories": [ "developer" ], "meta": { "schema": 1, "tier": "free", "tags": [ "env", "environment", "variables", "secrets", "config" ], "version": "1.0.0", "updated": "2026-10-01", "ai": { "summary": "Uncontrolled with defaultValue [{ key, value }] or controlled with value [{ id, key, value }] and onChange. Pasting KEY=value lines into a name field, or into the Paste .env box, imports them. parseEnv and formatEnv are exported.", "whenToUse": [ "Project or deployment settings pages", "Anywhere people manage secrets as key and value pairs" ], "whenNotToUse": [ "Structured settings with types (settings-panel)", "A single secret (api-key-field)" ], "composesWith": [ "api-key-field", "settings-panel", "copy-button" ], "a11y": [ { "keys": "Tab", "action": "Name, value, show/hide, remove for every row, in order" }, { "keys": "Screen readers", "action": "Inputs are named 'Name of variable 2' and 'Value of API_KEY'; problems are linked with aria-describedby; add and remove are announced" }, { "keys": "Focus", "action": "A new row focuses its name; removing focuses the row above" } ], "customization": [ "maskAll", "disabled", "title and description", "onChange" ] }, "examples": [ "env-editor-demo", "env-editor-controlled" ], "url": "https://ui.ballmac.com/components/env-editor" } }, { "name": "env-editor-demo", "type": "registry:example", "title": "Env Editor: Project variables", "description": "Project variables example of Env Editor.", "registryDependencies": [ "https://ui.ballmac.com/r/env-editor.json" ], "files": [ { "path": "registry/examples/env-editor-demo.tsx", "type": "registry:example", "target": "@components/ballmac/examples/env-editor-demo.tsx" } ], "categories": [ "developer" ], "meta": { "example": true, "of": "env-editor", "tier": "free" } }, { "name": "env-editor-controlled", "type": "registry:example", "title": "Env Editor: Controlled with a live .env preview", "description": "Controlled with a live .env preview example of Env Editor.", "registryDependencies": [ "https://ui.ballmac.com/r/env-editor.json" ], "files": [ { "path": "registry/examples/env-editor-controlled.tsx", "type": "registry:example", "target": "@components/ballmac/examples/env-editor-controlled.tsx" } ], "categories": [ "developer" ], "meta": { "example": true, "of": "env-editor", "tier": "free" } }, { "name": "feedback-widget", "type": "registry:ui", "title": "Feedback Widget", "description": "A feedback pill that opens a popover with five face ratings as a radio group, optional topic chips and a comment box, then a thank-you confirmation.", "author": "Ballmac ", "dependencies": [ "motion@^12", "lucide-react" ], "registryDependencies": [ "utils", "https://ui.ballmac.com/r/motion-presets.json", "https://ui.ballmac.com/r/popover.json", "https://ui.ballmac.com/r/i18n.json" ], "files": [ { "path": "registry/ballmac/components/feedback-widget.tsx", "type": "registry:ui", "target": "@components/ballmac/feedback-widget.tsx" } ], "categories": [ "saas" ], "meta": { "schema": 1, "tier": "free", "tags": [ "feedback", "rating", "survey", "popover" ], "version": "1.0.0", "updated": "2026-09-30", "ai": { "summary": ". onSubmit receives {rating, message, topic}; return a promise to show sending. Dock it in a corner with your own positioning.", "whenToUse": [ "Collecting product feedback in-app", "Page 'was this helpful' prompts" ], "whenNotToUse": [ "Long surveys", "Support requests; link to a help form" ], "composesWith": [ "popover", "rating", "textarea" ], "a11y": [ { "keys": "Arrow keys", "action": "Move between faces (native radios); each has a text label" }, { "keys": "Tab", "action": "Topic chips, comment and Send are in order" }, { "keys": "Screen readers", "action": "Success is announced as a status" } ], "customization": [ "topics", "question", "requireMessage", "closeAfter", "side and align" ] }, "examples": [ "feedback-widget-demo", "feedback-widget-states" ], "url": "https://ui.ballmac.com/components/feedback-widget" } }, { "name": "feedback-widget-demo", "type": "registry:example", "title": "Feedback Widget: Floating widget", "description": "Floating widget example of Feedback Widget.", "registryDependencies": [ "https://ui.ballmac.com/r/feedback-widget.json" ], "files": [ { "path": "registry/examples/feedback-widget-demo.tsx", "type": "registry:example", "target": "@components/ballmac/examples/feedback-widget-demo.tsx" } ], "categories": [ "saas" ], "meta": { "example": true, "of": "feedback-widget", "tier": "free" } }, { "name": "feedback-widget-states", "type": "registry:example", "title": "Feedback Widget: Helpful page, required comment", "description": "Helpful page, required comment example of Feedback Widget.", "registryDependencies": [ "https://ui.ballmac.com/r/feedback-widget.json" ], "files": [ { "path": "registry/examples/feedback-widget-states.tsx", "type": "registry:example", "target": "@components/ballmac/examples/feedback-widget-states.tsx" } ], "categories": [ "saas" ], "meta": { "example": true, "of": "feedback-widget", "tier": "free" } }, { "name": "field", "type": "registry:ui", "title": "Field", "description": "Form field layout with label, description and error that wire their ids to the control automatically, plus fieldset, legend, orientation and invalid/disabled state.", "author": "Ballmac ", "dependencies": [ "class-variance-authority" ], "registryDependencies": [ "utils" ], "files": [ { "path": "registry/ballmac/components/field.tsx", "type": "registry:ui", "target": "@components/ballmac/field.tsx" } ], "categories": [ "forms" ], "meta": { "schema": 1, "tier": "free", "tags": [ "form", "label", "validation", "layout" ], "version": "1.0.0", "updated": "2026-09-30", "ai": { "summary": "Wrap a control in Field, spread useFieldControl() on it, and label, description, error, aria-invalid and disabled are connected for you.", "whenToUse": [ "Any labelled form control", "Forms with validation messages", "Settings rows with a switch or checkbox" ], "whenNotToUse": [ "A single unlabeled search box; use search-field", "Complete form state management; combine with your form library" ], "composesWith": [ "input", "textarea", "select", "checkbox", "switch", "combobox" ], "a11y": [ { "keys": "Click label", "action": "Focuses the control" }, { "keys": "Screen readers", "action": "Read the description, and the error when invalid; the error is announced with role alert" } ], "customization": [ "orientation: vertical | horizontal | responsive", "invalid and disabled", "FieldError errors array (deduplicated)", "required marker on FieldLabel" ] }, "source": { "name": "shadcn/ui Field", "url": "https://github.com/shadcn-ui/ui", "license": "MIT", "copyright": "Copyright (c) 2023 shadcn", "modified": true }, "examples": [ "field-demo", "field-states" ], "url": "https://ui.ballmac.com/components/field" } }, { "name": "field-demo", "type": "registry:example", "title": "Field: Invite form", "description": "Invite form example of Field.", "registryDependencies": [ "https://ui.ballmac.com/r/field.json", "https://ui.ballmac.com/r/button.json", "https://ui.ballmac.com/r/input.json" ], "files": [ { "path": "registry/examples/field-demo.tsx", "type": "registry:example", "target": "@components/ballmac/examples/field-demo.tsx" } ], "categories": [ "forms" ], "meta": { "example": true, "of": "field", "tier": "free" } }, { "name": "field-states", "type": "registry:example", "title": "Field: Switch rows", "description": "Switch rows example of Field.", "registryDependencies": [ "https://ui.ballmac.com/r/field.json", "https://ui.ballmac.com/r/checkbox.json", "https://ui.ballmac.com/r/switch.json" ], "files": [ { "path": "registry/examples/field-states.tsx", "type": "registry:example", "target": "@components/ballmac/examples/field-states.tsx" } ], "categories": [ "forms" ], "meta": { "example": true, "of": "field", "tier": "free" } }, { "name": "file-browser", "type": "registry:ui", "title": "File Browser", "description": "A file manager for apps: breadcrumb folders, search, sortable columns, row checkboxes with select-all, a bulk-action bar, list and grid views and full keyboard control.", "author": "Ballmac ", "dependencies": [ "lucide-react" ], "registryDependencies": [ "utils", "https://ui.ballmac.com/r/i18n.json", "https://ui.ballmac.com/r/direction.json" ], "files": [ { "path": "registry/ballmac/components/file-browser.tsx", "type": "registry:ui", "target": "@components/ballmac/file-browser.tsx" } ], "categories": [ "data-display" ], "meta": { "schema": 1, "tier": "free", "tags": [ "files", "browser", "table", "upload", "folders" ], "version": "1.0.0", "updated": "2026-10-01", "ai": { "summary": ". entries is a FileEntry tree. Sort by name, modified or size (aria-sort). Space selects, Enter opens, arrow keys move.", "whenToUse": [ "Drive-style pages inside an app", "Choosing files for download or deletion" ], "whenNotToUse": [ "A Mac-styled window (finder-window)", "Plain tables (data-table)" ], "composesWith": [ "data-table", "breadcrumb", "file-dropzone" ], "a11y": [ { "keys": "Arrow keys", "action": "Move between rows or cards" }, { "keys": "Space", "action": "Toggles selection" }, { "keys": "Enter", "action": "Opens a folder or file" }, { "keys": "Screen readers", "action": "Sort state, selection count and item count are announced" } ], "customization": [ "view", "rootLabel", "onDelete and onDownload", "sorting" ] }, "examples": [ "file-browser-demo", "file-browser-grid" ], "url": "https://ui.ballmac.com/components/file-browser" } }, { "name": "file-browser-demo", "type": "registry:example", "title": "File Browser: Project files", "description": "Project files example of File Browser.", "registryDependencies": [ "https://ui.ballmac.com/r/file-browser.json" ], "files": [ { "path": "registry/examples/file-browser-demo.tsx", "type": "registry:example", "target": "@components/ballmac/examples/file-browser-demo.tsx" } ], "categories": [ "data-display" ], "meta": { "example": true, "of": "file-browser", "tier": "free" } }, { "name": "file-browser-grid", "type": "registry:example", "title": "File Browser: Grid view", "description": "Grid view example of File Browser.", "registryDependencies": [ "https://ui.ballmac.com/r/file-browser.json" ], "files": [ { "path": "registry/examples/file-browser-grid.tsx", "type": "registry:example", "target": "@components/ballmac/examples/file-browser-grid.tsx" } ], "categories": [ "data-display" ], "meta": { "example": true, "of": "file-browser", "tier": "free" } }, { "name": "file-dropzone", "type": "registry:ui", "title": "File Dropzone", "description": "Drop files or browse with native file selection, type and size validation, removable file rows, and live errors.", "author": "Ballmac ", "dependencies": [ "lucide-react" ], "registryDependencies": [ "utils", "https://ui.ballmac.com/r/i18n.json" ], "files": [ { "path": "registry/ballmac/components/file-dropzone.tsx", "type": "registry:ui", "target": "@components/ballmac/file-dropzone.tsx" } ], "categories": [ "forms" ], "meta": { "schema": 1, "tier": "free", "tags": [ "upload", "files", "dropzone" ], "version": "1.0.0", "updated": "2026-09-30", "ai": { "summary": "Drop files or browse with native file selection, type and size validation, removable file rows, and live errors.", "whenToUse": [ "Upload a document or group of assets", "Review selected files before submitting" ], "whenNotToUse": [ "Use input for a minimal single-file field" ], "composesWith": [ "button" ], "a11y": [ { "keys": "Tab / Enter", "action": "Opens the native file chooser" }, { "keys": "Drop", "action": "Adds valid files" }, { "keys": "Tab / Enter", "action": "Removes a selected file" } ], "customization": [ "accept, maxFiles, maxSize, multiple", "files / defaultFiles and onFilesChange" ] }, "examples": [ "file-dropzone-demo", "file-dropzone-states" ], "url": "https://ui.ballmac.com/components/file-dropzone" } }, { "name": "file-dropzone-demo", "type": "registry:example", "title": "File Dropzone: Overview", "description": "Overview example of File Dropzone.", "registryDependencies": [ "https://ui.ballmac.com/r/file-dropzone.json" ], "files": [ { "path": "registry/examples/file-dropzone-demo.tsx", "type": "registry:example", "target": "@components/ballmac/examples/file-dropzone-demo.tsx" } ], "categories": [ "forms" ], "meta": { "example": true, "of": "file-dropzone", "tier": "free" } }, { "name": "file-dropzone-states", "type": "registry:example", "title": "File Dropzone: States and variants", "description": "States and variants example of File Dropzone.", "registryDependencies": [ "https://ui.ballmac.com/r/file-dropzone.json" ], "files": [ { "path": "registry/examples/file-dropzone-states.tsx", "type": "registry:example", "target": "@components/ballmac/examples/file-dropzone-states.tsx" } ], "categories": [ "forms" ], "meta": { "example": true, "of": "file-dropzone", "tier": "free" } }, { "name": "file-tree", "type": "registry:ui", "title": "File Tree", "description": "A folder and file explorer with semantic tree navigation and file-type icons.", "author": "Ballmac ", "dependencies": [ "lucide-react" ], "registryDependencies": [ "https://ui.ballmac.com/r/tree-view.json", "https://ui.ballmac.com/r/i18n.json" ], "files": [ { "path": "registry/ballmac/components/file-tree.tsx", "type": "registry:ui", "target": "@components/ballmac/file-tree.tsx" } ], "categories": [ "data-display" ], "meta": { "schema": 1, "tier": "free", "tags": [ "files", "folders", "tree" ], "version": "1.0.0", "updated": "2026-09-30", "ai": { "summary": "A folder and file explorer with semantic tree navigation and file-type icons.", "whenToUse": [ "Browse a project or document hierarchy" ], "whenNotToUse": [ "Use Tree View for non-file hierarchies" ], "composesWith": [ "tree-view" ], "a11y": [ { "keys": "Arrow keys / Home / End / Enter / Space", "action": "Navigates folders and selects files" } ], "customization": [ "Controlled and uncontrolled state", "Content and token-based className styling" ] }, "examples": [ "file-tree-demo", "file-tree-states" ], "url": "https://ui.ballmac.com/components/file-tree" } }, { "name": "file-tree-demo", "type": "registry:example", "title": "File Tree: Overview", "description": "Overview example of File Tree.", "registryDependencies": [ "https://ui.ballmac.com/r/file-tree.json" ], "files": [ { "path": "registry/examples/file-tree-demo.tsx", "type": "registry:example", "target": "@components/ballmac/examples/file-tree-demo.tsx" } ], "categories": [ "data-display" ], "meta": { "example": true, "of": "file-tree", "tier": "free" } }, { "name": "file-tree-states", "type": "registry:example", "title": "File Tree: States and variants", "description": "States and variants example of File Tree.", "registryDependencies": [ "https://ui.ballmac.com/r/file-tree.json" ], "files": [ { "path": "registry/examples/file-tree-states.tsx", "type": "registry:example", "target": "@components/ballmac/examples/file-tree-states.tsx" } ], "categories": [ "data-display" ], "meta": { "example": true, "of": "file-tree", "tier": "free" } }, { "name": "finder-window", "type": "registry:ui", "title": "Finder Window", "description": "A working mini Finder: sidebar shortcuts, back and forward history, icon and list views, search, click, shift and command selection, keyboard navigation and a path bar, on a macOS window.", "author": "Ballmac ", "dependencies": [ "lucide-react" ], "registryDependencies": [ "utils", "https://ui.ballmac.com/r/mac-window.json", "https://ui.ballmac.com/r/mac-icons.json", "https://ui.ballmac.com/r/i18n.json" ], "files": [ { "path": "registry/ballmac/components/finder-window.tsx", "type": "registry:ui", "target": "@components/ballmac/finder-window.tsx" } ], "categories": [ "macos" ], "meta": { "schema": 1, "tier": "free", "tags": [ "finder", "files", "macos", "window", "browser" ], "version": "1.0.0", "updated": "2026-10-01", "ai": { "summary": ". root is a FinderNode tree (folder, file or drive). Double-click or Return opens; Cmd+Up goes to the parent folder.", "whenToUse": [ "Product demos and docs that show a file system", "Mac-style apps" ], "whenNotToUse": [ "A real file manager for your app (file-browser)", "A single window frame (mac-window)" ], "composesWith": [ "mac-window", "toolbar", "desktop-icons", "mac-context-menu" ], "a11y": [ { "keys": "Arrow keys", "action": "Move the selection; Shift extends it" }, { "keys": "Enter / Cmd+Down", "action": "Opens the item" }, { "keys": "Cmd+Up", "action": "Opens the parent folder" }, { "keys": "Screen readers", "action": "A multi-select listbox named by the folder; the path bar and item count are announced" } ], "customization": [ "view: icons | list", "sidebar sections", "defaultFolder", "onOpenFile" ] }, "examples": [ "finder-window-demo", "finder-window-list" ], "url": "https://ui.ballmac.com/components/finder-window" } }, { "name": "finder-window-demo", "type": "registry:example", "title": "Finder Window: Home folder", "description": "Home folder example of Finder Window.", "registryDependencies": [ "https://ui.ballmac.com/r/finder-window.json" ], "dependencies": [ "lucide-react" ], "files": [ { "path": "registry/examples/finder-window-demo.tsx", "type": "registry:example", "target": "@components/ballmac/examples/finder-window-demo.tsx" } ], "categories": [ "macos" ], "meta": { "example": true, "of": "finder-window", "tier": "free" } }, { "name": "finder-window-list", "type": "registry:example", "title": "Finder Window: List view", "description": "List view example of Finder Window.", "registryDependencies": [ "https://ui.ballmac.com/r/finder-window.json" ], "dependencies": [ "lucide-react" ], "files": [ { "path": "registry/examples/finder-window-list.tsx", "type": "registry:example", "target": "@components/ballmac/examples/finder-window-list.tsx" } ], "categories": [ "macos" ], "meta": { "example": true, "of": "finder-window", "tier": "free" } }, { "name": "flickering-grid", "type": "registry:ui", "title": "Flickering Grid", "description": "A canvas grid of small squares that flicker at random brightness, like a busy status board. Pixel-snapped, token-colored, DPR aware, pauses off-screen, static under reduced motion.", "author": "Ballmac ", "registryDependencies": [ "utils", "https://ui.ballmac.com/r/color.json" ], "files": [ { "path": "registry/ballmac/components/flickering-grid.tsx", "type": "registry:ui", "target": "@components/ballmac/flickering-grid.tsx" } ], "categories": [ "backgrounds" ], "meta": { "schema": 1, "tier": "free", "tags": [ "grid", "pixels", "flicker", "canvas", "background", "hero" ], "version": "1.0.0", "updated": "2026-09-29", "ai": { "summary": "Place as the first child of a relative, overflow-hidden container; it fills it (absolute inset-0, aria-hidden, pointer-events-none). Tune squareSize, gap and maxOpacity for density and contrast.", "whenToUse": [ "Section or hero backgrounds for infrastructure, data or developer products", "Feature cards that should feel alive without a focal animation" ], "whenNotToUse": [ "Behind small or low-contrast text (keep maxOpacity low or add a scrim)", "Very large full-page areas on low-power devices (use dot-pattern)" ], "composesWith": [ "number-ticker", "shimmer-text" ], "a11y": [], "customization": [ "squareSize (px, default 4), gap (px, default 6)", "flickerChance: changes per square per second (default 0.3); maxOpacity (default 0.3)", "color: CSS variable name or color, default --foreground; fade toggles the radial mask" ] }, "examples": [ "flickering-grid-demo", "flickering-grid-accent" ], "url": "https://ui.ballmac.com/components/flickering-grid" } }, { "name": "flickering-grid-demo", "type": "registry:example", "title": "Flickering Grid: Section background", "description": "Section background example of Flickering Grid.", "registryDependencies": [ "https://ui.ballmac.com/r/flickering-grid.json" ], "files": [ { "path": "registry/examples/flickering-grid-demo.tsx", "type": "registry:example", "target": "@components/ballmac/examples/flickering-grid-demo.tsx" } ], "categories": [ "backgrounds" ], "meta": { "example": true, "of": "flickering-grid", "tier": "free" } }, { "name": "flickering-grid-accent", "type": "registry:example", "title": "Flickering Grid: Accent card", "description": "Accent card example of Flickering Grid.", "registryDependencies": [ "https://ui.ballmac.com/r/flickering-grid.json" ], "files": [ { "path": "registry/examples/flickering-grid-accent.tsx", "type": "registry:example", "target": "@components/ballmac/examples/flickering-grid-accent.tsx" } ], "categories": [ "backgrounds" ], "meta": { "example": true, "of": "flickering-grid", "tier": "free" } }, { "name": "floating-nav", "type": "registry:ui", "title": "Floating Nav", "description": "A pill-shaped navigation that floats over the page, with an indicator that glides between items on a spring and optional hide-on-scroll.", "author": "Ballmac ", "dependencies": [ "motion@^12" ], "registryDependencies": [ "utils", "https://ui.ballmac.com/r/scroll.json", "https://ui.ballmac.com/r/motion-presets.json", "https://ui.ballmac.com/r/i18n.json" ], "files": [ { "path": "registry/ballmac/components/floating-nav.tsx", "type": "registry:ui", "target": "@components/ballmac/floating-nav.tsx" } ], "categories": [ "navigation" ], "meta": { "schema": 1, "tier": "free", "tags": [ "navigation", "pill", "floating", "mobile" ], "version": "1.0.0", "updated": "2026-09-30", "ai": { "summary": "items: {value,label,href,icon}. position top or bottom; autoHide slides it away on scroll; value/defaultValue/onValueChange pick the active item.", "whenToUse": [ "Landing pages and portfolios", "App-style bottom navigation on small screens" ], "whenNotToUse": [ "Sites that need nested menus; use navbar with mega-menu", "Long lists of links" ], "composesWith": [ "navbar", "button" ], "a11y": [ { "keys": "Tab", "action": "Moves through the links" }, { "keys": "Screen readers", "action": "Active item has aria-current; icon-only items keep their label" }, { "keys": "Reduced motion", "action": "The indicator jumps instead of gliding; hiding uses no transition" } ], "customization": [ "position: top | bottom", "autoHide", "icons (labels collapse on small screens)", "scrollContainer" ] }, "examples": [ "floating-nav-demo", "floating-nav-states" ], "url": "https://ui.ballmac.com/components/floating-nav" } }, { "name": "floating-nav-demo", "type": "registry:example", "title": "Floating Nav: Top bar that hides", "description": "Top bar that hides example of Floating Nav.", "registryDependencies": [ "https://ui.ballmac.com/r/floating-nav.json" ], "dependencies": [ "lucide-react" ], "files": [ { "path": "registry/examples/floating-nav-demo.tsx", "type": "registry:example", "target": "@components/ballmac/examples/floating-nav-demo.tsx" } ], "categories": [ "navigation" ], "meta": { "example": true, "of": "floating-nav", "tier": "free" } }, { "name": "floating-nav-states", "type": "registry:example", "title": "Floating Nav: Bottom bar", "description": "Bottom bar example of Floating Nav.", "registryDependencies": [ "https://ui.ballmac.com/r/floating-nav.json" ], "dependencies": [ "lucide-react" ], "files": [ { "path": "registry/examples/floating-nav-states.tsx", "type": "registry:example", "target": "@components/ballmac/examples/floating-nav-states.tsx" } ], "categories": [ "navigation" ], "meta": { "example": true, "of": "floating-nav", "tier": "free" } }, { "name": "form", "type": "registry:ui", "title": "Form", "description": "React Hook Form wired to Ballmac Field: one FormField renders label, control, description and error with ids, aria-invalid and aria-describedby linked, plus a pending submit button.", "author": "Ballmac ", "dependencies": [ "react-hook-form@^7" ], "registryDependencies": [ "utils", "https://ui.ballmac.com/r/button.json", "https://ui.ballmac.com/r/field.json" ], "files": [ { "path": "registry/ballmac/components/form.tsx", "type": "registry:ui", "target": "@components/ballmac/form.tsx" } ], "categories": [ "forms" ], "meta": { "schema": 1, "tier": "free", "tags": [ "form", "validation", "react-hook-form", "field" ], "version": "1.0.0", "updated": "2026-09-30", "ai": { "summary": "const form = useForm();
}/>. Use rules or a resolver for validation.", "whenToUse": [ "Any form with client validation", "Forms that need per-field errors announced" ], "whenNotToUse": [ "A single uncontrolled input; use field", "Server actions without client state" ], "composesWith": [ "field", "input", "checkbox", "select" ], "a11y": [ { "keys": "Enter", "action": "Submits; focus moves to the first invalid control" }, { "keys": "Screen readers", "action": "Labels, hints and errors are linked; errors use role alert" } ], "customization": [ "rules or resolver", "orientation horizontal for checkboxes", "pendingText on FormSubmit", "description and required" ] }, "source": { "name": "shadcn/ui Form", "url": "https://github.com/shadcn-ui/ui", "license": "MIT", "copyright": "Copyright (c) 2023 shadcn", "modified": true }, "examples": [ "form-demo", "form-states" ], "url": "https://ui.ballmac.com/components/form" } }, { "name": "form-demo", "type": "registry:example", "title": "Form: Sign up", "description": "Sign up example of Form.", "registryDependencies": [ "https://ui.ballmac.com/r/form.json", "https://ui.ballmac.com/r/checkbox.json", "https://ui.ballmac.com/r/input.json" ], "dependencies": [ "react-hook-form@^7", "lucide-react" ], "files": [ { "path": "registry/examples/form-demo.tsx", "type": "registry:example", "target": "@components/ballmac/examples/form-demo.tsx" } ], "categories": [ "forms" ], "meta": { "example": true, "of": "form", "tier": "free" } }, { "name": "form-states", "type": "registry:example", "title": "Form: Pending submit", "description": "Pending submit example of Form.", "registryDependencies": [ "https://ui.ballmac.com/r/form.json", "https://ui.ballmac.com/r/input.json", "https://ui.ballmac.com/r/textarea.json" ], "dependencies": [ "react-hook-form@^7" ], "files": [ { "path": "registry/examples/form-states.tsx", "type": "registry:example", "target": "@components/ballmac/examples/form-states.tsx" } ], "categories": [ "forms" ], "meta": { "example": true, "of": "form", "tier": "free" } }, { "name": "git-graph", "type": "registry:ui", "title": "Git Graph", "description": "A commit history with lane-routed branch and merge lines, branch and tag labels, authors and dates, selection, and listbox keyboard navigation.", "author": "Ballmac ", "dependencies": [ "lucide-react" ], "registryDependencies": [ "utils", "https://ui.ballmac.com/r/i18n.json" ], "files": [ { "path": "registry/ballmac/components/git-graph.tsx", "type": "registry:ui", "target": "@components/ballmac/git-graph.tsx" } ], "categories": [ "developer" ], "meta": { "schema": 1, "tier": "free", "tags": [ "git", "commits", "history", "branches", "graph" ], "version": "1.0.0", "updated": "2026-10-01", "ai": { "summary": "commits is newest first: [{ hash, parents, message, author, date, branches?, tags? }]. Lanes are computed for you (layoutCommits is exported). selected/onSelect for a detail view. Rows are listbox options.", "whenToUse": [ "Repository or release history views", "Explaining a branching strategy in docs" ], "whenNotToUse": [ "Diffs (diff-viewer)", "Huge histories without paging" ], "composesWith": [ "diff-viewer", "code-block", "badge" ], "a11y": [ { "keys": "ArrowUp / ArrowDown", "action": "Moves the active commit" }, { "keys": "Home / End", "action": "First or last commit" }, { "keys": "Enter / Space", "action": "Selects the active commit" }, { "keys": "Screen readers", "action": "Each option reads message, author, date, short hash, merge and refs" } ], "customization": [ "selected / onSelect", "hideAuthors", "label" ] }, "examples": [ "git-graph-demo", "git-graph-linear" ], "url": "https://ui.ballmac.com/components/git-graph" } }, { "name": "git-graph-demo", "type": "registry:example", "title": "Git Graph: Branches and a merge", "description": "Branches and a merge example of Git Graph.", "registryDependencies": [ "https://ui.ballmac.com/r/git-graph.json" ], "files": [ { "path": "registry/examples/git-graph-demo.tsx", "type": "registry:example", "target": "@components/ballmac/examples/git-graph-demo.tsx" } ], "categories": [ "developer" ], "meta": { "example": true, "of": "git-graph", "tier": "free" } }, { "name": "git-graph-linear", "type": "registry:example", "title": "Git Graph: Linear history", "description": "Linear history example of Git Graph.", "registryDependencies": [ "https://ui.ballmac.com/r/git-graph.json" ], "files": [ { "path": "registry/examples/git-graph-linear.tsx", "type": "registry:example", "target": "@components/ballmac/examples/git-graph-linear.tsx" } ], "categories": [ "developer" ], "meta": { "example": true, "of": "git-graph", "tier": "free" } }, { "name": "glare-hover", "type": "registry:ui", "title": "Glare Hover", "description": "Wraps any content so a diagonal band of light sweeps across it on hover or keyboard focus, in white for images and dark surfaces or a soft shadow for light ones.", "author": "Ballmac ", "registryDependencies": [ "utils", "https://ui.ballmac.com/r/motion-presets.json" ], "files": [ { "path": "registry/ballmac/components/glare-hover.tsx", "type": "registry:ui", "target": "@components/ballmac/glare-hover.tsx" } ], "categories": [ "motion" ], "meta": { "schema": 1, "tier": "free", "tags": [ "hover", "glare", "shine", "image", "card" ], "version": "1.0.0", "updated": "2026-10-01", "ai": { "summary": "anything. The sweep runs once per hover and resets instantly when the pointer leaves. Pure CSS transitions; nothing renders on pointer move.", "whenToUse": [ "Product images, posters and cards", "Anything that deserves a small touch of polish on hover" ], "whenNotToUse": [ "Pointer-following lighting (magic-card or spotlight-card)" ], "composesWith": [ "tilt-card", "magic-card", "card" ], "a11y": [ { "keys": "Focus", "action": "The sweep also plays when something inside gains keyboard focus" }, { "keys": "Screen readers", "action": "The glare is aria-hidden" }, { "keys": "Reduced motion", "action": "No glare is drawn" } ], "customization": [ "angle", "duration", "intensity", "tone" ] }, "examples": [ "glare-hover-demo", "glare-hover-tones" ], "url": "https://ui.ballmac.com/components/glare-hover" } }, { "name": "glare-hover-demo", "type": "registry:example", "title": "Glare Hover: Image cards", "description": "Image cards example of Glare Hover.", "registryDependencies": [ "https://ui.ballmac.com/r/glare-hover.json" ], "files": [ { "path": "registry/examples/glare-hover-demo.tsx", "type": "registry:example", "target": "@components/ballmac/examples/glare-hover-demo.tsx" } ], "categories": [ "motion" ], "meta": { "example": true, "of": "glare-hover", "tier": "free" } }, { "name": "glare-hover-tones", "type": "registry:example", "title": "Glare Hover: Light and dark tone", "description": "Light and dark tone example of Glare Hover.", "registryDependencies": [ "https://ui.ballmac.com/r/glare-hover.json" ], "files": [ { "path": "registry/examples/glare-hover-tones.tsx", "type": "registry:example", "target": "@components/ballmac/examples/glare-hover-tones.tsx" } ], "categories": [ "motion" ], "meta": { "example": true, "of": "glare-hover", "tier": "free" } }, { "name": "globe", "type": "registry:ui", "title": "Globe", "description": "An interactive WebGL dot globe (cobe) with markers, drag-to-spin momentum and arrow-key control. Colors come from theme tokens and repaint on theme change; starts lazily and pauses off-screen.", "author": "Ballmac ", "dependencies": [ "cobe@^0.6" ], "registryDependencies": [ "utils", "https://ui.ballmac.com/r/color.json", "https://ui.ballmac.com/r/i18n.json" ], "files": [ { "path": "registry/ballmac/components/globe.tsx", "type": "registry:ui", "target": "@components/ballmac/globe.tsx" } ], "categories": [ "backgrounds" ], "meta": { "schema": 1, "tier": "free", "tags": [ "globe", "webgl", "map", "regions", "3d", "hero", "interactive" ], "version": "1.0.0", "updated": "2026-09-29", "ai": { "summary": "Render in a sized container (it is a square, w-full, max 600px). The canvas has role=img and an aria-label; pass label to describe what it shows. It starts WebGL only when scrolled near the viewport.", "whenToUse": [ "Showing global reach: regions, edge locations, offices, customers by country", "A hero or feature-card visual for infrastructure, networking or travel products" ], "whenNotToUse": [ "Precise geographic data or choropleths (use a real map library)", "Several globes on one page; each is a WebGL context" ], "composesWith": [ "number-ticker", "spotlight-card", "badge" ], "a11y": [ { "keys": "Arrow Left / Arrow Right", "action": "Spins the globe" }, { "keys": "Arrow Up / Arrow Down", "action": "Tilts the globe; it settles back" } ], "customization": [ "markers: [{ location: [lat, lng], size }]", "markerColor (default --chart-1), baseColor and glowColor: CSS variable names or any CSS color; defaults adapt to light and dark", "speed (radians per frame, 0 to stop), phi, theta, mapBrightness, mapSamples", "interactive={false} for a purely decorative globe" ] }, "examples": [ "globe-demo", "globe-hero" ], "url": "https://ui.ballmac.com/components/globe" } }, { "name": "globe-demo", "type": "registry:example", "title": "Globe: Regions card", "description": "Regions card example of Globe.", "registryDependencies": [ "https://ui.ballmac.com/r/globe.json" ], "files": [ { "path": "registry/examples/globe-demo.tsx", "type": "registry:example", "target": "@components/ballmac/examples/globe-demo.tsx" } ], "categories": [ "backgrounds" ], "meta": { "example": true, "of": "globe", "tier": "free" } }, { "name": "globe-hero", "type": "registry:example", "title": "Globe: Hero horizon", "description": "Hero horizon example of Globe.", "registryDependencies": [ "https://ui.ballmac.com/r/globe.json" ], "files": [ { "path": "registry/examples/globe-hero.tsx", "type": "registry:example", "target": "@components/ballmac/examples/globe-hero.tsx" } ], "categories": [ "backgrounds" ], "meta": { "example": true, "of": "globe", "tier": "free" } }, { "name": "glow-border", "type": "registry:ui", "title": "Glow Border", "description": "Wraps any content in a border drawn by a rotating conic gradient in theme colors, with a soft outer glow. Speed, width, radius and arc length are props; it stops at a still angle under reduced motion.", "author": "Ballmac ", "dependencies": [ "motion@^12" ], "registryDependencies": [ "utils" ], "files": [ { "path": "registry/ballmac/components/glow-border.tsx", "type": "registry:ui", "target": "@components/ballmac/glow-border.tsx" } ], "categories": [ "motion" ], "meta": { "schema": 1, "tier": "free", "tags": [ "border", "gradient", "glow", "conic", "highlight", "pricing", "button", "motion" ], "version": "1.0.0", "updated": "2026-09-29", "ai": { "summary": "Put content inside ; it renders a padded wrapper whose padding shows a rotating conic gradient and a content surface (bg-card, radius minus width). Use arc={1} for a full rainbow ring, a smaller arc for a comet.", "whenToUse": [ "The recommended plan in a pricing table", "One primary call-to-action or an AI entry point", "Marking a card as new, live or selected" ], "whenNotToUse": [ "Several elements at once on the same screen (use it for one focal point)", "A thin light that travels along an existing border (use border-beam)" ], "composesWith": [ "button", "border-beam", "tilt-card" ], "a11y": [], "customization": [ "duration: seconds per rotation (default 4); width: ring px (default 1.5); radius: px (default 14, 999 for pills)", "colors: CSS colors or var(--chart-n) values; arc: 0–1 share of the ring lit (default 0.55)", "glow: 0–1 outer glow strength (0 turns it off)", "contentClassName styles the inner surface (bg-background, bg-primary…)", "Animates a registered CSS property (--glow-border-angle); pauses off-screen" ] }, "examples": [ "glow-border-demo", "glow-border-button" ], "url": "https://ui.ballmac.com/components/glow-border" } }, { "name": "glow-border-demo", "type": "registry:example", "title": "Glow Border: Pricing highlight", "description": "Pricing highlight example of Glow Border.", "registryDependencies": [ "https://ui.ballmac.com/r/glow-border.json", "https://ui.ballmac.com/r/button.json" ], "dependencies": [ "lucide-react" ], "files": [ { "path": "registry/examples/glow-border-demo.tsx", "type": "registry:example", "target": "@components/ballmac/examples/glow-border-demo.tsx" } ], "categories": [ "motion" ], "meta": { "example": true, "of": "glow-border", "tier": "free" } }, { "name": "glow-border-button", "type": "registry:example", "title": "Glow Border: Buttons", "description": "Buttons example of Glow Border.", "registryDependencies": [ "https://ui.ballmac.com/r/glow-border.json" ], "dependencies": [ "lucide-react" ], "files": [ { "path": "registry/examples/glow-border-button.tsx", "type": "registry:example", "target": "@components/ballmac/examples/glow-border-button.tsx" } ], "categories": [ "motion" ], "meta": { "example": true, "of": "glow-border", "tier": "free" } }, { "name": "gradient-text", "type": "registry:ui", "title": "Gradient Text", "description": "Text filled with a gradient of theme colors that slowly drifts, or a shiny variant that sweeps a glint of light across it on a pause. Static under reduced motion; plain text in forced colors.", "author": "Ballmac ", "dependencies": [ "motion@^12" ], "registryDependencies": [ "utils" ], "files": [ { "path": "registry/ballmac/components/gradient-text.tsx", "type": "registry:ui", "target": "@components/ballmac/gradient-text.tsx" } ], "categories": [ "text" ], "meta": { "schema": 1, "tier": "free", "tags": [ "text", "gradient", "headline", "shine", "hero", "motion" ], "version": "1.0.0", "updated": "2026-09-29", "ai": { "summary": "Wrap a few words: ship software inside a heading, or as=\"h2\". variant=\"flow\" (default) drifts the gradient; variant=\"shiny\" adds a periodic white glint. Colors default to --chart-1/4/5/3.", "whenToUse": [ "Highlighting two or three words in a hero headline", "Product or plan names (shiny)" ], "whenNotToUse": [ "Body text or long passages (contrast varies along the gradient)", "A muted loading shimmer on status text (use shimmer-text)" ], "composesWith": [ "word-rotate", "shimmer-text" ], "a11y": [], "customization": [ "variant: flow | shiny", "colors: CSS colors or var(--chart-n); angle in degrees (default 100)", "duration: seconds per drift (default 6) or sweep (default 1.4); repeatDelay for shiny (default 2.4)", "shineColor: glint color for the shiny variant (default near-white; keep colors saturated so it shows)", "Add pb-[0.08em] if descenders clip at large sizes" ] }, "examples": [ "gradient-text-demo", "gradient-text-shiny" ], "url": "https://ui.ballmac.com/components/gradient-text" } }, { "name": "gradient-text-demo", "type": "registry:example", "title": "Gradient Text: Flowing headline", "description": "Flowing headline example of Gradient Text.", "registryDependencies": [ "https://ui.ballmac.com/r/gradient-text.json" ], "files": [ { "path": "registry/examples/gradient-text-demo.tsx", "type": "registry:example", "target": "@components/ballmac/examples/gradient-text-demo.tsx" } ], "categories": [ "text" ], "meta": { "example": true, "of": "gradient-text", "tier": "free" } }, { "name": "gradient-text-shiny", "type": "registry:example", "title": "Gradient Text: Shiny", "description": "Shiny example of Gradient Text.", "registryDependencies": [ "https://ui.ballmac.com/r/gradient-text.json" ], "files": [ { "path": "registry/examples/gradient-text-shiny.tsx", "type": "registry:example", "target": "@components/ballmac/examples/gradient-text-shiny.tsx" } ], "categories": [ "text" ], "meta": { "example": true, "of": "gradient-text", "tier": "free" } }, { "name": "grid-pattern", "type": "registry:ui", "title": "Grid Pattern", "description": "A crisp square-grid background in the border color with optional dashed lines, filled cells, softly lighting random cells and an edge fade, drawn as one SVG pattern.", "author": "Ballmac ", "dependencies": [ "motion@^12" ], "registryDependencies": [ "utils" ], "files": [ { "path": "registry/ballmac/components/grid-pattern.tsx", "type": "registry:ui", "target": "@components/ballmac/grid-pattern.tsx" } ], "categories": [ "backgrounds" ], "meta": { "schema": 1, "tier": "free", "tags": [ "grid", "pattern", "svg", "background", "lines" ], "version": "1.0.0", "updated": "2026-10-01", "ai": { "summary": " in a relative parent. Random cells are picked after mount so server and browser agree.", "whenToUse": [ "Section and hero backgrounds that need structure", "Behind cards and empty states" ], "whenNotToUse": [ "Dots (dot-pattern)", "A pointer-reactive grid (interactive-grid)" ], "composesWith": [ "dot-pattern", "interactive-grid", "animated-grid" ], "a11y": [ { "keys": "Screen readers", "action": "Decorative: aria-hidden" }, { "keys": "Reduced motion", "action": "No random cells light up" } ], "customization": [ "cell", "x and y offset", "strokeDasharray", "squares", "flicker", "fade" ] }, "examples": [ "grid-pattern-demo", "grid-pattern-variants" ], "url": "https://ui.ballmac.com/components/grid-pattern" } }, { "name": "grid-pattern-demo", "type": "registry:example", "title": "Grid Pattern: Faded grid with highlighted cells", "description": "Faded grid with highlighted cells example of Grid Pattern.", "registryDependencies": [ "https://ui.ballmac.com/r/grid-pattern.json" ], "files": [ { "path": "registry/examples/grid-pattern-demo.tsx", "type": "registry:example", "target": "@components/ballmac/examples/grid-pattern-demo.tsx" } ], "categories": [ "backgrounds" ], "meta": { "example": true, "of": "grid-pattern", "tier": "free" } }, { "name": "grid-pattern-variants", "type": "registry:example", "title": "Grid Pattern: Dashed and flickering", "description": "Dashed and flickering example of Grid Pattern.", "registryDependencies": [ "https://ui.ballmac.com/r/grid-pattern.json" ], "files": [ { "path": "registry/examples/grid-pattern-variants.tsx", "type": "registry:example", "target": "@components/ballmac/examples/grid-pattern-variants.tsx" } ], "categories": [ "backgrounds" ], "meta": { "example": true, "of": "grid-pattern", "tier": "free" } }, { "name": "highlighter", "type": "registry:ui", "title": "Highlighter", "description": "Hand-drawn marks around inline text: highlight, underline, box, circle, strike-through and brackets, drawn in when the phrase scrolls into view.", "author": "Ballmac ", "dependencies": [ "motion@^12" ], "registryDependencies": [ "utils" ], "files": [ { "path": "registry/ballmac/components/highlighter.tsx", "type": "registry:ui", "target": "@components/ballmac/highlighter.tsx" } ], "categories": [ "text" ], "meta": { "schema": 1, "tier": "free", "tags": [ "highlight", "underline", "annotation", "marker", "text" ], "version": "1.0.0", "updated": "2026-10-01", "ai": { "summary": "phrase. Short phrases only: the mark is drawn around one box.", "whenToUse": [ "Drawing attention to a key phrase in copy", "Editorial and tutorial text" ], "whenNotToUse": [ "Multi-line passages", "Search-result highlighting (use a plain mark element)" ], "composesWith": [ "text-animate", "callout" ], "a11y": [ { "keys": "Screen readers", "action": "The mark is decorative (aria-hidden); the text is unchanged" }, { "keys": "Contrast", "action": "Text keeps the foreground color on a translucent highlight" }, { "keys": "Reduced motion", "action": "Marks are drawn instantly" } ], "customization": [ "action", "tone", "strokeWidth and padding", "duration and delay", "inView" ] }, "examples": [ "highlighter-demo", "highlighter-actions" ], "url": "https://ui.ballmac.com/components/highlighter" } }, { "name": "highlighter-demo", "type": "registry:example", "title": "Highlighter: Marks in a paragraph", "description": "Marks in a paragraph example of Highlighter.", "registryDependencies": [ "https://ui.ballmac.com/r/highlighter.json" ], "files": [ { "path": "registry/examples/highlighter-demo.tsx", "type": "registry:example", "target": "@components/ballmac/examples/highlighter-demo.tsx" } ], "categories": [ "text" ], "meta": { "example": true, "of": "highlighter", "tier": "free" } }, { "name": "highlighter-actions", "type": "registry:example", "title": "Highlighter: All six marks", "description": "All six marks example of Highlighter.", "registryDependencies": [ "https://ui.ballmac.com/r/highlighter.json" ], "files": [ { "path": "registry/examples/highlighter-actions.tsx", "type": "registry:example", "target": "@components/ballmac/examples/highlighter-actions.tsx" } ], "categories": [ "text" ], "meta": { "example": true, "of": "highlighter", "tier": "free" } }, { "name": "hover-card", "type": "registry:ui", "title": "Hover Card", "description": "A compact preview of a linked resource that appears on hover or keyboard focus without hiding essential information.", "author": "Ballmac ", "dependencies": [ "radix-ui" ], "registryDependencies": [ "utils" ], "files": [ { "path": "registry/ballmac/components/hover-card.tsx", "type": "registry:ui", "target": "@components/ballmac/hover-card.tsx" } ], "categories": [ "data-display" ], "meta": { "schema": 1, "tier": "free", "tags": [ "preview", "link", "radix" ], "version": "1.0.0", "updated": "2026-09-30", "ai": { "summary": "Adds optional context to a link for pointer and keyboard users; the link remains useful without the preview.", "whenToUse": [ "Preview a project or profile without navigating", "Show supplementary link metadata" ], "whenNotToUse": [ "Interactive actions inside a panel; use popover", "Information required to complete a task" ], "composesWith": [ "avatar", "badge" ], "a11y": [ { "keys": "Tab", "action": "Focuses the linked trigger and opens its preview" }, { "keys": "Escape", "action": "Dismisses the preview" } ], "customization": [ "side and alignment", "open and close delays" ] }, "examples": [ "hover-card-demo", "hover-card-states" ], "url": "https://ui.ballmac.com/components/hover-card" } }, { "name": "hover-card-demo", "type": "registry:example", "title": "Hover Card: Project preview", "description": "Project preview example of Hover Card.", "registryDependencies": [ "https://ui.ballmac.com/r/hover-card.json" ], "dependencies": [ "lucide-react" ], "files": [ { "path": "registry/examples/hover-card-demo.tsx", "type": "registry:example", "target": "@components/ballmac/examples/hover-card-demo.tsx" } ], "categories": [ "data-display" ], "meta": { "example": true, "of": "hover-card", "tier": "free" } }, { "name": "hover-card-states", "type": "registry:example", "title": "Hover Card: People preview", "description": "People preview example of Hover Card.", "registryDependencies": [ "https://ui.ballmac.com/r/hover-card.json" ], "files": [ { "path": "registry/examples/hover-card-states.tsx", "type": "registry:example", "target": "@components/ballmac/examples/hover-card-states.tsx" } ], "categories": [ "data-display" ], "meta": { "example": true, "of": "hover-card", "tier": "free" } }, { "name": "hud", "type": "registry:ui", "title": "HUD", "description": "The macOS volume and brightness HUD: a dark frosted square with a big icon and a 16-segment bar, or a slim capsule with a smooth bar. Pops in, restarts its timer when the value changes, fades out and announces the new level.", "author": "Ballmac ", "dependencies": [ "motion@^12", "lucide-react" ], "registryDependencies": [ "utils" ], "files": [ { "path": "registry/ballmac/components/hud.tsx", "type": "registry:ui", "target": "@components/ballmac/hud.tsx" } ], "categories": [ "macos" ], "meta": { "schema": 1, "tier": "free", "tags": [ "hud", "volume", "brightness", "macos", "overlay", "feedback" ], "version": "1.0.0", "updated": "2026-10-01", "ai": { "summary": " inside a relative container. useTransientHud() gives { visible, show, hide, onVisibleChange }.", "whenToUse": [ "Keyboard-driven level changes in desktop UI demos", "Transient feedback for hardware-style controls" ], "whenNotToUse": [ "Toasts and messages (toast)", "Persistent controls (slider)" ], "composesWith": [ "control-center", "menu-bar", "keyboard-shortcuts" ], "a11y": [ { "keys": "Screen readers", "action": "A polite status message says the new level; the visual HUD is hidden from them" }, { "keys": "Reduced motion", "action": "Fades without scaling" } ], "customization": [ "kind: volume | brightness | keyboard", "variant: mac | pill", "muted, duration, value 0 to 100" ] }, "examples": [ "hud-demo", "hud-pill" ], "url": "https://ui.ballmac.com/components/hud" } }, { "name": "hud-demo", "type": "registry:example", "title": "HUD: Volume keys", "description": "Volume keys example of HUD.", "registryDependencies": [ "https://ui.ballmac.com/r/hud.json" ], "dependencies": [ "lucide-react" ], "files": [ { "path": "registry/examples/hud-demo.tsx", "type": "registry:example", "target": "@components/ballmac/examples/hud-demo.tsx" } ], "categories": [ "macos" ], "meta": { "example": true, "of": "hud", "tier": "free" } }, { "name": "hud-pill", "type": "registry:example", "title": "HUD: Capsule variant", "description": "Capsule variant example of HUD.", "registryDependencies": [ "https://ui.ballmac.com/r/hud.json" ], "files": [ { "path": "registry/examples/hud-pill.tsx", "type": "registry:example", "target": "@components/ballmac/examples/hud-pill.tsx" } ], "categories": [ "macos" ], "meta": { "example": true, "of": "hud", "tier": "free" } }, { "name": "hyper-text", "type": "registry:ui", "title": "Hyper Text", "description": "Characters flip through random letters like a split-flap board and settle left to right, as plain text or on tiles, on load, on scroll or on hover and focus.", "author": "Ballmac ", "dependencies": [ "motion@^12" ], "registryDependencies": [ "utils" ], "files": [ { "path": "registry/ballmac/components/hyper-text.tsx", "type": "registry:ui", "target": "@components/ballmac/hyper-text.tsx" } ], "categories": [ "text" ], "meta": { "schema": 1, "tier": "free", "tags": [ "text", "flip", "split-flap", "hover", "headline" ], "version": "1.0.0", "updated": "2026-10-01", "ai": { "summary": "TEXT. Text is uppercased. The hover trigger is focusable and replays on focus.", "whenToUse": [ "Brand words, status boards, dates and counters", "Playful hover headings" ], "whenNotToUse": [ "Anything that must stay readable mid-animation", "Long sentences" ], "composesWith": [ "scramble-text", "number-ticker" ], "a11y": [ { "keys": "Tab", "action": "Reaches the text when trigger is hover; focus replays the animation" }, { "keys": "Screen readers", "action": "The real text is read once; the flipping characters are hidden" }, { "keys": "Reduced motion", "action": "Characters appear settled" } ], "customization": [ "variant", "trigger", "speed and spread", "onComplete" ] }, "examples": [ "hyper-text-demo", "hyper-text-hover" ], "url": "https://ui.ballmac.com/components/hyper-text" } }, { "name": "hyper-text-demo", "type": "registry:example", "title": "Hyper Text: Split-flap tiles", "description": "Split-flap tiles example of Hyper Text.", "registryDependencies": [ "https://ui.ballmac.com/r/hyper-text.json" ], "files": [ { "path": "registry/examples/hyper-text-demo.tsx", "type": "registry:example", "target": "@components/ballmac/examples/hyper-text-demo.tsx" } ], "categories": [ "text" ], "meta": { "example": true, "of": "hyper-text", "tier": "free" } }, { "name": "hyper-text-hover", "type": "registry:example", "title": "Hyper Text: Replay on hover", "description": "Replay on hover example of Hyper Text.", "registryDependencies": [ "https://ui.ballmac.com/r/hyper-text.json" ], "files": [ { "path": "registry/examples/hyper-text-hover.tsx", "type": "registry:example", "target": "@components/ballmac/examples/hyper-text-hover.tsx" } ], "categories": [ "text" ], "meta": { "example": true, "of": "hyper-text", "tier": "free" } }, { "name": "icon-cloud", "type": "registry:ui", "title": "Icon Cloud", "description": "Icons, logos or labels orbiting on a 3D sphere, spun by dragging, calming under the pointer and when anything has focus, with real list markup so every item stays reachable.", "author": "Ballmac ", "dependencies": [ "motion@^12" ], "registryDependencies": [ "utils", "https://ui.ballmac.com/r/i18n.json" ], "files": [ { "path": "registry/ballmac/components/icon-cloud.tsx", "type": "registry:ui", "target": "@components/ballmac/icon-cloud.tsx" } ], "categories": [ "motion" ], "meta": { "schema": 1, "tier": "free", "tags": [ "sphere", "3d", "logos", "cloud", "tech stack" ], "version": "1.0.0", "updated": "2026-10-01", "ai": { "summary": "{items}. Each child becomes a list item. Positions come from a Fibonacci sphere and update straight on the DOM. Links inside stay clickable because dragging only starts after a few pixels of movement.", "whenToUse": [ "Showing a technology or partner ecosystem", "A playful, interactive hero centerpiece" ], "whenNotToUse": [ "Anything people must read quickly", "Long lists (use a grid)" ], "composesWith": [ "orbiting-circles", "globe", "marquee" ], "a11y": [ { "keys": "Tab", "action": "Items remain focusable in document order; rotation stops while one has focus" }, { "keys": "Screen readers", "action": "A named list; position changes are visual only" }, { "keys": "Reduced motion", "action": "A still sphere" } ], "customization": [ "size", "speed", "label", "children as icons, links or text" ] }, "examples": [ "icon-cloud-demo", "icon-cloud-links" ], "url": "https://ui.ballmac.com/components/icon-cloud" } }, { "name": "icon-cloud-demo", "type": "registry:example", "title": "Icon Cloud: Tech stack sphere", "description": "Tech stack sphere example of Icon Cloud.", "registryDependencies": [ "https://ui.ballmac.com/r/icon-cloud.json" ], "files": [ { "path": "registry/examples/icon-cloud-demo.tsx", "type": "registry:example", "target": "@components/ballmac/examples/icon-cloud-demo.tsx" } ], "categories": [ "motion" ], "meta": { "example": true, "of": "icon-cloud", "tier": "free" } }, { "name": "icon-cloud-links", "type": "registry:example", "title": "Icon Cloud: Linked labels", "description": "Linked labels example of Icon Cloud.", "registryDependencies": [ "https://ui.ballmac.com/r/icon-cloud.json" ], "files": [ { "path": "registry/examples/icon-cloud-links.tsx", "type": "registry:example", "target": "@components/ballmac/examples/icon-cloud-links.tsx" } ], "categories": [ "motion" ], "meta": { "example": true, "of": "icon-cloud", "tier": "free" } }, { "name": "in-view", "type": "registry:ui", "title": "In View", "description": "A wrapper that knows when it is on screen: it sets a data attribute for CSS, offers a render function and callbacks, and can run a simple entrance.", "author": "Ballmac ", "dependencies": [ "motion@^12" ], "registryDependencies": [ "utils" ], "files": [ { "path": "registry/ballmac/components/in-view.tsx", "type": "registry:ui", "target": "@components/ballmac/in-view.tsx" } ], "categories": [ "motion" ], "meta": { "schema": 1, "tier": "free", "tags": [ "viewport", "scroll", "observer", "reveal", "trigger" ], "version": "1.0.0", "updated": "2026-10-01", "ai": { "summary": "{content or (inView)=>content}. data-in-view is true or false for Tailwind's data-[in-view=true] variants.", "whenToUse": [ "Starting a video, counter or animation only when seen", "Custom reveal styling driven by data-in-view" ], "whenNotToUse": [ "Staggered groups (blur-fade or stagger-list)" ], "composesWith": [ "blur-fade", "number-ticker", "stagger-list" ], "a11y": [ { "keys": "Screen readers", "action": "Content is always in the DOM; only presentation changes" }, { "keys": "Reduced motion", "action": "Content is shown with no entrance" } ], "customization": [ "effect", "amount and margin", "once", "onInViewChange", "as" ] }, "examples": [ "in-view-demo", "in-view-state" ], "url": "https://ui.ballmac.com/components/in-view" } }, { "name": "in-view-demo", "type": "registry:example", "title": "In View: Entrances", "description": "Entrances example of In View.", "registryDependencies": [ "https://ui.ballmac.com/r/in-view.json" ], "files": [ { "path": "registry/examples/in-view-demo.tsx", "type": "registry:example", "target": "@components/ballmac/examples/in-view-demo.tsx" } ], "categories": [ "motion" ], "meta": { "example": true, "of": "in-view", "tier": "free" } }, { "name": "in-view-state", "type": "registry:example", "title": "In View: Render function and callback", "description": "Render function and callback example of In View.", "registryDependencies": [ "https://ui.ballmac.com/r/in-view.json" ], "files": [ { "path": "registry/examples/in-view-state.tsx", "type": "registry:example", "target": "@components/ballmac/examples/in-view-state.tsx" } ], "categories": [ "motion" ], "meta": { "example": true, "of": "in-view", "tier": "free" } }, { "name": "inline-alert", "type": "registry:ui", "title": "Inline Alert", "description": "A short in-context message with semantic live priority and an optional corrective action.", "author": "Ballmac ", "dependencies": [ "lucide-react" ], "registryDependencies": [ "utils" ], "files": [ { "path": "registry/ballmac/components/inline-alert.tsx", "type": "registry:ui", "target": "@components/ballmac/inline-alert.tsx" } ], "categories": [ "feedback" ], "meta": { "schema": 1, "tier": "free", "tags": [ "validation", "message", "status" ], "version": "1.0.0", "updated": "2026-09-30", "ai": { "summary": "A short in-context message with semantic live priority and an optional corrective action.", "whenToUse": [ "Explain a field or form outcome", "Show a small inline confirmation" ], "whenNotToUse": [ "Use alert for a larger callout" ], "composesWith": [ "alert", "input" ], "a11y": [ { "keys": "Tab / Enter", "action": "Focus and activate an optional action" } ], "customization": [ "tone: info | success | error", "Action slot" ] }, "examples": [ "inline-alert-demo", "inline-alert-states" ], "url": "https://ui.ballmac.com/components/inline-alert" } }, { "name": "inline-alert-demo", "type": "registry:example", "title": "Inline Alert: Overview", "description": "Overview example of Inline Alert.", "registryDependencies": [ "https://ui.ballmac.com/r/inline-alert.json" ], "files": [ { "path": "registry/examples/inline-alert-demo.tsx", "type": "registry:example", "target": "@components/ballmac/examples/inline-alert-demo.tsx" } ], "categories": [ "feedback" ], "meta": { "example": true, "of": "inline-alert", "tier": "free" } }, { "name": "inline-alert-states", "type": "registry:example", "title": "Inline Alert: States and variants", "description": "States and variants example of Inline Alert.", "registryDependencies": [ "https://ui.ballmac.com/r/inline-alert.json" ], "files": [ { "path": "registry/examples/inline-alert-states.tsx", "type": "registry:example", "target": "@components/ballmac/examples/inline-alert-states.tsx" } ], "categories": [ "feedback" ], "meta": { "example": true, "of": "inline-alert", "tier": "free" } }, { "name": "input-group", "type": "registry:ui", "title": "Input Group", "description": "One bordered field that wraps an input or textarea with icon, text, button and keyboard-hint addons at either end or above and below.", "author": "Ballmac ", "dependencies": [ "class-variance-authority" ], "registryDependencies": [ "utils" ], "files": [ { "path": "registry/ballmac/components/input-group.tsx", "type": "registry:ui", "target": "@components/ballmac/input-group.tsx" } ], "categories": [ "forms" ], "meta": { "schema": 1, "tier": "free", "tags": [ "input", "addon", "form", "textarea" ], "version": "1.0.0", "updated": "2026-09-30", "ai": { "summary": "Put InputGroupInput or InputGroupTextarea plus InputGroupAddon parts inside InputGroup. The group draws the border, focus ring and invalid state.", "whenToUse": [ "URL and currency prefixes and suffixes", "Search fields with a button", "Chat composers with a send button" ], "whenNotToUse": [ "A plain field; use input", "Attached separate buttons; use button-group" ], "composesWith": [ "field", "button", "kbd" ], "a11y": [ { "keys": "Click addon text", "action": "Focuses the control" }, { "keys": "Tab", "action": "Moves between the control and addon buttons" } ], "customization": [ "addon align: inline-start | inline-end | block-start | block-end", "button size: xs | sm | icon-xs | icon-sm", "aria-invalid on the control" ] }, "source": { "name": "shadcn/ui Input Group", "url": "https://github.com/shadcn-ui/ui", "license": "MIT", "copyright": "Copyright (c) 2023 shadcn", "modified": true }, "examples": [ "input-group-demo", "input-group-states" ], "url": "https://ui.ballmac.com/components/input-group" } }, { "name": "input-group-demo", "type": "registry:example", "title": "Input Group: Addons", "description": "Addons example of Input Group.", "registryDependencies": [ "https://ui.ballmac.com/r/input-group.json" ], "dependencies": [ "lucide-react" ], "files": [ { "path": "registry/examples/input-group-demo.tsx", "type": "registry:example", "target": "@components/ballmac/examples/input-group-demo.tsx" } ], "categories": [ "forms" ], "meta": { "example": true, "of": "input-group", "tier": "free" } }, { "name": "input-group-states", "type": "registry:example", "title": "Input Group: Invalid and disabled", "description": "Invalid and disabled example of Input Group.", "registryDependencies": [ "https://ui.ballmac.com/r/input-group.json" ], "dependencies": [ "lucide-react" ], "files": [ { "path": "registry/examples/input-group-states.tsx", "type": "registry:example", "target": "@components/ballmac/examples/input-group-states.tsx" } ], "categories": [ "forms" ], "meta": { "example": true, "of": "input-group", "tier": "free" } }, { "name": "input-otp", "type": "registry:ui", "title": "Input OTP", "description": "A one-time-code field with grouped slots, separator, caret, paste and autofill support, invalid state and reduced-motion-safe animation, on a single real input.", "author": "Ballmac ", "dependencies": [ "input-otp@^1", "lucide-react" ], "registryDependencies": [ "utils" ], "files": [ { "path": "registry/ballmac/components/input-otp.tsx", "type": "registry:ui", "target": "@components/ballmac/input-otp.tsx" } ], "categories": [ "forms" ], "meta": { "schema": 1, "tier": "free", "tags": [ "otp", "code", "verification", "input" ], "version": "1.0.0", "updated": "2026-09-30", "ai": { "summary": " with InputOTPGroup, InputOTPSlot index and InputOTPSeparator. onComplete fires when every slot is filled.", "whenToUse": [ "Two-step sign-in and email verification", "PIN entry" ], "whenNotToUse": [ "Free-form text codes; use input", "Long passwords; use password-input" ], "composesWith": [ "field", "label" ], "a11y": [ { "keys": "Type / paste", "action": "Fills slots; autofill works with one-time-code" }, { "keys": "Backspace / arrows", "action": "Edit like a normal text field" }, { "keys": "Screen readers", "action": "One text input is announced, not six boxes" } ], "customization": [ "maxLength and pattern", "groups and separators", "aria-invalid", "onComplete" ] }, "source": { "name": "shadcn/ui Input OTP", "url": "https://github.com/shadcn-ui/ui", "license": "MIT", "copyright": "Copyright (c) 2023 shadcn", "modified": true }, "examples": [ "input-otp-demo", "input-otp-states" ], "url": "https://ui.ballmac.com/components/input-otp" } }, { "name": "input-otp-demo", "type": "registry:example", "title": "Input OTP: Verification code", "description": "Verification code example of Input OTP.", "registryDependencies": [ "https://ui.ballmac.com/r/input-otp.json" ], "dependencies": [ "lucide-react" ], "files": [ { "path": "registry/examples/input-otp-demo.tsx", "type": "registry:example", "target": "@components/ballmac/examples/input-otp-demo.tsx" } ], "categories": [ "forms" ], "meta": { "example": true, "of": "input-otp", "tier": "free" } }, { "name": "input-otp-states", "type": "registry:example", "title": "Input OTP: PIN, invalid, disabled", "description": "PIN, invalid, disabled example of Input OTP.", "registryDependencies": [ "https://ui.ballmac.com/r/input-otp.json" ], "files": [ { "path": "registry/examples/input-otp-states.tsx", "type": "registry:example", "target": "@components/ballmac/examples/input-otp-states.tsx" } ], "categories": [ "forms" ], "meta": { "example": true, "of": "input-otp", "tier": "free" } }, { "name": "input", "type": "registry:ui", "title": "Input", "description": "A text input in three heights that match Button, plus InputGroup and InputGroupAddon for leading or trailing icons, units and domains.", "author": "Ballmac ", "dependencies": [ "class-variance-authority" ], "registryDependencies": [ "utils" ], "files": [ { "path": "registry/ballmac/components/input.tsx", "type": "registry:ui", "target": "@components/ballmac/input.tsx" } ], "categories": [ "primitives" ], "meta": { "schema": 1, "tier": "free", "tags": [ "input", "text-field", "form", "search" ], "version": "1.0.0", "updated": "2026-09-28", "ai": { "summary": "Single-line text field. Use size to match neighbouring buttons, wrap in InputGroup with InputGroupAddon (align start or end) for icons or text like \".com\", and set aria-invalid for error styling.", "whenToUse": [ "Any single-line form field (email, name, URL, search)", "Search boxes with a leading icon", "Fields with a fixed unit or domain suffix" ], "whenNotToUse": [ "Multi-line text (use textarea)", "Choosing from a fixed list (use select)", "On/off settings (use switch or checkbox)" ], "composesWith": [ "label", "button", "kbd", "tooltip", "dialog" ], "a11y": [ { "keys": "Tab", "action": "Moves focus to the input" }, { "keys": "Click on an addon", "action": "Focuses the input" } ], "customization": [ "size: sm | default | lg (h-8 / h-9 / h-11)", "InputGroup size: sm | default | lg; InputGroupAddon align: start | end", "aria-invalid=\"true\" switches to destructive border and ring", "htmlSize maps to the native size attribute" ] }, "source": { "name": "shadcn/ui Input", "url": "https://github.com/shadcn-ui/ui", "license": "MIT", "copyright": "Copyright (c) 2023 shadcn", "modified": true }, "examples": [ "input-demo", "input-with-icon", "input-invalid" ], "url": "https://ui.ballmac.com/components/input" } }, { "name": "input-demo", "type": "registry:example", "title": "Input: Default", "description": "Default example of Input.", "registryDependencies": [ "https://ui.ballmac.com/r/input.json" ], "files": [ { "path": "registry/examples/input-demo.tsx", "type": "registry:example", "target": "@components/ballmac/examples/input-demo.tsx" } ], "categories": [ "primitives" ], "meta": { "example": true, "of": "input", "tier": "free" } }, { "name": "input-with-icon", "type": "registry:example", "title": "Input: With icon and suffix", "description": "With icon and suffix example of Input.", "registryDependencies": [ "https://ui.ballmac.com/r/input.json", "https://ui.ballmac.com/r/kbd.json" ], "dependencies": [ "lucide-react" ], "files": [ { "path": "registry/examples/input-with-icon.tsx", "type": "registry:example", "target": "@components/ballmac/examples/input-with-icon.tsx" } ], "categories": [ "primitives" ], "meta": { "example": true, "of": "input", "tier": "free" } }, { "name": "input-invalid", "type": "registry:example", "title": "Input: Invalid", "description": "Invalid example of Input.", "registryDependencies": [ "https://ui.ballmac.com/r/input.json", "https://ui.ballmac.com/r/label.json" ], "files": [ { "path": "registry/examples/input-invalid.tsx", "type": "registry:example", "target": "@components/ballmac/examples/input-invalid.tsx" } ], "categories": [ "primitives" ], "meta": { "example": true, "of": "input", "tier": "free" } }, { "name": "install-tabs", "type": "registry:ui", "title": "Install Tabs", "description": "Package-manager tabs for a CLI command (pnpm, npm, yarn, bun) with a copy button. Remembers the reader's choice and keeps every instance on the page in sync.", "author": "Ballmac ", "dependencies": [ "lucide-react", "radix-ui" ], "registryDependencies": [ "utils", "https://ui.ballmac.com/r/i18n.json" ], "files": [ { "path": "registry/ballmac/components/install-tabs.tsx", "type": "registry:ui", "target": "@components/ballmac/install-tabs.tsx" } ], "categories": [ "developer" ], "meta": { "schema": 1, "tier": "free", "tags": [ "install", "cli", "npm", "pnpm", "yarn", "bun", "tabs", "copy", "docs" ], "version": "1.0.0", "updated": "2026-09-28", "ai": { "summary": " renders pnpm dlx / npx / yarn dlx / bunx --bun variants. Use commands={{ npm: 'npm i x', pnpm: 'pnpm add x' }} for install (not run) commands.", "whenToUse": [ "Install or 'run this CLI' instructions in docs and READMEs", "Any page with several install snippets where the reader's package manager should stick" ], "whenNotToUse": [ "A command with its output (use terminal)", "Multi-line source code (use code-block)" ], "composesWith": [ "code-block", "terminal" ], "a11y": [ { "keys": "← / →", "action": "Moves between package-manager tabs and selects them" }, { "keys": "Home / End", "action": "Jumps to the first or last tab" }, { "keys": "Tab", "action": "Moves to the copy button and the command panel" } ], "customization": [ "command: run through each manager's runner; commands: explicit per-manager strings (only those get tabs)", "storageKey: remember the choice in localStorage, read after hydration (SSR-safe) and synced across instances and browser tabs", "value/onValueChange for controlled use; defaultValue (pnpm by default)" ] }, "examples": [ "install-tabs-demo" ], "url": "https://ui.ballmac.com/components/install-tabs" } }, { "name": "install-tabs-demo", "type": "registry:example", "title": "Install Tabs: Default", "description": "Default example of Install Tabs.", "registryDependencies": [ "https://ui.ballmac.com/r/install-tabs.json" ], "files": [ { "path": "registry/examples/install-tabs-demo.tsx", "type": "registry:example", "target": "@components/ballmac/examples/install-tabs-demo.tsx" } ], "categories": [ "developer" ], "meta": { "example": true, "of": "install-tabs", "tier": "free" } }, { "name": "interactive-grid", "type": "registry:ui", "title": "Interactive Grid", "description": "A canvas grid whose cells light up under the pointer and fade out behind it, leaving a glowing trail, drawn only while something is moving and listening on its parent so content above never blocks it.", "author": "Ballmac ", "registryDependencies": [ "utils", "https://ui.ballmac.com/r/color.json" ], "files": [ { "path": "registry/ballmac/components/interactive-grid.tsx", "type": "registry:ui", "target": "@components/ballmac/interactive-grid.tsx" } ], "categories": [ "backgrounds" ], "meta": { "schema": 1, "tier": "free", "tags": [ "grid", "canvas", "hover", "trail", "background" ], "version": "1.0.0", "updated": "2026-10-01", "ai": { "summary": " inside a relative parent. Colors are CSS variable names. It listens to the parent, repaints on theme changes and stops its frame loop when idle.", "whenToUse": [ "Heroes and empty states that should respond to the mouse", "Playful 404 pages" ], "whenNotToUse": [ "Touch-only audiences (there is no hover)", "Large amounts of text over the grid" ], "composesWith": [ "grid-pattern", "flickering-grid", "particles" ], "a11y": [ { "keys": "Screen readers", "action": "Decorative: aria-hidden and pointer-events-none" }, { "keys": "Reduced motion", "action": "A still grid; nothing lights up" } ], "customization": [ "cell", "color and lineColor", "radius", "decay", "fade" ] }, "examples": [ "interactive-grid-demo", "interactive-grid-colors" ], "url": "https://ui.ballmac.com/components/interactive-grid" } }, { "name": "interactive-grid-demo", "type": "registry:example", "title": "Interactive Grid: Hero that reacts to the pointer", "description": "Hero that reacts to the pointer example of Interactive Grid.", "registryDependencies": [ "https://ui.ballmac.com/r/interactive-grid.json" ], "files": [ { "path": "registry/examples/interactive-grid-demo.tsx", "type": "registry:example", "target": "@components/ballmac/examples/interactive-grid-demo.tsx" } ], "categories": [ "backgrounds" ], "meta": { "example": true, "of": "interactive-grid", "tier": "free" } }, { "name": "interactive-grid-colors", "type": "registry:example", "title": "Interactive Grid: Colors and cell size", "description": "Colors and cell size example of Interactive Grid.", "registryDependencies": [ "https://ui.ballmac.com/r/interactive-grid.json" ], "files": [ { "path": "registry/examples/interactive-grid-colors.tsx", "type": "registry:example", "target": "@components/ballmac/examples/interactive-grid-colors.tsx" } ], "categories": [ "backgrounds" ], "meta": { "example": true, "of": "interactive-grid", "tier": "free" } }, { "name": "invite-members", "type": "registry:ui", "title": "Invite Members", "description": "Invite teammates by email: type or paste addresses into chips, flag invalid or duplicate ones with an explanation, pick a role, send, and manage pending invitations.", "author": "Ballmac ", "dependencies": [ "motion@^12", "lucide-react" ], "registryDependencies": [ "utils", "https://ui.ballmac.com/r/motion-presets.json", "https://ui.ballmac.com/r/i18n.json" ], "files": [ { "path": "registry/ballmac/components/invite-members.tsx", "type": "registry:ui", "target": "@components/ballmac/invite-members.tsx" } ], "categories": [ "saas" ], "meta": { "schema": 1, "tier": "free", "tags": [ "invite", "team", "email", "roles" ], "version": "1.0.0", "updated": "2026-09-30", "ai": { "summary": "roles[], onInvite(invitations), pending[], onResend/onRevoke, existing[]. Addresses split on comma, space, semicolon or Enter and validate as you go.", "whenToUse": [ "Team and workspace settings", "Onboarding step for inviting colleagues" ], "whenNotToUse": [ "Searching existing users; use combobox", "Single email field; use input" ], "composesWith": [ "team-switcher", "settings-panel", "avatar" ], "a11y": [ { "keys": "Enter / comma / space", "action": "Turns typed text into a chip" }, { "keys": "Backspace", "action": "Removes the last chip when the field is empty" }, { "keys": "Screen readers", "action": "Invalid chips announce the problem; results are a polite status" } ], "customization": [ "roles and defaultRole", "existing emails", "max per batch", "title and description" ] }, "examples": [ "invite-members-demo", "invite-members-states" ], "url": "https://ui.ballmac.com/components/invite-members" } }, { "name": "invite-members-demo", "type": "registry:example", "title": "Invite Members: With pending invitations", "description": "With pending invitations example of Invite Members.", "registryDependencies": [ "https://ui.ballmac.com/r/invite-members.json" ], "files": [ { "path": "registry/examples/invite-members-demo.tsx", "type": "registry:example", "target": "@components/ballmac/examples/invite-members-demo.tsx" } ], "categories": [ "saas" ], "meta": { "example": true, "of": "invite-members", "tier": "free" } }, { "name": "invite-members-states", "type": "registry:example", "title": "Invite Members: Minimal", "description": "Minimal example of Invite Members.", "registryDependencies": [ "https://ui.ballmac.com/r/invite-members.json" ], "files": [ { "path": "registry/examples/invite-members-states.tsx", "type": "registry:example", "target": "@components/ballmac/examples/invite-members-states.tsx" } ], "categories": [ "saas" ], "meta": { "example": true, "of": "invite-members", "tier": "free" } }, { "name": "item", "type": "registry:ui", "title": "Item", "description": "A flexible list row with media, title, description and actions, in outline, muted and plain variants, that can also render as a link.", "author": "Ballmac ", "dependencies": [ "radix-ui", "class-variance-authority" ], "registryDependencies": [ "utils" ], "files": [ { "path": "registry/ballmac/components/item.tsx", "type": "registry:ui", "target": "@components/ballmac/item.tsx" } ], "categories": [ "data-display" ], "meta": { "schema": 1, "tier": "free", "tags": [ "list", "row", "media", "layout" ], "version": "1.0.0", "updated": "2026-09-30", "ai": { "summary": "Compose rows from ItemMedia, ItemContent, ItemTitle, ItemDescription and ItemActions. asChild styles a link or button as a whole-row target.", "whenToUse": [ "Settings, connected accounts and file lists", "Rows with an icon or avatar, text and an action" ], "whenNotToUse": [ "Tabular data with columns; use table", "Long card layouts; use card" ], "composesWith": [ "badge", "avatar", "button" ], "a11y": [ { "keys": "Tab / Enter", "action": "When rendered as a link or button, behaves as one" } ], "customization": [ "variant: default | outline | muted", "size: default | sm", "ItemMedia variant: default | icon | image" ] }, "source": { "name": "shadcn/ui Item", "url": "https://github.com/shadcn-ui/ui", "license": "MIT", "copyright": "Copyright (c) 2023 shadcn", "modified": true }, "examples": [ "item-demo", "item-states" ], "url": "https://ui.ballmac.com/components/item" } }, { "name": "item-demo", "type": "registry:example", "title": "Item: Settings rows", "description": "Settings rows example of Item.", "registryDependencies": [ "https://ui.ballmac.com/r/item.json", "https://ui.ballmac.com/r/badge.json", "https://ui.ballmac.com/r/button.json" ], "dependencies": [ "lucide-react" ], "files": [ { "path": "registry/examples/item-demo.tsx", "type": "registry:example", "target": "@components/ballmac/examples/item-demo.tsx" } ], "categories": [ "data-display" ], "meta": { "example": true, "of": "item", "tier": "free" } }, { "name": "item-states", "type": "registry:example", "title": "Item: Files and footer", "description": "Files and footer example of Item.", "registryDependencies": [ "https://ui.ballmac.com/r/item.json" ], "dependencies": [ "lucide-react" ], "files": [ { "path": "registry/examples/item-states.tsx", "type": "registry:example", "target": "@components/ballmac/examples/item-states.tsx" } ], "categories": [ "data-display" ], "meta": { "example": true, "of": "item", "tier": "free" } }, { "name": "json-viewer", "type": "registry:ui", "title": "JSON Viewer", "description": "A collapsible JSON inspector with compact type styling and keyboard-operable branches.", "author": "Ballmac ", "dependencies": [ "lucide-react" ], "registryDependencies": [ "utils", "https://ui.ballmac.com/r/i18n.json" ], "files": [ { "path": "registry/ballmac/components/json-viewer.tsx", "type": "registry:ui", "target": "@components/ballmac/json-viewer.tsx" } ], "categories": [ "data-display" ], "meta": { "schema": 1, "tier": "free", "tags": [ "json", "data", "developer" ], "version": "1.0.0", "updated": "2026-09-30", "ai": { "summary": "A collapsible JSON inspector with compact type styling and keyboard-operable branches.", "whenToUse": [ "Inspect nested API responses or configuration" ], "whenNotToUse": [ "Use Code Block for unstructured text" ], "composesWith": [ "code-block" ], "a11y": [ { "keys": "Tab / Enter / Space", "action": "Focuses and toggles JSON branches" } ], "customization": [ "Controlled and uncontrolled state", "Content and token-based className styling" ] }, "examples": [ "json-viewer-demo", "json-viewer-states" ], "url": "https://ui.ballmac.com/components/json-viewer" } }, { "name": "json-viewer-demo", "type": "registry:example", "title": "JSON Viewer: Overview", "description": "Overview example of JSON Viewer.", "registryDependencies": [ "https://ui.ballmac.com/r/json-viewer.json" ], "files": [ { "path": "registry/examples/json-viewer-demo.tsx", "type": "registry:example", "target": "@components/ballmac/examples/json-viewer-demo.tsx" } ], "categories": [ "data-display" ], "meta": { "example": true, "of": "json-viewer", "tier": "free" } }, { "name": "json-viewer-states", "type": "registry:example", "title": "JSON Viewer: States and variants", "description": "States and variants example of JSON Viewer.", "registryDependencies": [ "https://ui.ballmac.com/r/json-viewer.json" ], "files": [ { "path": "registry/examples/json-viewer-states.tsx", "type": "registry:example", "target": "@components/ballmac/examples/json-viewer-states.tsx" } ], "categories": [ "data-display" ], "meta": { "example": true, "of": "json-viewer", "tier": "free" } }, { "name": "kanban-board", "type": "registry:ui", "title": "Kanban Board", "description": "A responsive task board with pointer drag and keyboard movement between columns.", "author": "Ballmac ", "dependencies": [ "lucide-react" ], "registryDependencies": [ "utils", "https://ui.ballmac.com/r/i18n.json", "https://ui.ballmac.com/r/direction.json" ], "files": [ { "path": "registry/ballmac/components/kanban-board.tsx", "type": "registry:ui", "target": "@components/ballmac/kanban-board.tsx" } ], "categories": [ "data-display" ], "meta": { "schema": 1, "tier": "free", "tags": [ "kanban", "tasks", "board" ], "version": "1.0.0", "updated": "2026-09-30", "ai": { "summary": "A responsive task board with pointer drag and keyboard movement between columns.", "whenToUse": [ "Organize tasks across workflow stages" ], "whenNotToUse": [ "Use a table for dense sortable records" ], "composesWith": [ "card" ], "a11y": [ { "keys": "Tab / Alt + Arrow keys", "action": "Focuses and moves cards; buttons also move between columns" } ], "customization": [ "Controlled and uncontrolled state", "Content and token-based className styling" ] }, "examples": [ "kanban-board-demo", "kanban-board-states" ], "url": "https://ui.ballmac.com/components/kanban-board" } }, { "name": "kanban-board-demo", "type": "registry:example", "title": "Kanban Board: Overview", "description": "Overview example of Kanban Board.", "registryDependencies": [ "https://ui.ballmac.com/r/kanban-board.json" ], "files": [ { "path": "registry/examples/kanban-board-demo.tsx", "type": "registry:example", "target": "@components/ballmac/examples/kanban-board-demo.tsx" } ], "categories": [ "data-display" ], "meta": { "example": true, "of": "kanban-board", "tier": "free" } }, { "name": "kanban-board-states", "type": "registry:example", "title": "Kanban Board: States and variants", "description": "States and variants example of Kanban Board.", "registryDependencies": [ "https://ui.ballmac.com/r/kanban-board.json" ], "files": [ { "path": "registry/examples/kanban-board-states.tsx", "type": "registry:example", "target": "@components/ballmac/examples/kanban-board-states.tsx" } ], "categories": [ "data-display" ], "meta": { "example": true, "of": "kanban-board", "tier": "free" } }, { "name": "kbd", "type": "registry:ui", "title": "Kbd", "description": "Keyboard key and shortcut display built on the semantic element, in three sizes, with KbdGroup for combinations like ⌘ ⇧ K. Adapts inside tooltips.", "author": "Ballmac ", "dependencies": [ "class-variance-authority" ], "registryDependencies": [ "utils" ], "files": [ { "path": "registry/ballmac/components/kbd.tsx", "type": "registry:ui", "target": "@components/ballmac/kbd.tsx" } ], "categories": [ "primitives" ], "meta": { "schema": 1, "tier": "free", "tags": [ "kbd", "keyboard", "shortcut", "hotkey" ], "version": "1.0.0", "updated": "2026-09-28", "ai": { "summary": "Displays a key or shortcut. Use Kbd for each key and KbdGroup for keys pressed together; it restyles itself for the dark tooltip surface automatically.", "whenToUse": [ "Shortcut hints in menus, tooltips and command palettes", "Documentation of keyboard controls", "Search inputs that show a ⌘ K hint" ], "whenNotToUse": [ "Inline code or commands (use code)", "Buttons that trigger the shortcut (use button)" ], "composesWith": [ "tooltip", "button", "input" ], "a11y": [], "customization": [ "size: sm | default | lg", "Use symbols (⌘ ⇧ ⌥ ⌃ ↵) or words (Ctrl, Enter); add aria-label on KbdGroup if symbols need spelling out" ] }, "examples": [ "kbd-demo" ], "url": "https://ui.ballmac.com/components/kbd" } }, { "name": "kbd-demo", "type": "registry:example", "title": "Kbd: Default", "description": "Default example of Kbd.", "registryDependencies": [ "https://ui.ballmac.com/r/kbd.json" ], "files": [ { "path": "registry/examples/kbd-demo.tsx", "type": "registry:example", "target": "@components/ballmac/examples/kbd-demo.tsx" } ], "categories": [ "primitives" ], "meta": { "example": true, "of": "kbd", "tier": "free" } }, { "name": "keyboard-shortcuts", "type": "registry:ui", "title": "Keyboard Shortcuts", "description": "A searchable shortcut cheat sheet, inline or in a dialog opened by pressing ?, with Command or Ctrl keys chosen for the viewer's platform and spoken key names.", "author": "Ballmac ", "dependencies": [ "lucide-react" ], "registryDependencies": [ "utils", "https://ui.ballmac.com/r/dialog.json", "https://ui.ballmac.com/r/kbd.json", "https://ui.ballmac.com/r/i18n.json" ], "files": [ { "path": "registry/ballmac/components/keyboard-shortcuts.tsx", "type": "registry:ui", "target": "@components/ballmac/keyboard-shortcuts.tsx" } ], "categories": [ "developer" ], "meta": { "schema": 1, "tier": "free", "tags": [ "keyboard", "shortcuts", "hotkeys", "help", "dialog" ], "version": "1.0.0", "updated": "2026-10-01", "ai": { "summary": "groups is [{ title, shortcuts: [{ label, keys, sequence?, description? }] }]. Use 'Mod' for Cmd on Mac and Ctrl elsewhere. opens from anywhere outside a text field. platform='auto' corrects after hydration.", "whenToUse": [ "A help overlay for apps with many shortcuts", "Docs pages that list hotkeys" ], "whenNotToUse": [ "A single hint beside a button (shortcut-hint)", "Binding the shortcuts themselves; this only displays them" ], "composesWith": [ "kbd", "shortcut-hint", "command-bar", "dialog" ], "a11y": [ { "keys": "?", "action": "Opens the dialog when focus is not in a text field" }, { "keys": "Escape", "action": "Closes the dialog" }, { "keys": "Screen readers", "action": "Keys read as 'Command plus K', sequences as 'G then I'; the filtered count is announced" } ], "customization": [ "platform", "columns", "searchable", "hotkey (or null)", "sequence shortcuts" ] }, "examples": [ "keyboard-shortcuts-demo", "keyboard-shortcuts-dialog" ], "url": "https://ui.ballmac.com/components/keyboard-shortcuts" } }, { "name": "keyboard-shortcuts-demo", "type": "registry:example", "title": "Keyboard Shortcuts: Searchable cheat sheet", "description": "Searchable cheat sheet example of Keyboard Shortcuts.", "registryDependencies": [ "https://ui.ballmac.com/r/keyboard-shortcuts.json" ], "files": [ { "path": "registry/examples/keyboard-shortcuts-demo.tsx", "type": "registry:example", "target": "@components/ballmac/examples/keyboard-shortcuts-demo.tsx" } ], "categories": [ "developer" ], "meta": { "example": true, "of": "keyboard-shortcuts", "tier": "free" } }, { "name": "keyboard-shortcuts-dialog", "type": "registry:example", "title": "Keyboard Shortcuts: Dialog opened with ?", "description": "Dialog opened with ? example of Keyboard Shortcuts.", "registryDependencies": [ "https://ui.ballmac.com/r/keyboard-shortcuts.json", "https://ui.ballmac.com/r/kbd.json" ], "files": [ { "path": "registry/examples/keyboard-shortcuts-dialog.tsx", "type": "registry:example", "target": "@components/ballmac/examples/keyboard-shortcuts-dialog.tsx" } ], "categories": [ "developer" ], "meta": { "example": true, "of": "keyboard-shortcuts", "tier": "free" } }, { "name": "kpi-row", "type": "registry:ui", "title": "KPI Row", "description": "A compact, semantic row of key metrics that adapts from one to four columns.", "author": "Ballmac ", "registryDependencies": [ "utils" ], "files": [ { "path": "registry/ballmac/components/kpi-row.tsx", "type": "registry:ui", "target": "@components/ballmac/kpi-row.tsx" } ], "categories": [ "data-display" ], "meta": { "schema": 1, "tier": "free", "tags": [ "metric", "dashboard", "summary" ], "version": "1.0.0", "updated": "2026-09-30", "ai": { "summary": "A compact, semantic row of key metrics that adapts from one to four columns.", "whenToUse": [ "Show several related metrics together" ], "whenNotToUse": [ "Use Stat Card when each metric needs more context" ], "composesWith": [ "stat-card" ], "a11y": [ { "keys": "None", "action": "Static content is announced with semantic structure" } ], "customization": [ "Content, layout, and token-based className styling" ] }, "examples": [ "kpi-row-demo", "kpi-row-states" ], "url": "https://ui.ballmac.com/components/kpi-row" } }, { "name": "kpi-row-demo", "type": "registry:example", "title": "KPI Row: Overview", "description": "Overview example of KPI Row.", "registryDependencies": [ "https://ui.ballmac.com/r/kpi-row.json" ], "files": [ { "path": "registry/examples/kpi-row-demo.tsx", "type": "registry:example", "target": "@components/ballmac/examples/kpi-row-demo.tsx" } ], "categories": [ "data-display" ], "meta": { "example": true, "of": "kpi-row", "tier": "free" } }, { "name": "kpi-row-states", "type": "registry:example", "title": "KPI Row: States and variants", "description": "States and variants example of KPI Row.", "registryDependencies": [ "https://ui.ballmac.com/r/kpi-row.json" ], "files": [ { "path": "registry/examples/kpi-row-states.tsx", "type": "registry:example", "target": "@components/ballmac/examples/kpi-row-states.tsx" } ], "categories": [ "data-display" ], "meta": { "example": true, "of": "kpi-row", "tier": "free" } }, { "name": "label", "type": "registry:ui", "title": "Label", "description": "An accessible form label built on Radix Label that dims itself when the paired peer control is disabled and never selects text on double-click.", "author": "Ballmac ", "dependencies": [ "radix-ui" ], "registryDependencies": [ "utils" ], "files": [ { "path": "registry/ballmac/components/label.tsx", "type": "registry:ui", "target": "@components/ballmac/label.tsx" } ], "categories": [ "primitives" ], "meta": { "schema": 1, "tier": "free", "tags": [ "label", "form", "radix" ], "version": "1.0.0", "updated": "2026-09-28", "ai": { "summary": "Text label for a form control. Pair with htmlFor/id; put the control before it with className=\"peer\" (Checkbox and Switch already are) to get disabled styling.", "whenToUse": [ "Naming inputs, textareas, selects, checkboxes and switches", "Clickable text next to a checkbox or switch" ], "whenNotToUse": [ "Headings or section titles (use a heading element)", "Helper or error text under a field (use a p with text-muted-foreground or text-destructive)" ], "composesWith": [ "input", "textarea", "checkbox", "switch", "select" ], "a11y": [ { "keys": "Click", "action": "Focuses or toggles the associated control" } ], "customization": [ "Disabled styling via peer-disabled (control before label) or a parent with group and data-disabled=\"true\"", "Lays out children in a row with gap-2, so icons or badges can sit beside the text" ] }, "source": { "name": "shadcn/ui Label", "url": "https://github.com/shadcn-ui/ui", "license": "MIT", "copyright": "Copyright (c) 2023 shadcn", "modified": true }, "examples": [ "label-demo" ], "url": "https://ui.ballmac.com/components/label" } }, { "name": "label-demo", "type": "registry:example", "title": "Label: Default", "description": "Default example of Label.", "registryDependencies": [ "https://ui.ballmac.com/r/label.json", "https://ui.ballmac.com/r/input.json" ], "files": [ { "path": "registry/examples/label-demo.tsx", "type": "registry:example", "target": "@components/ballmac/examples/label-demo.tsx" } ], "categories": [ "primitives" ], "meta": { "example": true, "of": "label", "tier": "free" } }, { "name": "laptop-frame", "type": "registry:ui", "title": "Laptop Frame", "description": "A notched aluminium laptop drawn in CSS that scales with its container. Renders children, an image or a video as the screen, and can open its lid when it scrolls into view.", "author": "Ballmac ", "dependencies": [ "motion@^12" ], "registryDependencies": [ "utils", "https://ui.ballmac.com/r/media.json" ], "files": [ { "path": "registry/ballmac/components/laptop-frame.tsx", "type": "registry:ui", "target": "@components/ballmac/laptop-frame.tsx" } ], "categories": [ "devices" ], "meta": { "schema": 1, "tier": "free", "tags": [ "mockup", "device", "laptop", "macbook", "screenshot", "hero", "3d", "scroll" ], "version": "1.0.0", "updated": "2026-09-29", "ai": { "summary": "Wrap a product screen in : children become the display. Pass screenWidth (e.g. 1280) to lay the content out at a desktop resolution and scale it down to fit; openAnimation=\"in-view\" or \"scroll\" swings the lid open.", "whenToUse": [ "Landing-page heroes that show a desktop or web app in context", "Feature sections with a live React screen instead of a static screenshot", "Scroll-driven product reveals (openAnimation=\"scroll\")" ], "whenNotToUse": [ "Showing a website with its URL and browser chrome (use browser-frame)", "Mobile app screens (use phone-frame)" ], "composesWith": [ "browser-frame", "phone-frame" ], "a11y": [], "customization": [ "variant: auto (silver in light, midnight in dark) | silver | midnight", "screenWidth: virtual resolution in CSS px; content is scaled with a CSS transform", "src/alt for an image, videoSrc/poster for a muted looping video", "openAnimation: none | in-view | scroll; reduced motion always shows it open", "Sizes are in container units, so set the width with className (e.g. max-w-3xl)" ] }, "examples": [ "laptop-frame-demo", "laptop-frame-scroll" ], "url": "https://ui.ballmac.com/components/laptop-frame" } }, { "name": "laptop-frame-demo", "type": "registry:example", "title": "Laptop Frame: Dashboard", "description": "Dashboard example of Laptop Frame.", "registryDependencies": [ "https://ui.ballmac.com/r/laptop-frame.json" ], "dependencies": [ "lucide-react" ], "files": [ { "path": "registry/examples/laptop-frame-demo.tsx", "type": "registry:example", "target": "@components/ballmac/examples/laptop-frame-demo.tsx" } ], "categories": [ "devices" ], "meta": { "example": true, "of": "laptop-frame", "tier": "free" } }, { "name": "laptop-frame-scroll", "type": "registry:example", "title": "Laptop Frame: Midnight, opens on scroll", "description": "Midnight, opens on scroll example of Laptop Frame.", "registryDependencies": [ "https://ui.ballmac.com/r/laptop-frame.json" ], "files": [ { "path": "registry/examples/laptop-frame-scroll.tsx", "type": "registry:example", "target": "@components/ballmac/examples/laptop-frame-scroll.tsx" } ], "categories": [ "devices" ], "meta": { "example": true, "of": "laptop-frame", "tier": "free" } }, { "name": "launchpad", "type": "registry:ui", "title": "Launchpad", "description": "The macOS Launchpad: a frosted full-area overlay with search, pages of app icons sized to fit, page dots, wheel and key paging, arrow-key focus across pages and Escape to close.", "author": "Ballmac ", "dependencies": [ "motion@^12", "lucide-react" ], "registryDependencies": [ "utils", "https://ui.ballmac.com/r/i18n.json", "https://ui.ballmac.com/r/direction.json" ], "files": [ { "path": "registry/ballmac/components/launchpad.tsx", "type": "registry:ui", "target": "@components/ballmac/launchpad.tsx" } ], "categories": [ "macos" ], "meta": { "schema": 1, "tier": "free", "tags": [ "launchpad", "apps", "grid", "overlay", "macos" ], "version": "1.0.0", "updated": "2026-10-01", "ai": { "summary": ". It fills its positioned parent. Pages, rows and columns are computed from the available size.", "whenToUse": [ "Mac desktop demos", "App launchers in dashboards" ], "whenNotToUse": [ "Command palettes (command)", "Navigation menus" ], "composesWith": [ "dock", "mac-icons", "spotlight-search" ], "a11y": [ { "keys": "Arrow keys", "action": "Move between apps across pages" }, { "keys": "PageUp / PageDown", "action": "Turn pages" }, { "keys": "Enter in search", "action": "Launches the first match" }, { "keys": "Escape", "action": "Closes" }, { "keys": "Reduced motion", "action": "No zoom or blur on open" } ], "customization": [ "cellWidth and cellHeight", "label", "open / onClose" ] }, "examples": [ "launchpad-demo", "launchpad-many" ], "url": "https://ui.ballmac.com/components/launchpad" } }, { "name": "launchpad-demo", "type": "registry:example", "title": "Launchpad: Open launcher", "description": "Open launcher example of Launchpad.", "registryDependencies": [ "https://ui.ballmac.com/r/launchpad.json", "https://ui.ballmac.com/r/mac-icons.json" ], "dependencies": [ "lucide-react" ], "files": [ { "path": "registry/examples/launchpad-demo.tsx", "type": "registry:example", "target": "@components/ballmac/examples/launchpad-demo.tsx" } ], "categories": [ "macos" ], "meta": { "example": true, "of": "launchpad", "tier": "free" } }, { "name": "launchpad-many", "type": "registry:example", "title": "Launchpad: Many apps and paging", "description": "Many apps and paging example of Launchpad.", "registryDependencies": [ "https://ui.ballmac.com/r/launchpad.json", "https://ui.ballmac.com/r/mac-icons.json" ], "files": [ { "path": "registry/examples/launchpad-many.tsx", "type": "registry:example", "target": "@components/ballmac/examples/launchpad-many.tsx" } ], "categories": [ "macos" ], "meta": { "example": true, "of": "launchpad", "tier": "free" } }, { "name": "lens", "type": "registry:ui", "title": "Lens", "description": "A magnifying lens that follows the pointer over an image or any content, moves with the arrow keys when focused, hides on Escape and keeps the copy inside it out of the accessibility tree.", "author": "Ballmac ", "dependencies": [ "motion@^12" ], "registryDependencies": [ "utils", "https://ui.ballmac.com/r/i18n.json" ], "files": [ { "path": "registry/ballmac/components/lens.tsx", "type": "registry:ui", "target": "@components/ballmac/lens.tsx" } ], "categories": [ "motion" ], "meta": { "schema": 1, "tier": "free", "tags": [ "zoom", "magnifier", "image", "hover", "lens" ], "version": "1.0.0", "updated": "2026-10-01", "ai": { "summary": "{image or content}. Works with any child. The magnified copy is inert and aria-hidden. Touch pointers are ignored so scrolling is never blocked.", "whenToUse": [ "Product photos and maps", "Inspecting fine detail in diagrams or charts" ], "whenNotToUse": [ "Full-screen image viewing (use a dialog)" ], "composesWith": [ "card", "tilt-card" ], "a11y": [ { "keys": "Tab", "action": "The area is focusable; the lens appears centered" }, { "keys": "ArrowKeys", "action": "Move the lens in steps; Escape hides it" }, { "keys": "Screen readers", "action": "The group is named and explains the keys; the copy is hidden" } ], "customization": [ "zoom", "lensSize", "label" ] }, "examples": [ "lens-demo", "lens-text" ], "url": "https://ui.ballmac.com/components/lens" } }, { "name": "lens-demo", "type": "registry:example", "title": "Lens: Product image", "description": "Product image example of Lens.", "registryDependencies": [ "https://ui.ballmac.com/r/lens.json" ], "files": [ { "path": "registry/examples/lens-demo.tsx", "type": "registry:example", "target": "@components/ballmac/examples/lens-demo.tsx" } ], "categories": [ "motion" ], "meta": { "example": true, "of": "lens", "tier": "free" } }, { "name": "lens-text", "type": "registry:example", "title": "Lens: Magnifying text", "description": "Magnifying text example of Lens.", "registryDependencies": [ "https://ui.ballmac.com/r/lens.json" ], "files": [ { "path": "registry/examples/lens-text.tsx", "type": "registry:example", "target": "@components/ballmac/examples/lens-text.tsx" } ], "categories": [ "motion" ], "meta": { "example": true, "of": "lens", "tier": "free" } }, { "name": "light-rays", "type": "registry:ui", "title": "Light Rays", "description": "Soft beams of theme-colored light fanning down from the top edge, each swaying and breathing at its own pace, deterministic so the server and browser match.", "author": "Ballmac ", "dependencies": [ "motion@^12" ], "registryDependencies": [ "utils" ], "files": [ { "path": "registry/ballmac/components/light-rays.tsx", "type": "registry:ui", "target": "@components/ballmac/light-rays.tsx" } ], "categories": [ "backgrounds" ], "meta": { "schema": 1, "tier": "free", "tags": [ "light", "rays", "glow", "background", "hero" ], "version": "1.0.0", "updated": "2026-10-01", "ai": { "summary": " inside a relative, overflow-hidden parent. Tone is a theme token, so it follows any palette.", "whenToUse": [ "Hero and pricing sections that want warmth", "Behind modals and announcement bars" ], "whenNotToUse": [ "Light backgrounds with dark text at high intensity" ], "composesWith": [ "aurora-background", "retro-grid", "beams-background" ], "a11y": [ { "keys": "Screen readers", "action": "Decorative: aria-hidden and pointer-events-none" }, { "keys": "Reduced motion", "action": "The rays are still" } ], "customization": [ "count", "tone", "spread", "intensity", "duration" ] }, "examples": [ "light-rays-demo", "light-rays-tones" ], "url": "https://ui.ballmac.com/components/light-rays" } }, { "name": "light-rays-demo", "type": "registry:example", "title": "Light Rays: Hero spotlight", "description": "Hero spotlight example of Light Rays.", "registryDependencies": [ "https://ui.ballmac.com/r/light-rays.json" ], "files": [ { "path": "registry/examples/light-rays-demo.tsx", "type": "registry:example", "target": "@components/ballmac/examples/light-rays-demo.tsx" } ], "categories": [ "backgrounds" ], "meta": { "example": true, "of": "light-rays", "tier": "free" } }, { "name": "light-rays-tones", "type": "registry:example", "title": "Light Rays: Tones and count", "description": "Tones and count example of Light Rays.", "registryDependencies": [ "https://ui.ballmac.com/r/light-rays.json" ], "files": [ { "path": "registry/examples/light-rays-tones.tsx", "type": "registry:example", "target": "@components/ballmac/examples/light-rays-tones.tsx" } ], "categories": [ "backgrounds" ], "meta": { "example": true, "of": "light-rays", "tier": "free" } }, { "name": "loading-dots", "type": "registry:ui", "title": "Loading Dots", "description": "A compact loading status with staggered token-colored dots that stop for reduced motion.", "author": "Ballmac ", "registryDependencies": [ "utils", "https://ui.ballmac.com/r/i18n.json" ], "files": [ { "path": "registry/ballmac/components/loading-dots.tsx", "type": "registry:ui", "target": "@components/ballmac/loading-dots.tsx" } ], "categories": [ "feedback" ], "meta": { "schema": 1, "tier": "free", "tags": [ "loading", "status", "animation" ], "version": "1.0.0", "updated": "2026-09-30", "ai": { "summary": "A compact loading status with staggered token-colored dots that stop for reduced motion.", "whenToUse": [ "Indicate short pending work", "Pair a compact loader with a button label" ], "whenNotToUse": [ "Use skeleton for a full content placeholder" ], "composesWith": [ "spinner", "button" ], "a11y": [ { "keys": "None", "action": "Accessible status label" } ], "customization": [ "size: sm | default | lg", "Status label" ] }, "examples": [ "loading-dots-demo", "loading-dots-states" ], "url": "https://ui.ballmac.com/components/loading-dots" } }, { "name": "loading-dots-demo", "type": "registry:example", "title": "Loading Dots: Overview", "description": "Overview example of Loading Dots.", "registryDependencies": [ "https://ui.ballmac.com/r/loading-dots.json" ], "files": [ { "path": "registry/examples/loading-dots-demo.tsx", "type": "registry:example", "target": "@components/ballmac/examples/loading-dots-demo.tsx" } ], "categories": [ "feedback" ], "meta": { "example": true, "of": "loading-dots", "tier": "free" } }, { "name": "loading-dots-states", "type": "registry:example", "title": "Loading Dots: States and variants", "description": "States and variants example of Loading Dots.", "registryDependencies": [ "https://ui.ballmac.com/r/loading-dots.json" ], "files": [ { "path": "registry/examples/loading-dots-states.tsx", "type": "registry:example", "target": "@components/ballmac/examples/loading-dots-states.tsx" } ], "categories": [ "feedback" ], "meta": { "example": true, "of": "loading-dots", "tier": "free" } }, { "name": "lock-screen", "type": "registry:ui", "title": "Lock Screen", "description": "A full-screen lock screen in two flavors: macOS (live clock, avatar, password field that shakes when wrong) and iOS (clock, notification stack, flashlight and camera, swipe up to unlock). Hydration-safe clock.", "author": "Ballmac ", "dependencies": [ "motion@^12", "lucide-react" ], "registryDependencies": [ "utils", "https://ui.ballmac.com/r/motion-presets.json", "https://ui.ballmac.com/r/i18n.json", "https://ui.ballmac.com/r/media.json" ], "files": [ { "path": "registry/ballmac/components/lock-screen.tsx", "type": "registry:ui", "target": "@components/ballmac/lock-screen.tsx" } ], "categories": [ "macos" ], "meta": { "schema": 1, "tier": "free", "tags": [ "lock-screen", "login", "macos", "ios", "clock", "password", "wallpaper" ], "version": "1.0.0", "updated": "2026-10-01", "ai": { "summary": " fills its positioned parent until unlocked. variant=\"ios\" takes notifications as children and unlocks by swiping up or pressing the button. Control with locked / onLockedChange.", "whenToUse": [ "Mac or phone UI demos with a login moment", "Idle or session-timeout screens" ], "whenNotToUse": [ "Real authentication: the password prop is for demos, check credentials on a server" ], "composesWith": [ "phone-frame", "notification-stack", "mac-window", "menu-bar" ], "a11y": [ { "keys": "Tab", "action": "Reaches the password field and the Unlock button" }, { "keys": "Enter", "action": "Submits the password" }, { "keys": "Wrong password", "action": "Announced as an alert and the field shakes (no shake with reduced motion)" }, { "keys": "Reduced motion", "action": "Fade instead of slide, blur and scale; iOS shows an Unlock button" } ], "customization": [ "variant: mac | ios", "password, onUnlock, hint, name, avatar", "time and date for a fixed clock (omit for live)", "wallpaper replaces the default", "locked / defaultLocked / onLockedChange" ] }, "examples": [ "lock-screen-demo", "lock-screen-ios" ], "url": "https://ui.ballmac.com/components/lock-screen" } }, { "name": "lock-screen-demo", "type": "registry:example", "title": "Lock Screen: macOS password lock", "description": "macOS password lock example of Lock Screen.", "registryDependencies": [ "https://ui.ballmac.com/r/lock-screen.json" ], "dependencies": [ "lucide-react" ], "files": [ { "path": "registry/examples/lock-screen-demo.tsx", "type": "registry:example", "target": "@components/ballmac/examples/lock-screen-demo.tsx" } ], "categories": [ "macos" ], "meta": { "example": true, "of": "lock-screen", "tier": "free" } }, { "name": "lock-screen-ios", "type": "registry:example", "title": "Lock Screen: iOS in a phone", "description": "iOS in a phone example of Lock Screen.", "registryDependencies": [ "https://ui.ballmac.com/r/lock-screen.json", "https://ui.ballmac.com/r/phone-frame.json" ], "dependencies": [ "lucide-react" ], "files": [ { "path": "registry/examples/lock-screen-ios.tsx", "type": "registry:example", "target": "@components/ballmac/examples/lock-screen-ios.tsx" } ], "categories": [ "macos" ], "meta": { "example": true, "of": "lock-screen", "tier": "free" } }, { "name": "log-stream", "type": "registry:ui", "title": "Log Stream", "description": "A live log viewer with level filters and counts, search with highlighted matches, wrap, pause with a new-lines counter, follow-the-tail scrolling and copy.", "author": "Ballmac ", "dependencies": [ "lucide-react" ], "registryDependencies": [ "utils", "https://ui.ballmac.com/r/copy-button.json", "https://ui.ballmac.com/r/i18n.json" ], "files": [ { "path": "registry/ballmac/components/log-stream.tsx", "type": "registry:ui", "target": "@components/ballmac/log-stream.tsx" } ], "categories": [ "developer" ], "meta": { "schema": 1, "tier": "free", "tags": [ "logs", "stream", "console", "debug", "tail" ], "version": "1.0.0", "updated": "2026-10-01", "ai": { "summary": "lines is [{ id, time, level, message, source? }], oldest first; append as lines arrive. Follows the tail while you are at the bottom, shows 'N new lines' when paused or scrolled up. maxLines limits what is rendered.", "whenToUse": [ "Deploy, build and server logs", "Streaming output from background jobs" ], "whenNotToUse": [ "A terminal with input (terminal)", "Millions of lines (use a virtualized list)" ], "composesWith": [ "terminal", "status-dot", "copy-button" ], "a11y": [ { "keys": "Tab", "action": "Reaches filters, search, wrap, pause, copy, then the scrollable log (role=log)" }, { "keys": "Screen readers", "action": "The log is not announced line by line; pause state is announced; levels are words" }, { "keys": "Color", "action": "Level is a word and a bar" } ], "customization": [ "maxLines", "follow", "height", "wrap", "hideSource", "onClear" ] }, "examples": [ "log-stream-demo", "log-stream-static" ], "url": "https://ui.ballmac.com/components/log-stream" } }, { "name": "log-stream-demo", "type": "registry:example", "title": "Log Stream: Live deploy logs", "description": "Live deploy logs example of Log Stream.", "registryDependencies": [ "https://ui.ballmac.com/r/log-stream.json" ], "files": [ { "path": "registry/examples/log-stream-demo.tsx", "type": "registry:example", "target": "@components/ballmac/examples/log-stream-demo.tsx" } ], "categories": [ "developer" ], "meta": { "example": true, "of": "log-stream", "tier": "free" } }, { "name": "log-stream-static", "type": "registry:example", "title": "Log Stream: Filtered build output", "description": "Filtered build output example of Log Stream.", "registryDependencies": [ "https://ui.ballmac.com/r/log-stream.json" ], "files": [ { "path": "registry/examples/log-stream-static.tsx", "type": "registry:example", "target": "@components/ballmac/examples/log-stream-static.tsx" } ], "categories": [ "developer" ], "meta": { "example": true, "of": "log-stream", "tier": "free" } }, { "name": "mac-context-menu", "type": "registry:ui", "title": "Mac Context Menu", "description": "A right-click menu styled like macOS: frosted panel, accent-color highlight, key equivalents, checkmarks, submenus and a red destructive item, on Radix for full keyboard support.", "author": "Ballmac ", "dependencies": [ "radix-ui", "lucide-react" ], "registryDependencies": [ "utils" ], "files": [ { "path": "registry/ballmac/components/mac-context-menu.tsx", "type": "registry:ui", "target": "@components/ballmac/mac-context-menu.tsx" } ], "categories": [ "macos" ], "meta": { "schema": 1, "tier": "free", "tags": [ "context menu", "macos", "right click", "menu", "shortcuts" ], "version": "1.0.0", "updated": "2026-10-01", "ai": { "summary": "Compose with MacContextMenuItem (icon, shortcut, destructive), CheckboxItem, RadioGroup/RadioItem, Label, Separator and Sub parts. Shift+F10 and long-press also open it.", "whenToUse": [ "Desktop-like apps and file managers", "Anywhere you want the macOS look" ], "whenNotToUse": [ "Standard product UI (context-menu)", "Click-opened menus (dropdown-menu)" ], "composesWith": [ "finder-window", "desktop-icons", "context-menu" ], "a11y": [ { "keys": "Shift+F10 / ContextMenu key", "action": "Opens the menu on the focused trigger" }, { "keys": "ArrowUp / ArrowDown", "action": "Moves through items; ArrowRight opens a submenu" }, { "keys": "Escape", "action": "Closes" } ], "customization": [ "shortcut and icon per item", "destructive", "accent via --mac-accent" ] }, "examples": [ "mac-context-menu-demo", "mac-context-menu-view" ], "url": "https://ui.ballmac.com/components/mac-context-menu" } }, { "name": "mac-context-menu-demo", "type": "registry:example", "title": "Mac Context Menu: File menu with submenu", "description": "File menu with submenu example of Mac Context Menu.", "registryDependencies": [ "https://ui.ballmac.com/r/mac-context-menu.json", "https://ui.ballmac.com/r/mac-icons.json" ], "dependencies": [ "lucide-react" ], "files": [ { "path": "registry/examples/mac-context-menu-demo.tsx", "type": "registry:example", "target": "@components/ballmac/examples/mac-context-menu-demo.tsx" } ], "categories": [ "macos" ], "meta": { "example": true, "of": "mac-context-menu", "tier": "free" } }, { "name": "mac-context-menu-view", "type": "registry:example", "title": "Mac Context Menu: Checkmarks and radio items", "description": "Checkmarks and radio items example of Mac Context Menu.", "registryDependencies": [ "https://ui.ballmac.com/r/mac-context-menu.json" ], "files": [ { "path": "registry/examples/mac-context-menu-view.tsx", "type": "registry:example", "target": "@components/ballmac/examples/mac-context-menu-view.tsx" } ], "categories": [ "macos" ], "meta": { "example": true, "of": "mac-context-menu", "tier": "free" } }, { "name": "mac-icons", "type": "registry:ui", "title": "Mac Icons", "description": "Resolution-independent macOS-style icons drawn in SVG and CSS: folders, documents with extension badges, drives and gradient app icons in eight theme-aware colors.", "author": "Ballmac ", "registryDependencies": [ "utils" ], "files": [ { "path": "registry/ballmac/components/mac-icons.tsx", "type": "registry:ui", "target": "@components/ballmac/mac-icons.tsx" } ], "categories": [ "macos" ], "meta": { "schema": 1, "tier": "free", "tags": [ "icons", "folder", "file", "app icon", "macos" ], "version": "1.0.0", "updated": "2026-10-01", "ai": { "summary": ", , , {glyph}. tone is blue | teal | green | amber | orange | red | purple | graphite. All are decorative (aria-hidden): put the name in text next to them.", "whenToUse": [ "Desktop, Finder and Launchpad recreations", "File lists that want recognisable macOS icons" ], "whenNotToUse": [ "Small UI glyphs (use lucide-react icons)" ], "composesWith": [ "finder-window", "desktop-icons", "launchpad", "dock" ], "a11y": [ { "keys": "Screen readers", "action": "Icons are aria-hidden; always label the item with text" } ], "customization": [ "size", "tone", "FileIcon label", "AppIcon glyph" ] }, "examples": [ "mac-icons-demo", "mac-icons-tones" ], "url": "https://ui.ballmac.com/components/mac-icons" } }, { "name": "mac-icons-demo", "type": "registry:example", "title": "Mac Icons: The four icon kinds", "description": "The four icon kinds example of Mac Icons.", "registryDependencies": [ "https://ui.ballmac.com/r/mac-icons.json" ], "dependencies": [ "lucide-react" ], "files": [ { "path": "registry/examples/mac-icons-demo.tsx", "type": "registry:example", "target": "@components/ballmac/examples/mac-icons-demo.tsx" } ], "categories": [ "macos" ], "meta": { "example": true, "of": "mac-icons", "tier": "free" } }, { "name": "mac-icons-tones", "type": "registry:example", "title": "Mac Icons: Colors and sizes", "description": "Colors and sizes example of Mac Icons.", "registryDependencies": [ "https://ui.ballmac.com/r/mac-icons.json" ], "files": [ { "path": "registry/examples/mac-icons-tones.tsx", "type": "registry:example", "target": "@components/ballmac/examples/mac-icons-tones.tsx" } ], "categories": [ "macos" ], "meta": { "example": true, "of": "mac-icons", "tier": "free" } }, { "name": "mac-window", "type": "registry:ui", "title": "Mac Window", "description": "macOS window chrome: traffic lights whose glyphs appear on hover, a centered title or unified toolbar, an optional translucent sidebar with vibrancy, and active and inactive appearances.", "author": "Ballmac ", "registryDependencies": [ "utils", "https://ui.ballmac.com/r/i18n.json" ], "files": [ { "path": "registry/ballmac/components/mac-window.tsx", "type": "registry:ui", "target": "@components/ballmac/mac-window.tsx" } ], "categories": [ "macos" ], "meta": { "schema": 1, "tier": "free", "tags": [ "window", "macos", "traffic lights", "chrome", "mockup", "sidebar", "frame" ], "version": "1.0.0", "updated": "2026-09-29", "ai": { "summary": "Frame content as a Mac app window. Simple: …. Sidebar layout: rows…toolbar buttons. Size the window with className.", "whenToUse": [ "Product screenshots and mockups of a Mac app on a landing page", "Framing a code sample, terminal session or settings panel so it reads as desktop software", "Interactive app demos where the sidebar and toolbar actually work" ], "whenNotToUse": [ "Modal dialogs in a web app (use dialog)", "Browser mockups; this draws native window chrome, not an address bar" ], "composesWith": [ "dock", "menu-bar", "segmented-control" ], "a11y": [ { "keys": "Tab", "action": "Reaches the traffic lights only when onClose, onMinimize or onZoom handlers are set, then toolbar and sidebar buttons" }, { "keys": "Enter / Space", "action": "Activates the focused traffic light or button" } ], "customization": [ "active: false grays the lights and title like a background window", "onClose / onMinimize / onZoom: make the lights real buttons with aria-labels (labels prop on MacWindowControls)", "--mac-close, --mac-minimize, --mac-zoom: traffic-light colors (CSS variables on the window)", "MacWindowTitleBar: title, controls, children become a trailing toolbar (use MacWindowToolbarButton)", "MacWindowSidebar: translucent, blurs what's behind the window; MacWindowSidebarItem for rows (selected sets aria-current)" ] }, "examples": [ "mac-window-demo", "mac-window-stack" ], "url": "https://ui.ballmac.com/components/mac-window" } }, { "name": "mac-window-demo", "type": "registry:example", "title": "Mac Window: Notes app", "description": "Notes app example of Mac Window.", "registryDependencies": [ "https://ui.ballmac.com/r/mac-window.json" ], "dependencies": [ "lucide-react" ], "files": [ { "path": "registry/examples/mac-window-demo.tsx", "type": "registry:example", "target": "@components/ballmac/examples/mac-window-demo.tsx" } ], "categories": [ "macos" ], "meta": { "example": true, "of": "mac-window", "tier": "free" } }, { "name": "mac-window-stack", "type": "registry:example", "title": "Mac Window: Active and inactive", "description": "Active and inactive example of Mac Window.", "registryDependencies": [ "https://ui.ballmac.com/r/mac-window.json" ], "files": [ { "path": "registry/examples/mac-window-stack.tsx", "type": "registry:example", "target": "@components/ballmac/examples/mac-window-stack.tsx" } ], "categories": [ "macos" ], "meta": { "example": true, "of": "mac-window", "tier": "free" } }, { "name": "magic-card", "type": "registry:ui", "title": "Magic Card", "description": "A card with a two-color light that follows the pointer along its border, with an optional soft glow inside, driven by CSS variables so moving never re-renders, and a steady light on keyboard focus.", "author": "Ballmac ", "dependencies": [ "motion@^12" ], "registryDependencies": [ "utils" ], "files": [ { "path": "registry/ballmac/components/magic-card.tsx", "type": "registry:ui", "target": "@components/ballmac/magic-card.tsx" } ], "categories": [ "motion" ], "meta": { "schema": 1, "tier": "free", "tags": [ "card", "hover", "gradient", "border", "pointer" ], "version": "1.0.0", "updated": "2026-10-01", "ai": { "summary": "content. from and to are chart tokens. Use spotlight-card for a single soft glow and this for a colored border light.", "whenToUse": [ "Feature and pricing cards on dark or light pages", "Any card grid that should feel responsive to the pointer" ], "whenNotToUse": [ "Dense data UI", "Cards that are not interactive" ], "composesWith": [ "spotlight-card", "tilt-card", "bento-grid" ], "a11y": [ { "keys": "Focus", "action": "A centered light shows when anything inside has focus" }, { "keys": "Reduced motion", "action": "No pointer tracking; a plain border remains" } ], "customization": [ "from and to tones", "size", "glow", "contentClassName" ] }, "examples": [ "magic-card-demo", "magic-card-colors" ], "url": "https://ui.ballmac.com/components/magic-card" } }, { "name": "magic-card-demo", "type": "registry:example", "title": "Magic Card: Feature grid", "description": "Feature grid example of Magic Card.", "registryDependencies": [ "https://ui.ballmac.com/r/magic-card.json" ], "dependencies": [ "lucide-react" ], "files": [ { "path": "registry/examples/magic-card-demo.tsx", "type": "registry:example", "target": "@components/ballmac/examples/magic-card-demo.tsx" } ], "categories": [ "motion" ], "meta": { "example": true, "of": "magic-card", "tier": "free" } }, { "name": "magic-card-colors", "type": "registry:example", "title": "Magic Card: Color pairs", "description": "Color pairs example of Magic Card.", "registryDependencies": [ "https://ui.ballmac.com/r/magic-card.json" ], "files": [ { "path": "registry/examples/magic-card-colors.tsx", "type": "registry:example", "target": "@components/ballmac/examples/magic-card-colors.tsx" } ], "categories": [ "motion" ], "meta": { "example": true, "of": "magic-card", "tier": "free" } }, { "name": "magnetic-button", "type": "registry:ui", "title": "Magnetic Button", "description": "The Ballmac Button with a magnetic pull: it drifts toward a nearby mouse pointer on a spring, and its label moves a little further for depth. Takes every Button prop.", "author": "Ballmac ", "dependencies": [ "motion@^12" ], "registryDependencies": [ "utils", "https://ui.ballmac.com/r/button.json", "https://ui.ballmac.com/r/motion-presets.json" ], "files": [ { "path": "registry/ballmac/components/magnetic-button.tsx", "type": "registry:ui", "target": "@components/ballmac/magnetic-button.tsx" } ], "categories": [ "motion" ], "meta": { "schema": 1, "tier": "free", "tags": [ "button", "cta", "hover", "spring", "pointer", "motion" ], "version": "1.0.0", "updated": "2026-09-28", "ai": { "summary": "Use like Button (variant, size, shape, loading, onClick…). The pull only reacts to a mouse, stops while disabled or loading, and is off under reduced motion, where it is a plain Button.", "whenToUse": [ "The single primary call to action in a hero or pricing section", "A playful secondary action on a marketing page" ], "whenNotToUse": [ "Forms, toolbars and dense UI (use button)", "Several buttons side by side; one magnetic button per view keeps it meaningful", "Rendering a link (not supported; use an
with buttonVariants instead)" ], "composesWith": [ "button", "border-beam" ], "a11y": [ { "keys": "Enter / Space", "action": "Activates the button" }, { "keys": "Tab", "action": "Moves focus to the button" } ], "customization": [ "strength: fraction of the pointer offset the button follows (default 0.2)", "radius: px outside the button where the pull starts, fading to zero at the edge (default 72)", "All Button props: variant, size, shape, loading; wrapperClassName styles the layout wrapper" ] }, "examples": [ "magnetic-button-demo" ], "url": "https://ui.ballmac.com/components/magnetic-button" } }, { "name": "magnetic-button-demo", "type": "registry:example", "title": "Magnetic Button: Default", "description": "Default example of Magnetic Button.", "registryDependencies": [ "https://ui.ballmac.com/r/magnetic-button.json" ], "dependencies": [ "lucide-react" ], "files": [ { "path": "registry/examples/magnetic-button-demo.tsx", "type": "registry:example", "target": "@components/ballmac/examples/magnetic-button-demo.tsx" } ], "categories": [ "motion" ], "meta": { "example": true, "of": "magnetic-button", "tier": "free" } }, { "name": "marquee", "type": "registry:ui", "title": "Marquee", "description": "An endless horizontal or vertical scroller for logo rows and testimonials. Speed is in pixels per second, it pauses on hover and focus, and it fills any width.", "author": "Ballmac ", "dependencies": [ "motion@^12" ], "registryDependencies": [ "utils" ], "files": [ { "path": "registry/ballmac/components/marquee.tsx", "type": "registry:ui", "target": "@components/ballmac/marquee.tsx" } ], "categories": [ "motion" ], "meta": { "schema": 1, "tier": "free", "tags": [ "animation", "scroller", "logos", "testimonials", "ticker", "motion" ], "version": "1.0.0", "updated": "2026-09-28", "ai": { "summary": "Put the items directly inside ; it measures one copy, clones as many as the viewport needs (clones are aria-hidden and inert) and loops them with a GPU transform. Under reduced motion it renders a single copy in a scrollable row.", "whenToUse": [ "A row of customer or partner logos under a hero", "A wall of short testimonials (vertical, several columns side by side)", "A ticker of changelog items, integrations or stats" ], "whenNotToUse": [ "Content people must read or act on in full (use a grid or carousel with controls)", "Critical navigation or calls to action" ], "composesWith": [ "spotlight-card", "badge", "avatar" ], "a11y": [ { "keys": "Tab", "action": "Moves focus into the first copy of the content and pauses the scroll" } ], "customization": [ "speed in px/s (default 40); reverse; vertical (set a height with className, e.g. h-80)", "gap as px number or CSS length (default 16)", "fade toggles the edge mask; pauseOnHover (default true)", "Style parts with [data-slot=marquee-track] and [data-slot=marquee-content]" ] }, "examples": [ "marquee-demo", "marquee-vertical" ], "url": "https://ui.ballmac.com/components/marquee" } }, { "name": "marquee-demo", "type": "registry:example", "title": "Marquee: Logo row", "description": "Logo row example of Marquee.", "registryDependencies": [ "https://ui.ballmac.com/r/marquee.json" ], "files": [ { "path": "registry/examples/marquee-demo.tsx", "type": "registry:example", "target": "@components/ballmac/examples/marquee-demo.tsx" } ], "categories": [ "motion" ], "meta": { "example": true, "of": "marquee", "tier": "free" } }, { "name": "marquee-vertical", "type": "registry:example", "title": "Marquee: Vertical testimonials", "description": "Vertical testimonials example of Marquee.", "registryDependencies": [ "https://ui.ballmac.com/r/marquee.json" ], "files": [ { "path": "registry/examples/marquee-vertical.tsx", "type": "registry:example", "target": "@components/ballmac/examples/marquee-vertical.tsx" } ], "categories": [ "motion" ], "meta": { "example": true, "of": "marquee", "tier": "free" } }, { "name": "masonry-grid", "type": "registry:ui", "title": "Masonry Grid", "description": "A gap-free multi-column layout for tiles of different heights, built on CSS columns so it never shifts on load, with responsive column counts and optional reveal.", "author": "Ballmac ", "dependencies": [ "motion@^12" ], "registryDependencies": [ "utils", "https://ui.ballmac.com/r/motion-presets.json" ], "files": [ { "path": "registry/ballmac/components/masonry-grid.tsx", "type": "registry:ui", "target": "@components/ballmac/masonry-grid.tsx" } ], "categories": [ "layout" ], "meta": { "schema": 1, "tier": "free", "tags": [ "masonry", "grid", "gallery", "columns" ], "version": "1.0.0", "updated": "2026-09-30", "ai": { "summary": "…. DOM order is reading order: down the first column, then the next.", "whenToUse": [ "Galleries, portfolios and boards", "Testimonials or notes of uneven length" ], "whenNotToUse": [ "Rows that must line up across columns; use CSS grid", "Sortable boards; use kanban-board" ], "composesWith": [ "card", "bento-grid" ], "a11y": [ { "keys": "Tab order", "action": "Follows DOM order, which matches the visual column flow" }, { "keys": "Reduced motion", "action": "Reveal animation is skipped" } ], "customization": [ "columns number or per breakpoint", "gap: sm | md | lg", "reveal" ] }, "examples": [ "masonry-grid-demo", "masonry-grid-states" ], "url": "https://ui.ballmac.com/components/masonry-grid" } }, { "name": "masonry-grid-demo", "type": "registry:example", "title": "Masonry Grid: Gallery", "description": "Gallery example of Masonry Grid.", "registryDependencies": [ "https://ui.ballmac.com/r/masonry-grid.json" ], "files": [ { "path": "registry/examples/masonry-grid-demo.tsx", "type": "registry:example", "target": "@components/ballmac/examples/masonry-grid-demo.tsx" } ], "categories": [ "layout" ], "meta": { "example": true, "of": "masonry-grid", "tier": "free" } }, { "name": "masonry-grid-states", "type": "registry:example", "title": "Masonry Grid: Notes", "description": "Notes example of Masonry Grid.", "registryDependencies": [ "https://ui.ballmac.com/r/masonry-grid.json" ], "files": [ { "path": "registry/examples/masonry-grid-states.tsx", "type": "registry:example", "target": "@components/ballmac/examples/masonry-grid-states.tsx" } ], "categories": [ "layout" ], "meta": { "example": true, "of": "masonry-grid", "tier": "free" } }, { "name": "media", "type": "registry:ui", "title": "Media", "description": "A picture slot: reserves the space, lazy-loads, takes a URL, an image with required alt text and a dark-mode file, or your own element, and falls back to artwork if there is no image or it fails.", "author": "Ballmac ", "registryDependencies": [ "utils" ], "files": [ { "path": "registry/ballmac/components/media.tsx", "type": "registry:ui", "target": "@components/ballmac/media.tsx" } ], "categories": [ "primitives" ], "meta": { "schema": 1, "tier": "free", "tags": [ "image", "picture", "slot", "screenshot", "photo", "alt text", "aspect ratio", "dark mode" ], "version": "1.0.0", "updated": "2026-10-02", "ai": { "summary": "Pass media as a URL (with alt), an object { src, alt, srcDark? }, or any element such as a next/image. aspect reserves the box (video, photo, square, wide, portrait or '3/2'); fit is cover | contain | fill; priority loads an above-the-fold image eagerly. fallback shows when there is no media or the file fails.", "whenToUse": [ "Any place a product screenshot, photo, cover or avatar goes", "Blocks and templates that ship with generated artwork but should accept the buyer's own image" ], "whenNotToUse": [ "Icons (use an icon component)", "Animated or interactive content that is not an image: pass it as an element" ], "composesWith": [ "hero-1", "features-5", "blog-1" ], "a11y": [ { "keys": "Screen readers", "action": "Informative images need alt text; alt=\"\" marks decoration. A URL without alt logs a warning in development" }, { "keys": "Layout", "action": "A fixed aspect ratio reserves the space, so nothing jumps when the file arrives" } ], "customization": [ "aspect, fit and priority", "srcDark for a dark-mode file", "position for object-position", "fallback for the artwork shown with no image", "onImageError" ] }, "examples": [ "media-demo", "media-dark" ], "url": "https://ui.ballmac.com/components/media" } }, { "name": "media-demo", "type": "registry:example", "title": "Media: Image, element and fallback", "description": "Image, element and fallback example of Media.", "registryDependencies": [ "https://ui.ballmac.com/r/media.json" ], "files": [ { "path": "registry/examples/media-demo.tsx", "type": "registry:example", "target": "@components/ballmac/examples/media-demo.tsx" } ], "categories": [ "primitives" ], "meta": { "example": true, "of": "media", "tier": "free" } }, { "name": "media-dark", "type": "registry:example", "title": "Media: A different file in dark mode", "description": "A different file in dark mode example of Media.", "registryDependencies": [ "https://ui.ballmac.com/r/media.json" ], "files": [ { "path": "registry/examples/media-dark.tsx", "type": "registry:example", "target": "@components/ballmac/examples/media-dark.tsx" } ], "categories": [ "primitives" ], "meta": { "example": true, "of": "media", "tier": "free" } }, { "name": "mega-menu", "type": "registry:ui", "title": "Mega Menu", "description": "A data-driven header menu with wide panels of grouped, described links, an optional featured card, and an accordion list for small screens.", "author": "Ballmac ", "dependencies": [ "lucide-react" ], "registryDependencies": [ "utils", "https://ui.ballmac.com/r/navigation-menu.json", "https://ui.ballmac.com/r/i18n.json" ], "files": [ { "path": "registry/ballmac/components/mega-menu.tsx", "type": "registry:ui", "target": "@components/ballmac/mega-menu.tsx" } ], "categories": [ "navigation" ], "meta": { "schema": 1, "tier": "free", "tags": [ "navigation", "dropdown", "header", "radix" ], "version": "1.0.0", "updated": "2026-09-30", "ai": { "summary": "Pass items: a plain link ({label, href}) or a panel ({label, columns, featured}). MegaMenuMobileList renders the same data for the mobile menu.", "whenToUse": [ "Sites with many products or solutions", "Headers that need descriptions beside links" ], "whenNotToUse": [ "A handful of plain links; use navbar", "Application commands; use menubar" ], "composesWith": [ "navbar", "navigation-menu" ], "a11y": [ { "keys": "Enter / Space / ArrowDown", "action": "Opens the focused panel" }, { "keys": "ArrowLeft / ArrowRight", "action": "Moves between top-level items" }, { "keys": "Tab", "action": "Enters the panel links" }, { "keys": "Escape", "action": "Closes the panel" } ], "customization": [ "columns with titles", "featured card with media and cta", "badge on links", "viewportAlign start | center" ] }, "examples": [ "mega-menu-demo", "mega-menu-states" ], "url": "https://ui.ballmac.com/components/mega-menu" } }, { "name": "mega-menu-demo", "type": "registry:example", "title": "Mega Menu: Product menu", "description": "Product menu example of Mega Menu.", "registryDependencies": [ "https://ui.ballmac.com/r/mega-menu.json" ], "dependencies": [ "lucide-react" ], "files": [ { "path": "registry/examples/mega-menu-demo.tsx", "type": "registry:example", "target": "@components/ballmac/examples/mega-menu-demo.tsx" } ], "categories": [ "navigation" ], "meta": { "example": true, "of": "mega-menu", "tier": "free" } }, { "name": "mega-menu-states", "type": "registry:example", "title": "Mega Menu: Mobile list", "description": "Mobile list example of Mega Menu.", "registryDependencies": [ "https://ui.ballmac.com/r/mega-menu.json" ], "files": [ { "path": "registry/examples/mega-menu-states.tsx", "type": "registry:example", "target": "@components/ballmac/examples/mega-menu-states.tsx" } ], "categories": [ "navigation" ], "meta": { "example": true, "of": "mega-menu", "tier": "free" } }, { "name": "menu-bar", "type": "registry:ui", "title": "Menu Bar", "description": "A translucent macOS menu bar on Radix Menubar: a bold app menu, menus with key equivalents, submenus and checkmarks, a status area with icon buttons and a hydration-safe live clock.", "author": "Ballmac ", "dependencies": [ "radix-ui", "lucide-react" ], "registryDependencies": [ "utils" ], "files": [ { "path": "registry/ballmac/components/menu-bar.tsx", "type": "registry:ui", "target": "@components/ballmac/menu-bar.tsx" } ], "categories": [ "macos" ], "meta": { "schema": 1, "tier": "free", "tags": [ "menubar", "menu", "macos", "navigation", "keyboard shortcuts", "clock", "status bar" ], "version": "1.0.0", "updated": "2026-09-29", "ai": { "summary": " holds items (Radix Menubar parts with Mac styling) followed by with icon buttons and . Use variant=\"app\" on the app-name trigger and for key equivalents.", "whenToUse": [ "A Mac desktop mockup or product hero where the app's menus should really open", "A web app that wants desktop-style menus with keyboard navigation (File, Edit, View)", "Status bars that pair a few icon buttons with a clock" ], "whenNotToUse": [ "Site navigation for a marketing page (use a header with links)", "A single action menu on a button (use a dropdown menu)" ], "composesWith": [ "mac-window", "dock", "dynamic-island" ], "a11y": [ { "keys": "Tab", "action": "Focuses the menu bar (one stop), then the status buttons" }, { "keys": "ArrowLeft / ArrowRight", "action": "Moves between menus, also while one is open" }, { "keys": "Enter / Space / ArrowDown", "action": "Opens the focused menu" }, { "keys": "ArrowUp / ArrowDown, typeahead", "action": "Moves between items" }, { "keys": "Escape", "action": "Closes the menu and returns focus to its trigger" } ], "customization": [ "MenuBarTrigger variant: default | app (bold)", "MenuBarContent / MenuBarSubContent portal: false keeps menus inside a mockup container", "MenuBarItem inset and variant=\"destructive\"; highlighted items use the --ring color like the macOS accent", "MenuBarClock: locale (default en-US), format (Intl options), value for a fixed time" ] }, "examples": [ "menu-bar-demo" ], "url": "https://ui.ballmac.com/components/menu-bar" } }, { "name": "menu-bar-demo", "type": "registry:example", "title": "Menu Bar: Desktop menu bar", "description": "Desktop menu bar example of Menu Bar.", "registryDependencies": [ "https://ui.ballmac.com/r/menu-bar.json" ], "dependencies": [ "lucide-react" ], "files": [ { "path": "registry/examples/menu-bar-demo.tsx", "type": "registry:example", "target": "@components/ballmac/examples/menu-bar-demo.tsx" } ], "categories": [ "macos" ], "meta": { "example": true, "of": "menu-bar", "tier": "free" } }, { "name": "menubar", "type": "registry:ui", "title": "Menubar", "description": "A horizontal application menu bar with roving focus across menus, submenus, shortcuts, checkbox and radio items, built on Radix.", "author": "Ballmac ", "dependencies": [ "radix-ui", "lucide-react" ], "registryDependencies": [ "utils", "https://ui.ballmac.com/r/direction.json" ], "files": [ { "path": "registry/ballmac/components/menubar.tsx", "type": "registry:ui", "target": "@components/ballmac/menubar.tsx" } ], "categories": [ "navigation" ], "meta": { "schema": 1, "tier": "free", "tags": [ "menu", "application", "desktop", "radix" ], "version": "1.0.0", "updated": "2026-09-30", "ai": { "summary": "A File / Edit / View style bar. Left and Right move between menus, Down opens one, and hovering across open menus switches them.", "whenToUse": [ "Editors, dashboards and tools with many commands", "Desktop-style web apps" ], "whenNotToUse": [ "Website navigation with links; use navigation-menu", "The macOS system menu bar mockup; use menu-bar" ], "composesWith": [ "kbd", "dropdown-menu" ], "a11y": [ { "keys": "ArrowLeft / ArrowRight", "action": "Moves focus between menu triggers" }, { "keys": "ArrowDown / Enter / Space", "action": "Opens the focused menu" }, { "keys": "ArrowUp / ArrowDown", "action": "Moves within a menu" }, { "keys": "Escape", "action": "Closes the menu and returns to the bar" } ], "customization": [ "value on each menu for a default open menu", "shortcut hints", "checkbox and radio items" ] }, "source": { "name": "shadcn/ui Menubar", "url": "https://github.com/shadcn-ui/ui", "license": "MIT", "copyright": "Copyright (c) 2023 shadcn", "modified": true }, "examples": [ "menubar-demo", "menubar-states" ], "url": "https://ui.ballmac.com/components/menubar" } }, { "name": "menubar-demo", "type": "registry:example", "title": "Menubar: Editor menu", "description": "Editor menu example of Menubar.", "registryDependencies": [ "https://ui.ballmac.com/r/menubar.json" ], "files": [ { "path": "registry/examples/menubar-demo.tsx", "type": "registry:example", "target": "@components/ballmac/examples/menubar-demo.tsx" } ], "categories": [ "navigation" ], "meta": { "example": true, "of": "menubar", "tier": "free" } }, { "name": "menubar-states", "type": "registry:example", "title": "Menubar: Preferences", "description": "Preferences example of Menubar.", "registryDependencies": [ "https://ui.ballmac.com/r/menubar.json" ], "files": [ { "path": "registry/examples/menubar-states.tsx", "type": "registry:example", "target": "@components/ballmac/examples/menubar-states.tsx" } ], "categories": [ "navigation" ], "meta": { "example": true, "of": "menubar", "tier": "free" } }, { "name": "meteors", "type": "registry:ui", "title": "Meteors", "description": "Thin meteors with glowing heads and fading tails streak across a container at a set angle. Randomized after mount (hydration-safe), paused off-screen, hidden under reduced motion.", "author": "Ballmac ", "registryDependencies": [ "utils" ], "files": [ { "path": "registry/ballmac/components/meteors.tsx", "type": "registry:ui", "target": "@components/ballmac/meteors.tsx" } ], "categories": [ "backgrounds" ], "meta": { "schema": 1, "tier": "free", "tags": [ "meteors", "shooting stars", "background", "card", "decorative" ], "version": "1.0.0", "updated": "2026-09-29", "ai": { "summary": "Put inside a relative, overflow-hidden card or section (it is absolute inset-0, aria-hidden, pointer-events-none) and lift content with relative z-10. Meteor positions are generated on the client after mount, so the server renders an empty layer.", "whenToUse": [ "A launch, release or milestone card that should feel special", "Dark hero sections or CTA panels that need a hint of motion" ], "whenNotToUse": [ "Dense UI or data tables", "Communicating anything; it is decorative and hidden under reduced motion" ], "composesWith": [ "spotlight-card", "badge", "button" ], "a11y": [], "customization": [ "count (default 14), angle in degrees (default 135, down-left)", "duration: [min, max] seconds per crossing; tail: [min, max] px", "color: any CSS color, default 70% --foreground; try var(--chart-1)" ] }, "examples": [ "meteors-demo", "meteors-colored" ], "url": "https://ui.ballmac.com/components/meteors" } }, { "name": "meteors-demo", "type": "registry:example", "title": "Meteors: Release card", "description": "Release card example of Meteors.", "registryDependencies": [ "https://ui.ballmac.com/r/meteors.json" ], "dependencies": [ "lucide-react" ], "files": [ { "path": "registry/examples/meteors-demo.tsx", "type": "registry:example", "target": "@components/ballmac/examples/meteors-demo.tsx" } ], "categories": [ "backgrounds" ], "meta": { "example": true, "of": "meteors", "tier": "free" } }, { "name": "meteors-colored", "type": "registry:example", "title": "Meteors: Steep, colored", "description": "Steep, colored example of Meteors.", "registryDependencies": [ "https://ui.ballmac.com/r/meteors.json" ], "files": [ { "path": "registry/examples/meteors-colored.tsx", "type": "registry:example", "target": "@components/ballmac/examples/meteors-colored.tsx" } ], "categories": [ "backgrounds" ], "meta": { "example": true, "of": "meteors", "tier": "free" } }, { "name": "model-picker", "type": "registry:ui", "title": "Model Picker", "description": "A searchable model selector grouped by provider, with capability icons, locked plans and a detail pane that follows the highlighted model with context window, cost and abilities.", "author": "Ballmac ", "dependencies": [ "lucide-react" ], "registryDependencies": [ "utils", "https://ui.ballmac.com/r/popover.json", "https://ui.ballmac.com/r/command.json", "https://ui.ballmac.com/r/i18n.json" ], "files": [ { "path": "registry/ballmac/components/model-picker.tsx", "type": "registry:ui", "target": "@components/ballmac/model-picker.tsx" } ], "categories": [ "ai" ], "meta": { "schema": 1, "tier": "free", "tags": [ "ai", "model", "select", "combobox", "llm", "picker" ], "version": "1.0.0", "updated": "2026-09-30", "ai": { "summary": "models is an array of { id, name, provider?, description?, capabilities?, contextWindow?, cost?, isNew?, locked? }. value/onValueChange or defaultValue. Locked models call onLockedSelect. variant default | compact.", "whenToUse": [ "Choosing the model for a chat or an agent", "Any picker where options have facts worth comparing" ], "whenNotToUse": [ "A plain short list of choices; use select", "Settings with many fields; use settings-panel" ], "composesWith": [ "prompt-input", "ai-chat", "token-meter" ], "a11y": [ { "keys": "Enter / Space / ArrowDown", "action": "Opens the list from the trigger" }, { "keys": "ArrowUp / ArrowDown", "action": "Moves the highlight; the detail pane updates" }, { "keys": "Enter", "action": "Selects the model and returns focus to the trigger" }, { "keys": "Escape", "action": "Closes without changing" } ], "customization": [ "searchable", "showDetails", "variant", "align", "onLockedSelect", "lockedLabel per model" ] }, "examples": [ "model-picker-demo", "model-picker-compact" ], "url": "https://ui.ballmac.com/components/model-picker" } }, { "name": "model-picker-demo", "type": "registry:example", "title": "Model Picker: Grouped with details", "description": "Grouped with details example of Model Picker.", "registryDependencies": [ "https://ui.ballmac.com/r/model-picker.json" ], "files": [ { "path": "registry/examples/model-picker-demo.tsx", "type": "registry:example", "target": "@components/ballmac/examples/model-picker-demo.tsx" } ], "categories": [ "ai" ], "meta": { "example": true, "of": "model-picker", "tier": "free" } }, { "name": "model-picker-compact", "type": "registry:example", "title": "Model Picker: Compact in a composer", "description": "Compact in a composer example of Model Picker.", "registryDependencies": [ "https://ui.ballmac.com/r/model-picker.json" ], "dependencies": [ "lucide-react" ], "files": [ { "path": "registry/examples/model-picker-compact.tsx", "type": "registry:example", "target": "@components/ballmac/examples/model-picker-compact.tsx" } ], "categories": [ "ai" ], "meta": { "example": true, "of": "model-picker", "tier": "free" } }, { "name": "morphing-text", "type": "registry:ui", "title": "Morphing Text", "description": "Words melt into each other with a blur and threshold effect, cycling through a list, pausing when off screen, with a box that never jumps in width.", "author": "Ballmac ", "dependencies": [ "motion@^12" ], "registryDependencies": [ "utils" ], "files": [ { "path": "registry/ballmac/components/morphing-text.tsx", "type": "registry:ui", "target": "@components/ballmac/morphing-text.tsx" } ], "categories": [ "text" ], "meta": { "schema": 1, "tier": "free", "tags": [ "text", "morph", "gooey", "transition", "hero" ], "version": "1.0.0", "updated": "2026-10-01", "ai": { "summary": ". The size comes from className. Uses an SVG threshold filter; the loop stops when off screen or when reduced motion is on.", "whenToUse": [ "A hero word that changes between a few options", "Brand or product-name reveals" ], "whenNotToUse": [ "Small body text (the effect needs large type)", "Many words per frame" ], "composesWith": [ "word-rotate", "hyper-text", "text-animate" ], "a11y": [ { "keys": "Screen readers", "action": "All texts are read once as a list; the morph is hidden" }, { "keys": "Reduced motion", "action": "The first text is shown still" } ], "customization": [ "texts", "hold and morph in milliseconds", "font size and weight via className" ] }, "examples": [ "morphing-text-demo", "morphing-text-inline" ], "url": "https://ui.ballmac.com/components/morphing-text" } }, { "name": "morphing-text-demo", "type": "registry:example", "title": "Morphing Text: Big word cycle", "description": "Big word cycle example of Morphing Text.", "registryDependencies": [ "https://ui.ballmac.com/r/morphing-text.json" ], "files": [ { "path": "registry/examples/morphing-text-demo.tsx", "type": "registry:example", "target": "@components/ballmac/examples/morphing-text-demo.tsx" } ], "categories": [ "text" ], "meta": { "example": true, "of": "morphing-text", "tier": "free" } }, { "name": "morphing-text-inline", "type": "registry:example", "title": "Morphing Text: Inline in a sentence", "description": "Inline in a sentence example of Morphing Text.", "registryDependencies": [ "https://ui.ballmac.com/r/morphing-text.json" ], "files": [ { "path": "registry/examples/morphing-text-inline.tsx", "type": "registry:example", "target": "@components/ballmac/examples/morphing-text-inline.tsx" } ], "categories": [ "text" ], "meta": { "example": true, "of": "morphing-text", "tier": "free" } }, { "name": "multi-select", "type": "registry:ui", "title": "Multi Select", "description": "Search and select several options in a Radix popover with native checkboxes and a selection cap.", "author": "Ballmac ", "dependencies": [ "radix-ui", "lucide-react" ], "registryDependencies": [ "utils", "https://ui.ballmac.com/r/i18n.json" ], "files": [ { "path": "registry/ballmac/components/multi-select.tsx", "type": "registry:ui", "target": "@components/ballmac/multi-select.tsx" } ], "categories": [ "forms" ], "meta": { "schema": 1, "tier": "free", "tags": [ "multi-select", "filter", "checkbox" ], "version": "1.0.0", "updated": "2026-09-30", "ai": { "summary": "Search and select several options in a Radix popover with native checkboxes and a selection cap.", "whenToUse": [ "Choose multiple teammates or categories", "Filter a list by several states" ], "whenNotToUse": [ "Use select when only one option is allowed" ], "composesWith": [ "select" ], "a11y": [ { "keys": "Enter / Space", "action": "Opens the option popover" }, { "keys": "Tab / Space", "action": "Moves to and toggles native checkboxes" }, { "keys": "Escape", "action": "Closes the popover" } ], "customization": [ "options, maxSelected", "value / defaultValue and onValueChange" ] }, "examples": [ "multi-select-demo", "multi-select-states" ], "url": "https://ui.ballmac.com/components/multi-select" } }, { "name": "multi-select-demo", "type": "registry:example", "title": "Multi Select: Overview", "description": "Overview example of Multi Select.", "registryDependencies": [ "https://ui.ballmac.com/r/multi-select.json" ], "files": [ { "path": "registry/examples/multi-select-demo.tsx", "type": "registry:example", "target": "@components/ballmac/examples/multi-select-demo.tsx" } ], "categories": [ "forms" ], "meta": { "example": true, "of": "multi-select", "tier": "free" } }, { "name": "multi-select-states", "type": "registry:example", "title": "Multi Select: States and variants", "description": "States and variants example of Multi Select.", "registryDependencies": [ "https://ui.ballmac.com/r/multi-select.json" ], "files": [ { "path": "registry/examples/multi-select-states.tsx", "type": "registry:example", "target": "@components/ballmac/examples/multi-select-states.tsx" } ], "categories": [ "forms" ], "meta": { "example": true, "of": "multi-select", "tier": "free" } }, { "name": "navbar", "type": "registry:ui", "title": "Navbar", "description": "A responsive site header that gains a border and shadow on scroll, can hide while scrolling down, and turns its links into a sheet menu on small screens.", "author": "Ballmac ", "dependencies": [ "lucide-react" ], "registryDependencies": [ "utils", "https://ui.ballmac.com/r/sheet.json", "https://ui.ballmac.com/r/scroll.json", "https://ui.ballmac.com/r/i18n.json" ], "files": [ { "path": "registry/ballmac/components/navbar.tsx", "type": "registry:ui", "target": "@components/ballmac/navbar.tsx" } ], "categories": [ "navigation" ], "meta": { "schema": 1, "tier": "free", "tags": [ "header", "navigation", "sticky", "responsive" ], "version": "1.0.0", "updated": "2026-09-30", "ai": { "summary": "Compose Navbar with NavbarBrand, NavbarLinks/NavbarLink (active sets aria-current), NavbarActions and NavbarMobileMenu with NavbarMobileLink.", "whenToUse": [ "Marketing and docs site headers", "Headers that should get out of the way on long pages" ], "whenNotToUse": [ "Application chrome with a sidebar; use app-shell", "Wide dropdown panels; add mega-menu" ], "composesWith": [ "mega-menu", "button", "sheet" ], "a11y": [ { "keys": "Tab", "action": "Moves through brand, links, actions and the menu button" }, { "keys": "Enter / Space", "action": "Opens the mobile menu; Escape closes it and returns focus" }, { "keys": "Screen readers", "action": "Links are in a labelled navigation landmark; the current page has aria-current" } ], "customization": [ "sticky and hideOnScroll", "border: scrolled | always | never", "scrollContainer for headers inside panels", "mobile menu label" ] }, "examples": [ "navbar-demo", "navbar-states" ], "url": "https://ui.ballmac.com/components/navbar" } }, { "name": "navbar-demo", "type": "registry:example", "title": "Navbar: Marketing header", "description": "Marketing header example of Navbar.", "registryDependencies": [ "https://ui.ballmac.com/r/navbar.json", "https://ui.ballmac.com/r/button.json" ], "dependencies": [ "lucide-react" ], "files": [ { "path": "registry/examples/navbar-demo.tsx", "type": "registry:example", "target": "@components/ballmac/examples/navbar-demo.tsx" } ], "categories": [ "navigation" ], "meta": { "example": true, "of": "navbar", "tier": "free" } }, { "name": "navbar-states", "type": "registry:example", "title": "Navbar: Hide on scroll", "description": "Hide on scroll example of Navbar.", "registryDependencies": [ "https://ui.ballmac.com/r/navbar.json" ], "dependencies": [ "lucide-react" ], "files": [ { "path": "registry/examples/navbar-states.tsx", "type": "registry:example", "target": "@components/ballmac/examples/navbar-states.tsx" } ], "categories": [ "navigation" ], "meta": { "example": true, "of": "navbar", "tier": "free" } }, { "name": "navigation-menu", "type": "registry:ui", "title": "Navigation Menu", "description": "A site navigation bar with flyout panels sharing one animated viewport that resizes to its content, with keyboard and pointer intent handling, built on Radix.", "author": "Ballmac ", "dependencies": [ "radix-ui", "lucide-react", "class-variance-authority" ], "registryDependencies": [ "utils", "https://ui.ballmac.com/r/direction.json" ], "files": [ { "path": "registry/ballmac/components/navigation-menu.tsx", "type": "registry:ui", "target": "@components/ballmac/navigation-menu.tsx" } ], "categories": [ "navigation" ], "meta": { "schema": 1, "tier": "free", "tags": [ "navigation", "header", "mega menu", "radix" ], "version": "1.0.0", "updated": "2026-09-30", "ai": { "summary": "Top-level triggers open content panels of links. Use navigationMenuTriggerStyle for plain top-level links.", "whenToUse": [ "Marketing site headers", "Docs navigation with grouped links" ], "whenNotToUse": [ "An application command menu; use menubar", "A small overflow list; use dropdown-menu" ], "composesWith": [ "button", "separator" ], "a11y": [ { "keys": "Enter / Space / ArrowDown", "action": "Opens the focused panel" }, { "keys": "Tab", "action": "Moves into the panel links" }, { "keys": "ArrowLeft / ArrowRight", "action": "Moves between top-level items" }, { "keys": "Escape", "action": "Closes the panel" } ], "customization": [ "viewport: shared or per-item", "indicator arrow", "content width per panel" ] }, "source": { "name": "shadcn/ui Navigation Menu", "url": "https://github.com/shadcn-ui/ui", "license": "MIT", "copyright": "Copyright (c) 2023 shadcn", "modified": true }, "examples": [ "navigation-menu-demo", "navigation-menu-states" ], "url": "https://ui.ballmac.com/components/navigation-menu" } }, { "name": "navigation-menu-demo", "type": "registry:example", "title": "Navigation Menu: Product menu", "description": "Product menu example of Navigation Menu.", "registryDependencies": [ "https://ui.ballmac.com/r/navigation-menu.json" ], "dependencies": [ "lucide-react" ], "files": [ { "path": "registry/examples/navigation-menu-demo.tsx", "type": "registry:example", "target": "@components/ballmac/examples/navigation-menu-demo.tsx" } ], "categories": [ "navigation" ], "meta": { "example": true, "of": "navigation-menu", "tier": "free" } }, { "name": "navigation-menu-states", "type": "registry:example", "title": "Navigation Menu: Without viewport", "description": "Without viewport example of Navigation Menu.", "registryDependencies": [ "https://ui.ballmac.com/r/navigation-menu.json" ], "files": [ { "path": "registry/examples/navigation-menu-states.tsx", "type": "registry:example", "target": "@components/ballmac/examples/navigation-menu-states.tsx" } ], "categories": [ "navigation" ], "meta": { "example": true, "of": "navigation-menu", "tier": "free" } }, { "name": "neon-card", "type": "registry:ui", "title": "Neon Card", "description": "A card framed by a two-color neon border with a soft outer light and inner glow, tunable thickness, intensity and corner radius, with an optional warm-up flicker that never plays under reduced motion.", "author": "Ballmac ", "dependencies": [ "motion@^12" ], "registryDependencies": [ "utils" ], "files": [ { "path": "registry/ballmac/components/neon-card.tsx", "type": "registry:ui", "target": "@components/ballmac/neon-card.tsx" } ], "categories": [ "motion" ], "meta": { "schema": 1, "tier": "free", "tags": [ "card", "neon", "glow", "border", "gradient" ], "version": "1.0.0", "updated": "2026-10-01", "ai": { "summary": "content. Colors are theme tokens, so it follows any theme. The light is strongest in dark mode.", "whenToUse": [ "A single highlighted plan, product or announcement", "Dark-themed landing pages" ], "whenNotToUse": [ "Several cards at once", "A rotating border (glow-border)" ], "composesWith": [ "glow-border", "magic-card", "card" ], "a11y": [ { "keys": "Contrast", "action": "Content sits on the normal card surface; the glow is decorative" }, { "keys": "Reduced motion", "action": "Flicker is never played" } ], "customization": [ "from and to", "borderWidth", "glow", "flicker", "radius" ] }, "examples": [ "neon-card-demo", "neon-card-tones" ], "url": "https://ui.ballmac.com/components/neon-card" } }, { "name": "neon-card-demo", "type": "registry:example", "title": "Neon Card: Pricing tier", "description": "Pricing tier example of Neon Card.", "registryDependencies": [ "https://ui.ballmac.com/r/neon-card.json" ], "dependencies": [ "lucide-react" ], "files": [ { "path": "registry/examples/neon-card-demo.tsx", "type": "registry:example", "target": "@components/ballmac/examples/neon-card-demo.tsx" } ], "categories": [ "motion" ], "meta": { "example": true, "of": "neon-card", "tier": "free" } }, { "name": "neon-card-tones", "type": "registry:example", "title": "Neon Card: Tones and flicker", "description": "Tones and flicker example of Neon Card.", "registryDependencies": [ "https://ui.ballmac.com/r/neon-card.json" ], "files": [ { "path": "registry/examples/neon-card-tones.tsx", "type": "registry:example", "target": "@components/ballmac/examples/neon-card-tones.tsx" } ], "categories": [ "motion" ], "meta": { "example": true, "of": "neon-card", "tier": "free" } }, { "name": "noise-texture", "type": "registry:ui", "title": "Noise Texture", "description": "A film-grain layer made from an SVG turbulence filter, with strength, fineness, blend mode and an optional shimmer, to take the plastic edge off gradients, cards and photos.", "author": "Ballmac ", "dependencies": [ "motion@^12" ], "registryDependencies": [ "utils" ], "files": [ { "path": "registry/ballmac/components/noise-texture.tsx", "type": "registry:ui", "target": "@components/ballmac/noise-texture.tsx" } ], "categories": [ "backgrounds" ], "meta": { "schema": 1, "tier": "free", "tags": [ "noise", "grain", "texture", "overlay", "gradient" ], "version": "1.0.0", "updated": "2026-10-01", "ai": { "summary": " absolutely fills its relative parent. No image file is needed; the grain is an inline SVG data URI.", "whenToUse": [ "Gradient heroes and cards that band or look flat", "Giving imagery a printed feel" ], "whenNotToUse": [ "Text-heavy surfaces at high opacity" ], "composesWith": [ "aurora-background", "gradient-text", "card" ], "a11y": [ { "keys": "Screen readers", "action": "Decorative: aria-hidden and pointer-events-none" }, { "keys": "Reduced motion", "action": "The grain never shimmers" } ], "customization": [ "opacity", "frequency", "tile", "blend", "animated" ] }, "examples": [ "noise-texture-demo", "noise-texture-blends" ], "url": "https://ui.ballmac.com/components/noise-texture" } }, { "name": "noise-texture-demo", "type": "registry:example", "title": "Noise Texture: Gradient with grain", "description": "Gradient with grain example of Noise Texture.", "registryDependencies": [ "https://ui.ballmac.com/r/noise-texture.json" ], "files": [ { "path": "registry/examples/noise-texture-demo.tsx", "type": "registry:example", "target": "@components/ballmac/examples/noise-texture-demo.tsx" } ], "categories": [ "backgrounds" ], "meta": { "example": true, "of": "noise-texture", "tier": "free" } }, { "name": "noise-texture-blends", "type": "registry:example", "title": "Noise Texture: Blend modes", "description": "Blend modes example of Noise Texture.", "registryDependencies": [ "https://ui.ballmac.com/r/noise-texture.json" ], "files": [ { "path": "registry/examples/noise-texture-blends.tsx", "type": "registry:example", "target": "@components/ballmac/examples/noise-texture-blends.tsx" } ], "categories": [ "backgrounds" ], "meta": { "example": true, "of": "noise-texture", "tier": "free" } }, { "name": "notification-center", "type": "registry:ui", "title": "Notification Center", "description": "A bell with an unread badge that opens grouped notifications with All and Unread views, mark-as-read, dismiss, and an unread count in its accessible name.", "author": "Ballmac ", "dependencies": [ "motion@^12", "lucide-react" ], "registryDependencies": [ "utils", "https://ui.ballmac.com/r/motion-presets.json", "https://ui.ballmac.com/r/popover.json", "https://ui.ballmac.com/r/i18n.json" ], "files": [ { "path": "registry/ballmac/components/notification-center.tsx", "type": "registry:ui", "target": "@components/ballmac/notification-center.tsx" } ], "categories": [ "saas" ], "meta": { "schema": 1, "tier": "free", "tags": [ "notifications", "inbox", "bell", "popover" ], "version": "1.0.0", "updated": "2026-09-30", "ai": { "summary": "notifications[] with {id,title,description,time,group,read,icon,href}. Handle onMarkRead, onMarkAllRead, onDismiss and onOpenItem in your own state.", "whenToUse": [ "App headers", "In-app activity and alerts" ], "whenNotToUse": [ "Transient confirmations; use toast", "Long-form updates; use changelog-feed" ], "composesWith": [ "popover", "avatar", "toast" ], "a11y": [ { "keys": "Enter / Space", "action": "Opens the panel; Escape closes and restores focus" }, { "keys": "Screen readers", "action": "The button announces the unread count; unread rows include 'Unread'; the list is a polite live region" }, { "keys": "Tab", "action": "Row actions appear on hover and on keyboard focus" } ], "customization": [ "groups", "onOpenChange and open", "emptyText and label", "row icons" ] }, "examples": [ "notification-center-demo", "notification-center-states" ], "url": "https://ui.ballmac.com/components/notification-center" } }, { "name": "notification-center-demo", "type": "registry:example", "title": "Notification Center: Inbox", "description": "Inbox example of Notification Center.", "registryDependencies": [ "https://ui.ballmac.com/r/notification-center.json" ], "dependencies": [ "lucide-react" ], "files": [ { "path": "registry/examples/notification-center-demo.tsx", "type": "registry:example", "target": "@components/ballmac/examples/notification-center-demo.tsx" } ], "categories": [ "saas" ], "meta": { "example": true, "of": "notification-center", "tier": "free" } }, { "name": "notification-center-states", "type": "registry:example", "title": "Notification Center: Empty", "description": "Empty example of Notification Center.", "registryDependencies": [ "https://ui.ballmac.com/r/notification-center.json" ], "files": [ { "path": "registry/examples/notification-center-states.tsx", "type": "registry:example", "target": "@components/ballmac/examples/notification-center-states.tsx" } ], "categories": [ "saas" ], "meta": { "example": true, "of": "notification-center", "tier": "free" } }, { "name": "notification-stack", "type": "registry:ui", "title": "Notification Stack", "description": "macOS Notification Center cards: collapsed, the newest sits in front with two peeking behind; click or press Enter to spring the stack open. New cards slide in from the top; each can be dismissed.", "author": "Ballmac ", "dependencies": [ "motion@^12", "lucide-react" ], "registryDependencies": [ "utils", "https://ui.ballmac.com/r/i18n.json" ], "files": [ { "path": "registry/ballmac/components/notification-stack.tsx", "type": "registry:ui", "target": "@components/ballmac/notification-stack.tsx" } ], "categories": [ "macos" ], "meta": { "schema": 1, "tier": "free", "tags": [ "notifications", "toast", "stack", "macos", "notification center", "motion", "vibrancy" ], "version": "1.0.1", "updated": "2026-09-29", "ai": { "summary": "Render with body children, newest first. Keep items in state; prepend to add (animates in), filter to dismiss. expanded/defaultExpanded/onExpandedChange control the stack; onClearAll adds a clear button.", "whenToUse": [ "An activity or notification feed in a dashboard corner", "A landing-page hero showing the alerts a product sends (deploys, reviews, payments)", "Grouping several recent events so they take the space of one" ], "whenNotToUse": [ "Transient feedback after a single action (use a toast)", "A single live activity that changes over time (use dynamic-island)" ], "composesWith": [ "dynamic-island", "mac-window" ], "a11y": [ { "keys": "Tab", "action": "Focuses the stack's expand button when collapsed, or each card's dismiss button and Show less when expanded" }, { "keys": "Enter / Space", "action": "Expands the collapsed stack (focus moves to Show less) or activates the focused button" }, { "keys": "Escape", "action": "Collapses an expanded stack and returns focus to it" } ], "customization": [ "expanded / defaultExpanded / onExpandedChange: controlled or uncontrolled", "label: heading and region name (default Notifications); onClearAll shows clear buttons", "Notification: icon + iconClassName (tile background), title, time, children (body, clamped to 2 lines), onDismiss, dismissLabel", "Peeking cards are inert and hidden from assistive tech until the stack expands" ] }, "examples": [ "notification-stack-demo" ], "url": "https://ui.ballmac.com/components/notification-stack" } }, { "name": "notification-stack-demo", "type": "registry:example", "title": "Notification Stack: Notification Center", "description": "Notification Center example of Notification Stack.", "registryDependencies": [ "https://ui.ballmac.com/r/notification-stack.json" ], "dependencies": [ "lucide-react" ], "files": [ { "path": "registry/examples/notification-stack-demo.tsx", "type": "registry:example", "target": "@components/ballmac/examples/notification-stack-demo.tsx" } ], "categories": [ "macos" ], "meta": { "example": true, "of": "notification-stack", "tier": "free" } }, { "name": "number-input", "type": "registry:ui", "title": "Number Input", "description": "A bounded numeric field with native spinbutton semantics, step buttons, and controlled or uncontrolled state.", "author": "Ballmac ", "dependencies": [ "lucide-react" ], "registryDependencies": [ "utils", "https://ui.ballmac.com/r/i18n.json" ], "files": [ { "path": "registry/ballmac/components/number-input.tsx", "type": "registry:ui", "target": "@components/ballmac/number-input.tsx" } ], "categories": [ "forms" ], "meta": { "schema": 1, "tier": "free", "tags": [ "number", "stepper", "spinbutton" ], "version": "1.0.0", "updated": "2026-09-30", "ai": { "summary": "A bounded numeric field with native spinbutton semantics, step buttons, and controlled or uncontrolled state.", "whenToUse": [ "Choose a quantity or bounded count", "Adjust a value precisely using keys or buttons" ], "whenNotToUse": [ "Use a slider when approximate adjustment is sufficient" ], "composesWith": [ "input" ], "a11y": [ { "keys": "Arrow Up / Down", "action": "Changes the native numeric value" }, { "keys": "Tab / Enter", "action": "Operates the step buttons" } ], "customization": [ "min, max, step", "value / defaultValue and onValueChange" ] }, "examples": [ "number-input-demo", "number-input-states" ], "url": "https://ui.ballmac.com/components/number-input" } }, { "name": "number-input-demo", "type": "registry:example", "title": "Number Input: Overview", "description": "Overview example of Number Input.", "registryDependencies": [ "https://ui.ballmac.com/r/number-input.json" ], "files": [ { "path": "registry/examples/number-input-demo.tsx", "type": "registry:example", "target": "@components/ballmac/examples/number-input-demo.tsx" } ], "categories": [ "forms" ], "meta": { "example": true, "of": "number-input", "tier": "free" } }, { "name": "number-input-states", "type": "registry:example", "title": "Number Input: States and variants", "description": "States and variants example of Number Input.", "registryDependencies": [ "https://ui.ballmac.com/r/number-input.json" ], "files": [ { "path": "registry/examples/number-input-states.tsx", "type": "registry:example", "target": "@components/ballmac/examples/number-input-states.tsx" } ], "categories": [ "forms" ], "meta": { "example": true, "of": "number-input", "tier": "free" } }, { "name": "number-ticker", "type": "registry:ui", "title": "Number Ticker", "description": "Counts up to a number when it scrolls into view, with locale-aware formatting for currency, percentages and decimals.", "author": "Ballmac ", "dependencies": [ "motion@^12" ], "registryDependencies": [ "utils", "https://ui.ballmac.com/r/motion-presets.json", "https://ui.ballmac.com/r/i18n.json" ], "files": [ { "path": "registry/ballmac/components/number-ticker.tsx", "type": "registry:ui", "target": "@components/ballmac/number-ticker.tsx" } ], "categories": [ "motion" ], "meta": { "schema": 1, "tier": "free", "tags": [ "animation", "counter", "stats", "motion" ], "version": "1.0.1", "updated": "2026-09-28", "ai": { "summary": "Animated number for stats and KPIs. Respects reduced motion by showing the final value immediately.", "whenToUse": [ "Stat sections on landing pages", "Dashboard KPIs that load in" ], "whenNotToUse": [ "Numbers that update every second (animate a live value instead)", "Prices users need to read instantly" ], "composesWith": [ "text-reveal", "badge" ], "a11y": [], "customization": [ "format accepts any Intl.NumberFormat options", "locale defaults to en-US so server and browser render identical text; pass your locale explicitly", "duration and delay in seconds" ] }, "examples": [ "number-ticker-demo", "number-ticker-currency" ], "url": "https://ui.ballmac.com/components/number-ticker" } }, { "name": "number-ticker-demo", "type": "registry:example", "title": "Number Ticker: Default", "description": "Default example of Number Ticker.", "registryDependencies": [ "https://ui.ballmac.com/r/number-ticker.json" ], "files": [ { "path": "registry/examples/number-ticker-demo.tsx", "type": "registry:example", "target": "@components/ballmac/examples/number-ticker-demo.tsx" } ], "categories": [ "motion" ], "meta": { "example": true, "of": "number-ticker", "tier": "free" } }, { "name": "number-ticker-currency", "type": "registry:example", "title": "Number Ticker: Currency", "description": "Currency example of Number Ticker.", "registryDependencies": [ "https://ui.ballmac.com/r/number-ticker.json" ], "files": [ { "path": "registry/examples/number-ticker-currency.tsx", "type": "registry:example", "target": "@components/ballmac/examples/number-ticker-currency.tsx" } ], "categories": [ "motion" ], "meta": { "example": true, "of": "number-ticker", "tier": "free" } }, { "name": "onboarding-checklist", "type": "registry:ui", "title": "Onboarding Checklist", "description": "A get-started checklist with a progress ring and segmented bar, expandable steps with actions, checkable tasks and a short celebration when everything is done.", "author": "Ballmac ", "dependencies": [ "motion@^12", "lucide-react" ], "registryDependencies": [ "utils", "https://ui.ballmac.com/r/motion-presets.json", "https://ui.ballmac.com/r/i18n.json" ], "files": [ { "path": "registry/ballmac/components/onboarding-checklist.tsx", "type": "registry:ui", "target": "@components/ballmac/onboarding-checklist.tsx" } ], "categories": [ "saas" ], "meta": { "schema": 1, "tier": "free", "tags": [ "onboarding", "checklist", "progress", "activation" ], "version": "1.0.0", "updated": "2026-09-30", "ai": { "summary": "steps: {id,title,description,action}. completed/defaultCompleted/onCompletedChange track progress. The open step shows its description and action.", "whenToUse": [ "First-run setup for new accounts", "Activation nudges in a dashboard corner" ], "whenNotToUse": [ "Multi-page wizards; use stepper-form", "A plain progress bar; use progress" ], "composesWith": [ "progress-ring", "card", "button" ], "a11y": [ { "keys": "Tab", "action": "Reaches each step's checkbox and its expand button" }, { "keys": "Space", "action": "Toggles a step done (role checkbox)" }, { "keys": "Enter / Space on the title", "action": "Expands or collapses the step (aria-expanded)" }, { "keys": "Reduced motion", "action": "Check, bar and panel changes are instant" } ], "customization": [ "controlled completed ids", "defaultOpenId", "onDismiss", "completeMessage" ] }, "examples": [ "onboarding-checklist-demo", "onboarding-checklist-states" ], "url": "https://ui.ballmac.com/components/onboarding-checklist" } }, { "name": "onboarding-checklist-demo", "type": "registry:example", "title": "Onboarding Checklist: Setup steps", "description": "Setup steps example of Onboarding Checklist.", "registryDependencies": [ "https://ui.ballmac.com/r/onboarding-checklist.json" ], "files": [ { "path": "registry/examples/onboarding-checklist-demo.tsx", "type": "registry:example", "target": "@components/ballmac/examples/onboarding-checklist-demo.tsx" } ], "categories": [ "saas" ], "meta": { "example": true, "of": "onboarding-checklist", "tier": "free" } }, { "name": "onboarding-checklist-states", "type": "registry:example", "title": "Onboarding Checklist: Complete and dismissible", "description": "Complete and dismissible example of Onboarding Checklist.", "registryDependencies": [ "https://ui.ballmac.com/r/onboarding-checklist.json" ], "files": [ { "path": "registry/examples/onboarding-checklist-states.tsx", "type": "registry:example", "target": "@components/ballmac/examples/onboarding-checklist-states.tsx" } ], "categories": [ "saas" ], "meta": { "example": true, "of": "onboarding-checklist", "tier": "free" } }, { "name": "orbiting-circles", "type": "registry:ui", "title": "Orbiting Circles", "description": "Items that orbit a center on circular tracks while staying upright. Evenly spaced, any radius, speed and direction; stack several for rings. Paused off-screen, static under reduced motion.", "author": "Ballmac ", "registryDependencies": [ "utils" ], "files": [ { "path": "registry/ballmac/components/orbiting-circles.tsx", "type": "registry:ui", "target": "@components/ballmac/orbiting-circles.tsx" } ], "categories": [ "motion" ], "meta": { "schema": 1, "tier": "free", "tags": [ "orbit", "integrations", "icons", "rings", "hero", "motion" ], "version": "1.0.0", "updated": "2026-09-29", "ai": { "summary": "Inside a relative container with a fixed height, render the center element, then one per ring with the orbiting items as children. Each ring fills the container (absolute inset-0) and centers itself; items are laid out evenly around the circle.", "whenToUse": [ "An integrations or ecosystem section: your product in the middle, tools around it", "A hero visual for a platform that connects many services" ], "whenNotToUse": [ "Items people must read or click reliably (moving targets); use a grid", "More than about 8 items per ring" ], "composesWith": [ "animated-beam", "dot-pattern" ], "a11y": [], "customization": [ "radius (px), duration (s per orbit), reverse, startAngle (degrees)", "iconSize: the box each item gets (px)", "path toggles the dashed track; restyle it with [&_[data-slot=orbiting-circles-path]_circle]:stroke-…" ] }, "examples": [ "orbiting-circles-demo", "orbiting-circles-minimal" ], "url": "https://ui.ballmac.com/components/orbiting-circles" } }, { "name": "orbiting-circles-demo", "type": "registry:example", "title": "Orbiting Circles: Integrations", "description": "Integrations example of Orbiting Circles.", "registryDependencies": [ "https://ui.ballmac.com/r/orbiting-circles.json", "utils" ], "dependencies": [ "lucide-react" ], "files": [ { "path": "registry/examples/orbiting-circles-demo.tsx", "type": "registry:example", "target": "@components/ballmac/examples/orbiting-circles-demo.tsx" } ], "categories": [ "motion" ], "meta": { "example": true, "of": "orbiting-circles", "tier": "free" } }, { "name": "orbiting-circles-minimal", "type": "registry:example", "title": "Orbiting Circles: Single ring", "description": "Single ring example of Orbiting Circles.", "registryDependencies": [ "https://ui.ballmac.com/r/orbiting-circles.json" ], "files": [ { "path": "registry/examples/orbiting-circles-minimal.tsx", "type": "registry:example", "target": "@components/ballmac/examples/orbiting-circles-minimal.tsx" } ], "categories": [ "motion" ], "meta": { "example": true, "of": "orbiting-circles", "tier": "free" } }, { "name": "package-badge", "type": "registry:ui", "title": "Package Badge", "description": "An npm-style package card or inline pill with version, weekly downloads and sparkline, size, license, TypeScript and module formats, and a one-click install command.", "author": "Ballmac ", "dependencies": [ "lucide-react" ], "registryDependencies": [ "utils", "https://ui.ballmac.com/r/copy-button.json", "https://ui.ballmac.com/r/i18n.json" ], "files": [ { "path": "registry/ballmac/components/package-badge.tsx", "type": "registry:ui", "target": "@components/ballmac/package-badge.tsx" } ], "categories": [ "developer" ], "meta": { "schema": 1, "tier": "free", "tags": [ "npm", "package", "version", "install", "badge" ], "version": "1.0.0", "updated": "2026-10-01", "ai": { "summary": "Pass the facts you already have: name, version, description, downloads, trend, size, license, types, formats. variant is card | inline. manager picks npm | pnpm | yarn | bun for the copyable install command. Nothing is fetched.", "whenToUse": [ "Library landing pages and docs", "Showing dependencies in a changelog or README-style page" ], "whenNotToUse": [ "Live registry lookups (fetch on the server and pass the result)" ], "composesWith": [ "install-tabs", "copy-button", "badge" ], "a11y": [ { "keys": "Tab", "action": "Reaches the package link and the copy button" }, { "keys": "Screen readers", "action": "The trend chart is an image with a text alternative; stats are a description list" } ], "customization": [ "variant", "manager", "hideInstall", "trend", "href" ] }, "examples": [ "package-badge-demo", "package-badge-inline" ], "url": "https://ui.ballmac.com/components/package-badge" } }, { "name": "package-badge-demo", "type": "registry:example", "title": "Package Badge: Card with stats", "description": "Card with stats example of Package Badge.", "registryDependencies": [ "https://ui.ballmac.com/r/package-badge.json" ], "files": [ { "path": "registry/examples/package-badge-demo.tsx", "type": "registry:example", "target": "@components/ballmac/examples/package-badge-demo.tsx" } ], "categories": [ "developer" ], "meta": { "example": true, "of": "package-badge", "tier": "free" } }, { "name": "package-badge-inline", "type": "registry:example", "title": "Package Badge: Inline pills", "description": "Inline pills example of Package Badge.", "registryDependencies": [ "https://ui.ballmac.com/r/package-badge.json" ], "files": [ { "path": "registry/examples/package-badge-inline.tsx", "type": "registry:example", "target": "@components/ballmac/examples/package-badge-inline.tsx" } ], "categories": [ "developer" ], "meta": { "example": true, "of": "package-badge", "tier": "free" } }, { "name": "pagination", "type": "registry:ui", "title": "Pagination", "description": "A semantic page navigation set with current-page feedback, generous targets, and small-screen labels.", "author": "Ballmac ", "dependencies": [ "lucide-react" ], "registryDependencies": [ "utils", "https://ui.ballmac.com/r/i18n.json" ], "files": [ { "path": "registry/ballmac/components/pagination.tsx", "type": "registry:ui", "target": "@components/ballmac/pagination.tsx" } ], "categories": [ "navigation" ], "meta": { "schema": 1, "tier": "free", "tags": [ "pages", "navigation", "links" ], "version": "1.0.0", "updated": "2026-09-29", "ai": { "summary": "A semantic page navigation set with current-page feedback, generous targets, and small-screen labels.", "whenToUse": [ "Navigate a large result set by page", "Show a current page and neighboring destinations" ], "whenNotToUse": [ "Use infinite scroll when discrete pages are unnecessary" ], "composesWith": [ "button" ], "a11y": [ { "keys": "Tab", "action": "moves between page links" }, { "keys": "Enter", "action": "opens the focused page" } ], "customization": [ "isActive: marks the current page" ] }, "source": { "name": "shadcn/ui Pagination", "url": "https://github.com/shadcn-ui/ui", "license": "MIT", "copyright": "Copyright (c) 2023 shadcn", "modified": true }, "examples": [ "pagination-demo", "pagination-states" ], "url": "https://ui.ballmac.com/components/pagination" } }, { "name": "pagination-demo", "type": "registry:example", "title": "Pagination: Overview", "description": "Overview example of Pagination.", "registryDependencies": [ "https://ui.ballmac.com/r/pagination.json" ], "files": [ { "path": "registry/examples/pagination-demo.tsx", "type": "registry:example", "target": "@components/ballmac/examples/pagination-demo.tsx" } ], "categories": [ "navigation" ], "meta": { "example": true, "of": "pagination", "tier": "free" } }, { "name": "pagination-states", "type": "registry:example", "title": "Pagination: States and variants", "description": "States and variants example of Pagination.", "registryDependencies": [ "https://ui.ballmac.com/r/pagination.json" ], "files": [ { "path": "registry/examples/pagination-states.tsx", "type": "registry:example", "target": "@components/ballmac/examples/pagination-states.tsx" } ], "categories": [ "navigation" ], "meta": { "example": true, "of": "pagination", "tier": "free" } }, { "name": "particles", "type": "registry:ui", "title": "Particles", "description": "A canvas field of softly twinkling particles with depth, gentle drift and a pointer that attracts or repels them. Token colors, DPR aware, pauses off-screen, still under reduced motion.", "author": "Ballmac ", "registryDependencies": [ "utils", "https://ui.ballmac.com/r/color.json" ], "files": [ { "path": "registry/ballmac/components/particles.tsx", "type": "registry:ui", "target": "@components/ballmac/particles.tsx" } ], "categories": [ "backgrounds" ], "meta": { "schema": 1, "tier": "free", "tags": [ "particles", "stars", "canvas", "background", "hero", "interactive" ], "version": "1.0.0", "updated": "2026-09-29", "ai": { "summary": "Place as the first child of a relative, overflow-hidden container; it fills it (absolute inset-0, aria-hidden, pointer-events-none) and tracks the pointer at window level, so content above it stays clickable.", "whenToUse": [ "Quiet hero or CTA backgrounds, especially on dark surfaces", "Space, AI or data themed sections that need depth without imagery" ], "whenNotToUse": [ "Behind long-form text", "Many instances on one page (each runs its own canvas loop)" ], "composesWith": [ "text-reveal", "shimmer-text", "magnetic-button" ], "a11y": [], "customization": [ "quantity (per ~800×500 px, scales with area), size (base radius px), maxOpacity", "color: CSS variable name or color, default --foreground; try --chart-1", "interaction: attract | repel | none; radius and ease shape the pointer response", "vx / vy add a constant drift (vy={-0.3} rises like embers)" ] }, "examples": [ "particles-demo", "particles-rising" ], "url": "https://ui.ballmac.com/components/particles" } }, { "name": "particles-demo", "type": "registry:example", "title": "Particles: Hero card", "description": "Hero card example of Particles.", "registryDependencies": [ "https://ui.ballmac.com/r/particles.json" ], "dependencies": [ "lucide-react" ], "files": [ { "path": "registry/examples/particles-demo.tsx", "type": "registry:example", "target": "@components/ballmac/examples/particles-demo.tsx" } ], "categories": [ "backgrounds" ], "meta": { "example": true, "of": "particles", "tier": "free" } }, { "name": "particles-rising", "type": "registry:example", "title": "Particles: Rising, repel", "description": "Rising, repel example of Particles.", "registryDependencies": [ "https://ui.ballmac.com/r/particles.json" ], "files": [ { "path": "registry/examples/particles-rising.tsx", "type": "registry:example", "target": "@components/ballmac/examples/particles-rising.tsx" } ], "categories": [ "backgrounds" ], "meta": { "example": true, "of": "particles", "tier": "free" } }, { "name": "password-input", "type": "registry:ui", "title": "Password Input", "description": "A password field with a visibility toggle and a four-step strength guide that explains how to improve the entry.", "author": "Ballmac ", "dependencies": [ "lucide-react" ], "registryDependencies": [ "utils", "https://ui.ballmac.com/r/i18n.json" ], "files": [ { "path": "registry/ballmac/components/password-input.tsx", "type": "registry:ui", "target": "@components/ballmac/password-input.tsx" } ], "categories": [ "forms" ], "meta": { "schema": 1, "tier": "free", "tags": [ "password", "security", "strength" ], "version": "1.0.0", "updated": "2026-09-30", "ai": { "summary": "A password field with a visibility toggle and a four-step strength guide that explains how to improve the entry.", "whenToUse": [ "Create or change a password", "Give immediate guidance while typing" ], "whenNotToUse": [ "Use input for a standard text field" ], "composesWith": [ "input" ], "a11y": [ { "keys": "Tab / Space", "action": "Toggles password visibility" } ], "customization": [ "showStrength", "value / defaultValue and onValueChange" ] }, "examples": [ "password-input-demo", "password-input-states" ], "url": "https://ui.ballmac.com/components/password-input" } }, { "name": "password-input-demo", "type": "registry:example", "title": "Password Input: Overview", "description": "Overview example of Password Input.", "registryDependencies": [ "https://ui.ballmac.com/r/password-input.json" ], "files": [ { "path": "registry/examples/password-input-demo.tsx", "type": "registry:example", "target": "@components/ballmac/examples/password-input-demo.tsx" } ], "categories": [ "forms" ], "meta": { "example": true, "of": "password-input", "tier": "free" } }, { "name": "password-input-states", "type": "registry:example", "title": "Password Input: States and variants", "description": "States and variants example of Password Input.", "registryDependencies": [ "https://ui.ballmac.com/r/password-input.json" ], "files": [ { "path": "registry/examples/password-input-states.tsx", "type": "registry:example", "target": "@components/ballmac/examples/password-input-states.tsx" } ], "categories": [ "forms" ], "meta": { "example": true, "of": "password-input", "tier": "free" } }, { "name": "phone-frame", "type": "registry:ui", "title": "Phone Frame", "description": "A modern phone drawn in CSS: titanium band, side buttons, Dynamic Island, status bar and home indicator. Children render as the screen, laid out at a phone resolution and scaled to fit.", "author": "Ballmac ", "dependencies": [ "motion@^12" ], "registryDependencies": [ "utils", "https://ui.ballmac.com/r/media.json" ], "files": [ { "path": "registry/ballmac/components/phone-frame.tsx", "type": "registry:ui", "target": "@components/ballmac/phone-frame.tsx" } ], "categories": [ "devices" ], "meta": { "schema": 1, "tier": "free", "tags": [ "mockup", "device", "phone", "iphone", "mobile", "screenshot", "hero" ], "version": "1.0.0", "updated": "2026-09-29", "ai": { "summary": "Wrap a mobile screen in : children render below a status bar at 390 CSS px wide and are scaled to the frame's width. Set the frame width with className (e.g. w-64); height follows the phone's aspect ratio.", "whenToUse": [ "Showing a mobile app or responsive site on a landing page", "App Store-style feature sections with live React screens", "Pairing with laptop-frame to show desktop and mobile together" ], "whenNotToUse": [ "Desktop apps or websites at desktop width (use laptop-frame or browser-frame)", "Real device screenshots that already include the bezel" ], "composesWith": [ "laptop-frame" ], "a11y": [], "customization": [ "variant: auto (natural titanium in light, black in dark) | natural | black", "screenWidth: virtual width in CSS px, e.g. 390", "statusBar, time (default \"9:41\"), homeIndicator", "screenClassName=\"dark\" gives the screen its own theme regardless of the page", "src/alt or videoSrc/poster to show media instead of children" ] }, "examples": [ "phone-frame-demo", "phone-frame-chat" ], "url": "https://ui.ballmac.com/components/phone-frame" } }, { "name": "phone-frame-demo", "type": "registry:example", "title": "Phone Frame: Wallet app", "description": "Wallet app example of Phone Frame.", "registryDependencies": [ "https://ui.ballmac.com/r/phone-frame.json" ], "dependencies": [ "lucide-react" ], "files": [ { "path": "registry/examples/phone-frame-demo.tsx", "type": "registry:example", "target": "@components/ballmac/examples/phone-frame-demo.tsx" } ], "categories": [ "devices" ], "meta": { "example": true, "of": "phone-frame", "tier": "free" } }, { "name": "phone-frame-chat", "type": "registry:example", "title": "Phone Frame: Black, dark screen", "description": "Black, dark screen example of Phone Frame.", "registryDependencies": [ "https://ui.ballmac.com/r/phone-frame.json" ], "dependencies": [ "lucide-react" ], "files": [ { "path": "registry/examples/phone-frame-chat.tsx", "type": "registry:example", "target": "@components/ballmac/examples/phone-frame-chat.tsx" } ], "categories": [ "devices" ], "meta": { "example": true, "of": "phone-frame", "tier": "free" } }, { "name": "phone-input", "type": "registry:ui", "title": "Phone Input", "description": "A native dialing-code selector paired with a telephone field that preserves the user’s formatting.", "author": "Ballmac ", "registryDependencies": [ "utils", "https://ui.ballmac.com/r/i18n.json" ], "files": [ { "path": "registry/ballmac/components/phone-input.tsx", "type": "registry:ui", "target": "@components/ballmac/phone-input.tsx" } ], "categories": [ "forms" ], "meta": { "schema": 1, "tier": "free", "tags": [ "phone", "telephone", "country" ], "version": "1.0.0", "updated": "2026-09-30", "ai": { "summary": "A native dialing-code selector paired with a telephone field that preserves the user’s formatting.", "whenToUse": [ "Collect a contact number with a dialing prefix", "Edit a national number without forced formatting" ], "whenNotToUse": [ "Use input type tel when a country selector is unnecessary" ], "composesWith": [ "input" ], "a11y": [ { "keys": "Arrow Up / Down", "action": "Changes the native dialing-code selection" }, { "keys": "Tab", "action": "Moves to the telephone field" } ], "customization": [ "countries, countryCodeName", "value / defaultValue and onValueChange" ] }, "examples": [ "phone-input-demo", "phone-input-states" ], "url": "https://ui.ballmac.com/components/phone-input" } }, { "name": "phone-input-demo", "type": "registry:example", "title": "Phone Input: Overview", "description": "Overview example of Phone Input.", "registryDependencies": [ "https://ui.ballmac.com/r/phone-input.json" ], "files": [ { "path": "registry/examples/phone-input-demo.tsx", "type": "registry:example", "target": "@components/ballmac/examples/phone-input-demo.tsx" } ], "categories": [ "forms" ], "meta": { "example": true, "of": "phone-input", "tier": "free" } }, { "name": "phone-input-states", "type": "registry:example", "title": "Phone Input: States and variants", "description": "States and variants example of Phone Input.", "registryDependencies": [ "https://ui.ballmac.com/r/phone-input.json" ], "files": [ { "path": "registry/examples/phone-input-states.tsx", "type": "registry:example", "target": "@components/ballmac/examples/phone-input-states.tsx" } ], "categories": [ "forms" ], "meta": { "example": true, "of": "phone-input", "tier": "free" } }, { "name": "plan-selector", "type": "registry:ui", "title": "Plan Selector", "description": "Pricing plan cards that work as a radio group, with a Monthly/Yearly switch that re-prices every plan, a highlighted plan, feature lists and form submission.", "author": "Ballmac ", "dependencies": [ "motion@^12", "lucide-react" ], "registryDependencies": [ "utils", "https://ui.ballmac.com/r/motion-presets.json", "https://ui.ballmac.com/r/i18n.json" ], "files": [ { "path": "registry/ballmac/components/plan-selector.tsx", "type": "registry:ui", "target": "@components/ballmac/plan-selector.tsx" } ], "categories": [ "saas" ], "meta": { "schema": 1, "tier": "free", "tags": [ "pricing", "plans", "radio", "billing toggle" ], "version": "1.0.0", "updated": "2026-09-30", "ai": { "summary": "plans: {id,name,price:{monthly,yearly},features,highlight,disabled}. value/onValueChange pick a plan; billing/onBillingChange switch period; name submits with a form.", "whenToUse": [ "Upgrade and signup flows", "Pricing sections where visitors choose a plan" ], "whenNotToUse": [ "A feature comparison grid; use comparison-table", "Displaying the current plan; use billing-card" ], "composesWith": [ "billing-card", "comparison-table", "radio-group" ], "a11y": [ { "keys": "Arrow keys / Space", "action": "Native radio behavior between plans and the billing switch" }, { "keys": "Screen readers", "action": "Announced as a radio group with position, name and price" }, { "keys": "Reduced motion", "action": "Price changes swap instantly" } ], "customization": [ "highlight ribbon", "priceNote", "currency and locale", "disabled plans" ] }, "examples": [ "plan-selector-demo", "plan-selector-states" ], "url": "https://ui.ballmac.com/components/plan-selector" } }, { "name": "plan-selector-demo", "type": "registry:example", "title": "Plan Selector: Three plans", "description": "Three plans example of Plan Selector.", "registryDependencies": [ "https://ui.ballmac.com/r/plan-selector.json" ], "files": [ { "path": "registry/examples/plan-selector-demo.tsx", "type": "registry:example", "target": "@components/ballmac/examples/plan-selector-demo.tsx" } ], "categories": [ "saas" ], "meta": { "example": true, "of": "plan-selector", "tier": "free" } }, { "name": "plan-selector-states", "type": "registry:example", "title": "Plan Selector: Controlled, one unavailable", "description": "Controlled, one unavailable example of Plan Selector.", "registryDependencies": [ "https://ui.ballmac.com/r/plan-selector.json" ], "files": [ { "path": "registry/examples/plan-selector-states.tsx", "type": "registry:example", "target": "@components/ballmac/examples/plan-selector-states.tsx" } ], "categories": [ "saas" ], "meta": { "example": true, "of": "plan-selector", "tier": "free" } }, { "name": "popover", "type": "registry:ui", "title": "Popover", "description": "A focus-managed compact surface for controls or details, with collision handling, mobile-safe width, and optional close action.", "author": "Ballmac ", "dependencies": [ "radix-ui", "lucide-react" ], "registryDependencies": [ "utils", "https://ui.ballmac.com/r/i18n.json" ], "files": [ { "path": "registry/ballmac/components/popover.tsx", "type": "registry:ui", "target": "@components/ballmac/popover.tsx" } ], "categories": [ "primitives" ], "meta": { "schema": 1, "tier": "free", "tags": [ "overlay", "panel", "editor", "radix" ], "version": "1.0.0", "updated": "2026-09-30", "ai": { "summary": "Displays a small interactive panel anchored to a control, with managed focus and Escape dismissal.", "whenToUse": [ "Inline editors and compact preferences", "Actions needing more room than a menu" ], "whenNotToUse": [ "Long or critical forms; use dialog", "Noninteractive link previews; use hover-card" ], "composesWith": [ "button", "input" ], "a11y": [ { "keys": "Enter / Space", "action": "Opens the panel from its trigger" }, { "keys": "Tab / Shift+Tab", "action": "Moves among panel controls" }, { "keys": "Escape", "action": "Closes and returns focus to the trigger" } ], "customization": [ "alignment and side offset", "optional close button", "controlled open state" ] }, "examples": [ "popover-demo", "popover-states" ], "url": "https://ui.ballmac.com/components/popover" } }, { "name": "popover-demo", "type": "registry:example", "title": "Popover: Share settings", "description": "Share settings example of Popover.", "registryDependencies": [ "https://ui.ballmac.com/r/popover.json" ], "dependencies": [ "lucide-react" ], "files": [ { "path": "registry/examples/popover-demo.tsx", "type": "registry:example", "target": "@components/ballmac/examples/popover-demo.tsx" } ], "categories": [ "primitives" ], "meta": { "example": true, "of": "popover", "tier": "free" } }, { "name": "popover-states", "type": "registry:example", "title": "Popover: Profile details", "description": "Profile details example of Popover.", "registryDependencies": [ "https://ui.ballmac.com/r/popover.json" ], "files": [ { "path": "registry/examples/popover-states.tsx", "type": "registry:example", "target": "@components/ballmac/examples/popover-states.tsx" } ], "categories": [ "primitives" ], "meta": { "example": true, "of": "popover", "tier": "free" } }, { "name": "progress-ring", "type": "registry:ui", "title": "Progress Ring", "description": "A token-colored circular progress meter with a readable center and accessible value.", "author": "Ballmac ", "registryDependencies": [ "utils" ], "files": [ { "path": "registry/ballmac/components/progress-ring.tsx", "type": "registry:ui", "target": "@components/ballmac/progress-ring.tsx" } ], "categories": [ "data-display" ], "meta": { "schema": 1, "tier": "free", "tags": [ "progress", "gauge", "status" ], "version": "1.0.0", "updated": "2026-09-30", "ai": { "summary": "A token-colored circular progress meter with a readable center and accessible value.", "whenToUse": [ "Show bounded progress in a small area" ], "whenNotToUse": [ "Use Progress for a full-width track" ], "composesWith": [ "progress" ], "a11y": [ { "keys": "None", "action": "Progressbar name and current value are announced" } ], "customization": [ "Content, layout, and token-based className styling" ] }, "examples": [ "progress-ring-demo", "progress-ring-states" ], "url": "https://ui.ballmac.com/components/progress-ring" } }, { "name": "progress-ring-demo", "type": "registry:example", "title": "Progress Ring: Overview", "description": "Overview example of Progress Ring.", "registryDependencies": [ "https://ui.ballmac.com/r/progress-ring.json" ], "files": [ { "path": "registry/examples/progress-ring-demo.tsx", "type": "registry:example", "target": "@components/ballmac/examples/progress-ring-demo.tsx" } ], "categories": [ "data-display" ], "meta": { "example": true, "of": "progress-ring", "tier": "free" } }, { "name": "progress-ring-states", "type": "registry:example", "title": "Progress Ring: States and variants", "description": "States and variants example of Progress Ring.", "registryDependencies": [ "https://ui.ballmac.com/r/progress-ring.json" ], "files": [ { "path": "registry/examples/progress-ring-states.tsx", "type": "registry:example", "target": "@components/ballmac/examples/progress-ring-states.tsx" } ], "categories": [ "data-display" ], "meta": { "example": true, "of": "progress-ring", "tier": "free" } }, { "name": "progress-steps", "type": "registry:ui", "title": "Progress Steps", "description": "An ordered progress sequence with current-step semantics and optional navigation to completed steps.", "author": "Ballmac ", "dependencies": [ "lucide-react" ], "registryDependencies": [ "utils", "https://ui.ballmac.com/r/i18n.json" ], "files": [ { "path": "registry/ballmac/components/progress-steps.tsx", "type": "registry:ui", "target": "@components/ballmac/progress-steps.tsx" } ], "categories": [ "feedback" ], "meta": { "schema": 1, "tier": "free", "tags": [ "steps", "wizard", "progress" ], "version": "1.0.0", "updated": "2026-09-30", "ai": { "summary": "An ordered progress sequence with current-step semantics and optional navigation to completed steps.", "whenToUse": [ "Show a multi-step flow", "Let users revisit completed steps" ], "whenNotToUse": [ "Use progress for an unlabelled percentage" ], "composesWith": [ "stepper-form", "progress" ], "a11y": [ { "keys": "Tab / Enter", "action": "Return to a completed step when navigable" } ], "customization": [ "Controlled or uncontrolled active index", "Optional descriptions" ] }, "examples": [ "progress-steps-demo", "progress-steps-states" ], "url": "https://ui.ballmac.com/components/progress-steps" } }, { "name": "progress-steps-demo", "type": "registry:example", "title": "Progress Steps: Overview", "description": "Overview example of Progress Steps.", "registryDependencies": [ "https://ui.ballmac.com/r/progress-steps.json" ], "files": [ { "path": "registry/examples/progress-steps-demo.tsx", "type": "registry:example", "target": "@components/ballmac/examples/progress-steps-demo.tsx" } ], "categories": [ "feedback" ], "meta": { "example": true, "of": "progress-steps", "tier": "free" } }, { "name": "progress-steps-states", "type": "registry:example", "title": "Progress Steps: States and variants", "description": "States and variants example of Progress Steps.", "registryDependencies": [ "https://ui.ballmac.com/r/progress-steps.json" ], "files": [ { "path": "registry/examples/progress-steps-states.tsx", "type": "registry:example", "target": "@components/ballmac/examples/progress-steps-states.tsx" } ], "categories": [ "feedback" ], "meta": { "example": true, "of": "progress-steps", "tier": "free" } }, { "name": "progress", "type": "registry:ui", "title": "Progress", "description": "A Radix progress bar with clamped values, optional percentage text, and a reduced-motion-safe pending state.", "author": "Ballmac ", "dependencies": [ "radix-ui" ], "registryDependencies": [ "utils" ], "files": [ { "path": "registry/ballmac/components/progress.tsx", "type": "registry:ui", "target": "@components/ballmac/progress.tsx" } ], "categories": [ "feedback" ], "meta": { "schema": 1, "tier": "free", "tags": [ "loading", "progress", "status" ], "version": "1.0.0", "updated": "2026-09-29", "ai": { "summary": "A Radix progress bar with clamped values, optional percentage text, and a reduced-motion-safe pending state.", "whenToUse": [ "Show completion of a bounded task", "Show work in progress when completion is unknown" ], "whenNotToUse": [ "Use a spinner for very short waits" ], "composesWith": [ "spinner" ], "a11y": [], "customization": [ "value: current value or null for indeterminate", "showValue: display percentage" ] }, "source": { "name": "shadcn/ui Progress", "url": "https://github.com/shadcn-ui/ui", "license": "MIT", "copyright": "Copyright (c) 2023 shadcn", "modified": true }, "examples": [ "progress-demo", "progress-states" ], "url": "https://ui.ballmac.com/components/progress" } }, { "name": "progress-demo", "type": "registry:example", "title": "Progress: Overview", "description": "Overview example of Progress.", "registryDependencies": [ "https://ui.ballmac.com/r/progress.json" ], "files": [ { "path": "registry/examples/progress-demo.tsx", "type": "registry:example", "target": "@components/ballmac/examples/progress-demo.tsx" } ], "categories": [ "feedback" ], "meta": { "example": true, "of": "progress", "tier": "free" } }, { "name": "progress-states", "type": "registry:example", "title": "Progress: States and variants", "description": "States and variants example of Progress.", "registryDependencies": [ "https://ui.ballmac.com/r/progress.json" ], "files": [ { "path": "registry/examples/progress-states.tsx", "type": "registry:example", "target": "@components/ballmac/examples/progress-states.tsx" } ], "categories": [ "feedback" ], "meta": { "example": true, "of": "progress", "tier": "free" } }, { "name": "progressive-blur", "type": "registry:ui", "title": "Progressive Blur", "description": "A blur that ramps up toward an edge instead of switching on at a line, made of stacked backdrop-filter layers, for scrolling lists, headers, footers and image captions.", "author": "Ballmac ", "registryDependencies": [ "utils" ], "files": [ { "path": "registry/ballmac/components/progressive-blur.tsx", "type": "registry:ui", "target": "@components/ballmac/progressive-blur.tsx" } ], "categories": [ "motion" ], "meta": { "schema": 1, "tier": "free", "tags": [ "blur", "gradient", "edge", "scroll", "backdrop" ], "version": "1.0.0", "updated": "2026-10-01", "ai": { "summary": " inside a relative parent that scrolls or holds an image. Pointer events pass through it. A server component with no JavaScript.", "whenToUse": [ "Scrolling lists that fade out at the edges", "Text over images, instead of a dark gradient" ], "whenNotToUse": [ "Browsers or surfaces without backdrop-filter support (it degrades to no blur)" ], "composesWith": [ "scroll-area", "card" ], "a11y": [ { "keys": "Screen readers", "action": "Decorative: aria-hidden and pointer-events-none" }, { "keys": "Interaction", "action": "Never blocks clicks or scrolling" } ], "customization": [ "position", "size", "strength", "layers" ] }, "examples": [ "progressive-blur-demo", "progressive-blur-sides" ], "url": "https://ui.ballmac.com/components/progressive-blur" } }, { "name": "progressive-blur-demo", "type": "registry:example", "title": "Progressive Blur: Scrolling list with both edges", "description": "Scrolling list with both edges example of Progressive Blur.", "registryDependencies": [ "https://ui.ballmac.com/r/progressive-blur.json" ], "files": [ { "path": "registry/examples/progressive-blur-demo.tsx", "type": "registry:example", "target": "@components/ballmac/examples/progressive-blur-demo.tsx" } ], "categories": [ "motion" ], "meta": { "example": true, "of": "progressive-blur", "tier": "free" } }, { "name": "progressive-blur-sides", "type": "registry:example", "title": "Progressive Blur: Four edges", "description": "Four edges example of Progressive Blur.", "registryDependencies": [ "https://ui.ballmac.com/r/progressive-blur.json" ], "files": [ { "path": "registry/examples/progressive-blur-sides.tsx", "type": "registry:example", "target": "@components/ballmac/examples/progressive-blur-sides.tsx" } ], "categories": [ "motion" ], "meta": { "example": true, "of": "progressive-blur", "tier": "free" } }, { "name": "prompt-input", "type": "registry:ui", "title": "Prompt Input", "description": "An auto-growing chat input: Enter sends, Shift+Enter adds a line (IME-safe), the send button turns into Stop while streaming, with file attachment chips and a toolbar slot.", "author": "Ballmac ", "dependencies": [ "lucide-react" ], "registryDependencies": [ "https://ui.ballmac.com/r/button.json", "utils", "https://ui.ballmac.com/r/i18n.json" ], "files": [ { "path": "registry/ballmac/components/prompt-input.tsx", "type": "registry:ui", "target": "@components/ballmac/prompt-input.tsx" } ], "categories": [ "ai" ], "meta": { "schema": 1, "tier": "free", "tags": [ "ai", "chat", "input", "textarea", "composer", "attachments", "llm" ], "version": "1.0.0", "updated": "2026-09-28", "ai": { "summary": "The message composer for chat UIs. …} status onStop> renders a textarea, attachment chips and a send button by default; compose PromptInputTextarea, PromptInputAttachments, PromptInputToolbar, PromptInputAttachButton and PromptInputSubmit for custom layouts.", "whenToUse": [ "The input at the bottom of an AI chat", "A 'describe what you want' box that sends to a model and can be stopped mid-response", "Composer that needs a model picker or other controls next to the send button" ], "whenNotToUse": [ "Plain multi-line form fields (use textarea)", "Search boxes with results as you type (use an input or command menu)" ], "composesWith": [ "ai-chat", "ai-message" ], "a11y": [ { "keys": "Enter", "action": "Sends the message (ignored while an IME composition is active)" }, { "keys": "Shift + Enter", "action": "Inserts a new line" }, { "keys": "Tab", "action": "Moves to the attach button, toolbar controls and send/stop" } ], "customization": [ "value/onValueChange for controlled text (clear it yourself in onSubmit) or defaultValue for uncontrolled (clears itself)", "files/onFilesChange for controlled attachments; nothing is uploaded — send the File objects wherever you need", "status: idle | streaming. With the AI SDK map status 'submitted' and 'streaming' to 'streaming'", "PromptInputTextarea maxHeight (px, default 200) caps the auto-grow", "PromptInputAttachButton accept and multiple mirror ", "usePromptInput() exposes { value, setValue, files, submit, status } to custom toolbar controls" ] }, "examples": [ "prompt-input-demo", "prompt-input-attachments" ], "url": "https://ui.ballmac.com/components/prompt-input" } }, { "name": "prompt-input-demo", "type": "registry:example", "title": "Prompt Input: Default", "description": "Default example of Prompt Input.", "registryDependencies": [ "https://ui.ballmac.com/r/prompt-input.json" ], "files": [ { "path": "registry/examples/prompt-input-demo.tsx", "type": "registry:example", "target": "@components/ballmac/examples/prompt-input-demo.tsx" } ], "categories": [ "ai" ], "meta": { "example": true, "of": "prompt-input", "tier": "free" } }, { "name": "prompt-input-attachments", "type": "registry:example", "title": "Prompt Input: With attachments", "description": "With attachments example of Prompt Input.", "registryDependencies": [ "https://ui.ballmac.com/r/prompt-input.json" ], "files": [ { "path": "registry/examples/prompt-input-attachments.tsx", "type": "registry:example", "target": "@components/ballmac/examples/prompt-input-attachments.tsx" } ], "categories": [ "ai" ], "meta": { "example": true, "of": "prompt-input", "tier": "free" } }, { "name": "pulse-button", "type": "registry:ui", "title": "Pulse Button", "description": "A call-to-action button that sends soft rings outward to ask for attention, calming as soon as it is hovered or focused, and switchable off once the person acts.", "author": "Ballmac ", "dependencies": [ "motion@^12" ], "registryDependencies": [ "utils", "https://ui.ballmac.com/r/button.json" ], "files": [ { "path": "registry/ballmac/components/pulse-button.tsx", "type": "registry:ui", "target": "@components/ballmac/pulse-button.tsx" } ], "categories": [ "motion" ], "meta": { "schema": 1, "tier": "free", "tags": [ "button", "pulse", "attention", "cta", "notification" ], "version": "1.0.0", "updated": "2026-10-01", "ai": { "summary": "Label. Rings stop on hover and focus, and when active is false or the button is disabled.", "whenToUse": [ "Onboarding steps and 'try it now' prompts", "Live or record buttons" ], "whenNotToUse": [ "More than one per view", "Anything permanent: attention fades if it never stops" ], "composesWith": [ "button", "shiny-button", "status-dot" ], "a11y": [ { "keys": "Enter / Space", "action": "Activates like any button" }, { "keys": "Screen readers", "action": "Rings are aria-hidden" }, { "keys": "Reduced motion", "action": "A still faint ring replaces the pulse" } ], "customization": [ "tone", "rings", "duration", "active" ] }, "examples": [ "pulse-button-demo", "pulse-button-tones" ], "url": "https://ui.ballmac.com/components/pulse-button" } }, { "name": "pulse-button-demo", "type": "registry:example", "title": "Pulse Button: Attention ring", "description": "Attention ring example of Pulse Button.", "registryDependencies": [ "https://ui.ballmac.com/r/pulse-button.json" ], "files": [ { "path": "registry/examples/pulse-button-demo.tsx", "type": "registry:example", "target": "@components/ballmac/examples/pulse-button-demo.tsx" } ], "categories": [ "motion" ], "meta": { "example": true, "of": "pulse-button", "tier": "free" } }, { "name": "pulse-button-tones", "type": "registry:example", "title": "Pulse Button: Tones and states", "description": "Tones and states example of Pulse Button.", "registryDependencies": [ "https://ui.ballmac.com/r/pulse-button.json" ], "files": [ { "path": "registry/examples/pulse-button-tones.tsx", "type": "registry:example", "target": "@components/ballmac/examples/pulse-button-tones.tsx" } ], "categories": [ "motion" ], "meta": { "example": true, "of": "pulse-button", "tier": "free" } }, { "name": "radio-group", "type": "registry:ui", "title": "Radio Group", "description": "Single-choice radios with optional full-card labels, descriptions, and large pointer targets around Radix keyboard navigation.", "author": "Ballmac ", "dependencies": [ "radix-ui", "lucide-react" ], "registryDependencies": [ "utils", "https://ui.ballmac.com/r/direction.json" ], "files": [ { "path": "registry/ballmac/components/radio-group.tsx", "type": "registry:ui", "target": "@components/ballmac/radio-group.tsx" } ], "categories": [ "forms" ], "meta": { "schema": 1, "tier": "free", "tags": [ "choice", "form", "radio", "radix" ], "version": "1.0.0", "updated": "2026-09-30", "ai": { "summary": "Choose exactly one option in a form; use descriptive card labels when choices need context.", "whenToUse": [ "A few mutually exclusive preferences", "Pricing or delivery options with explanations" ], "whenNotToUse": [ "Many options; use select", "Multiple selections; use checkbox or toggle-group" ], "composesWith": [ "label" ], "a11y": [ { "keys": "Tab", "action": "Enters the radio group" }, { "keys": "Arrow keys", "action": "Moves and selects among enabled choices" }, { "keys": "Space", "action": "Selects the focused choice" } ], "customization": [ "controlled or uncontrolled value", "card or compact radio labels", "disabled options" ] }, "examples": [ "radio-group-demo", "radio-group-states" ], "url": "https://ui.ballmac.com/components/radio-group" } }, { "name": "radio-group-demo", "type": "registry:example", "title": "Radio Group: Delivery frequency", "description": "Delivery frequency example of Radio Group.", "registryDependencies": [ "https://ui.ballmac.com/r/radio-group.json" ], "files": [ { "path": "registry/examples/radio-group-demo.tsx", "type": "registry:example", "target": "@components/ballmac/examples/radio-group-demo.tsx" } ], "categories": [ "forms" ], "meta": { "example": true, "of": "radio-group", "tier": "free" } }, { "name": "radio-group-states", "type": "registry:example", "title": "Radio Group: Compact choices", "description": "Compact choices example of Radio Group.", "registryDependencies": [ "https://ui.ballmac.com/r/radio-group.json" ], "files": [ { "path": "registry/examples/radio-group-states.tsx", "type": "registry:example", "target": "@components/ballmac/examples/radio-group-states.tsx" } ], "categories": [ "forms" ], "meta": { "example": true, "of": "radio-group", "tier": "free" } }, { "name": "rainbow-button", "type": "registry:ui", "title": "Rainbow Button", "description": "A button with a border of theme colors circling it and a glow on hover, built on the Ballmac button so every size, variant and focus state still works.", "author": "Ballmac ", "dependencies": [ "motion@^12" ], "registryDependencies": [ "utils", "https://ui.ballmac.com/r/button.json" ], "files": [ { "path": "registry/ballmac/components/rainbow-button.tsx", "type": "registry:ui", "target": "@components/ballmac/rainbow-button.tsx" } ], "categories": [ "motion" ], "meta": { "schema": 1, "tier": "free", "tags": [ "button", "gradient", "border", "glow", "cta" ], "version": "1.0.0", "updated": "2026-10-01", "ai": { "summary": "Use like