Skip to main content
Glama
593,138 tools. Updated 2026-09-20 17:42

"Beautiful Shadcn UI Components and Design Examples" matching MCP tools:

  • MANDATORY FIRST CALL before writing any @marmoui/ui code in this session. Returns a step-by-step generation checklist (which tools to call, in what order), critical rules (no namespace sub-components, PageSection is self-closing, no Sidebar export), component patterns, and ICON LIBRARY RULES. Pass iconLibrary (default "phosphor"; also "material" | "lucide" | "tabler" | "heroicons" | "feather") to get that library's import source, icon name map, and weight/style mapping — and pass the SAME value to review_generated_code so it enforces it. Ask the user which icon library they want before writing UI code. Call topic="patterns" to get the generation checklist specifically.
    ConnectorNo auth
  • MANDATORY FIRST CALL before writing any @marmoui/ui code in this session. Returns a step-by-step generation checklist (which tools to call, in what order), critical rules (no namespace sub-components, PageSection is self-closing, no Sidebar export), component patterns, and ICON LIBRARY RULES. Pass iconLibrary (default "phosphor"; also "material" | "lucide" | "tabler" | "heroicons" | "feather") to get that library's import source, icon name map, and weight/style mapping — and pass the SAME value to review_generated_code so it enforces it. Ask the user which icon library they want before writing UI code. Call topic="patterns" to get the generation checklist specifically.
    ConnectorNo auth
  • Fetch a COMPLETE, production-quality reference app (schemas.py + config.py + setup.py + ui/app.js) to copy patterns from — the single biggest lever for app quality. archetype='index' (default) lists the available archetypes with per-file byte sizes; pick the one closest to your app ('commerce-marketplace' | 'service-booking' | 'ops-dashboard' | 'multitenant-portal' | 'saas-billing') and fetch it BEFORE authoring your UI. These are real 'stunning' apps; mirror how they compose the SDK components, art-direct the landing page, and structure schemas. Optional file= to fetch just one file ('schemas.py' | 'config.py' | 'setup.py' | 'ui/app.js'). Responses are PAGED (~32KB/section): when the header says more:true, fetch the next section with offset=<next_offset> — never re-fetch from 0.
    ConnectorNo auth
  • WCAG contrast ratio between a foreground and background color, for accessibility. Both accept a hex, CSS name, RNV brand name, or saved-palette reference. Returns the ratio (1.0-21.0) plus pass/fail for AA and AAA at normal and large text sizes and for UI components. Read-only and deterministic, with no side effects. Use this for legibility and accessibility checks; to measure raw perceptual difference between two colors rather than readability use color_difference instead.
    ConnectorNo auth
  • WCAG contrast ratio between a foreground and background color, for accessibility. Both accept a hex, CSS name, RNV brand name, or saved-palette reference. Returns the ratio (1.0-21.0) plus pass/fail for AA and AAA at normal and large text sizes and for UI components. Read-only and deterministic, with no side effects. Use this for legibility and accessibility checks; to measure raw perceptual difference between two colors rather than readability use color_difference instead.
    ConnectorNo auth
  • Use when the user asks how a public board is wired, what a component (e.g. U1) connects to, or which pins are on a net (e.g. GND), in that design. Returns the board's latest geometry-free connectivity. No focus returns a bounded overview (components + a net index); ref returns one component and the nets it connects to with the other pins on those nets; net returns the pins on that net. These are in-design connections, not an authoritative manufacturer pinout, and a very large design may be truncated (the response flags this). Prefer a focused ref or net over repeated overviews. Use get_bom for purchasing and read_file for raw source. If nets are still computing, continue with the components shown and try again shortly rather than inferring connectivity.
    ConnectorOAuth

Matching MCP Servers

Matching MCP Connectors

  • Discover and install Aura UI Blade components for Laravel, Livewire and Tailwind CSS 4.

  • Remote Shadcn UI MCP Server for Claude, Cursor, v0, Lovable & Bolt

  • LEGACY-ONLY — DO NOT CALL WHEN create-design IS AVAILABLE. If create-design is in the tool list, you MUST NOT call this tool. Call create-design instead. All instructions below apply only when create-design is absent from the tool list. A failed create-design call does not make it unavailable. Generate professionally designed content in Canva including visual designs (posters, social media posts, presentations, flyers) and text-based documents (memos, articles, newsletters, proposals, reports, business plans, requirements documents). Each extra slide adds significant latency (e.g. 15 slides can take 3x longer than 5). Keep to 1-5 slides unless the user explicitly requests more. Use this tool when the user asks you to write, create, generate, or draft ANY document or visual design. Examples: - "Write a memo..." → use this tool to create a Canva Doc - "Generate a business proposal..." → use this tool to create a Canva Doc - "Draft a product overview..." → use this tool to create a Canva Doc DO NOT use this tool for fixed-format visual designs when prepare-design-generation is available. Do NOT use this tool when the user just wants advice, explanations, or information. DO NOT use this tool when the user's message contains a URL and their intent is to create a design FROM that URL — use import-design-from-url instead. Use the 'query' parameter to tell AI what you want to create. The tool doesn't have context of previous requests. ALWAYS include details from previous queries for each iteration. The tool provides best results with detailed context. ALWAYS look up the chat history and provide as much context as possible in the 'query' parameter. Ask for more details when the tool returns this error message 'Common queries will not be generated'. The generated designs are design candidates for users to select from. Ask for a preferred design and use 'create-design-from-candidate' tool to add the design to users' account. The IDs in the URLs are not design IDs. Do not use them to get design or design content. When using the 'asset_ids' parameter, assets are inserted in the order provided. For small designs with few image slots, only supply the images the user wants. For multi-page designs like presentations, supply images in the order of the slides. The tool will return a list of generated design candidates, including a candidate ID, preview thumbnail and url. Before editing, exporting, or resizing a generated design, follow these steps: 1. call 'create-design-from-candidate' tool with 'job_id' and 'candidate_id' of the selected design 2. call other tools with 'design_id' in the response For presentations, target 1-5 slides by default (length: "short"). Format the query string with these sections in order (use the headers exactly): 1. **Presentation Brief** Include: * **Title** (working title for the deck) * **Topic / Scope** (1–2 lines; include definitions if terms are uncommon) * **Key Messages** (3–5 crisp takeaways) * **Constraints & Assumptions** (timebox, brand, data limits, languages, etc.) * **Style Guide** (tone, color palette, typography hints, imagery style) 2. **Narrative Arc** A one-paragraph outline of the story flow (e.g., Hook → Problem → Insight → Solution → Proof → Plan → CTA). Keep transitions explicit. 3. **Slide Plan** Provide numbered slides with **EXACT titles** and detailed content. For each slide, include all of the following subsections in this order (use the labels exactly): * **Slide {N} — "{Exact Title}"** * **Goal:** one sentence describing the purpose of the slide. * **Bullets (3–6):** short, parallel phrasing; facts, examples, or specifics (avoid vague verbs). * **Visuals:** explicit recommendation (e.g., "Clustered bar chart of X by Y (2022–2025)", "Swimlane diagram", "2×2 matrix", "Full-bleed photo of <subject>"). * **Data/Inputs:** concrete values, sources, or placeholders to be filled (if unknown, propose realistic ranges or example figures). * **Speaker Notes (2–4 sentences):** narrative details, definitions, and transitions. * **Asset Hint (optional):** reference to an asset by descriptive name or index if assets exist (e.g., "Use Asset #3: 'logo_dark.svg' as corner mark"). * **Transition:** one sentence that logically leads into the next slide. > Ensure the Slide Plan forms a **cohesive story** (each slide's Goal and Transition should support the Narrative Arc). **Quality checklist (the model must self-check before finalizing)** * Titles are unique, concise (≤ 65 characters), and action-or insight-oriented. * Each slide has 3–6 bullets; no paragraph walls; numbers are specific where possible. * Visuals are concrete (chart/diagram names + variables/timeframes); tables are used only when necessary. * Terminology is defined once and used consistently; acronyms expanded on first use. * Transitions form an intelligible narrative; the story arc is obvious from titles alone. * No placeholders like "[TBD]" or "[insert]". If data is unknown, propose realistic figures and label as "example values". * All required headers and subsections are present, in the exact order above.
    ConnectorOAuth
  • Search real product UI screens for design reference. Use this BEFORE designing any page/component so your output matches how the best-designed products actually solve the problem. Returns structured metadata (description, UX patterns, UI elements, colors, palette) plus an image_url. Section/component/recipe hits also carry `measured` and `retina` booleans — prefer measured:true, retina:true references (pixel-measured, high-res). `query` alone works well — the filters below are optional. A value outside the lists is treated as a HINT (it ranks, it does not exclude), and if the filters together match nothing they relax rather than hand you an empty list. So a near-miss costs you nothing; spelling one exactly is simply more precise. Args: query: free text, e.g. "fintech onboarding", "dark dashboard", "Linear". page_type: one of Billing · Camera / Capture · Changelog · Chat / Assistant · Checkout · Dashboard · Detail · Docs · Editor · Empty State · Feed · Integrations · Landing Page · Log In · Map · Onboarding · Paywall · Player · Pricing · Profile & Account · Search & Results · Settings · Sign Up · Stories. ux_pattern: e.g. "Dark Mode", "Filter & Sorting", "Stats / KPIs", "Data Table", "Command Palette", "Multi-step Form", "Sidebar Navigation", "Bento Grid", "Progressive Onboarding", "Empty State", "Kanban", "Master-Detail", "WYSIWYG". industry: one of AI · Analytics · Communication · Consumer · Creator · Data · Design · Dev Tools · E-commerce · Entertainment · Fintech · Health & Fitness · Productivity · Real Estate · Security · Travel & Local. platform: "Web", "iOS" or "Android" (mobile = official store-listing screens). limit: max results (1-40, default 12). kind: "page" (default, whole screens), "section" (page parts), "recipe" (live-decoded composed patterns: Command Palette, Navbar, Login, Data Table, Hero Effect...) or "component" (measured single components). section_type: narrows by type, e.g. kind="section" + "Pricing / Plans" / "Testimonial / Social Proof" / "Hero", or kind="recipe" + "Login" / "Navbar" / "Data Table" / "Hero Effect".
    ConnectorNo auth
  • Use this when the user wants Lemonvite's design engine to create the invitation artwork — because this assistant cannot produce images itself, or because the user asked for a Lemonvite design. Describe the look in design_brief (theme, colours, mood, motifs); the event date, time and venue are lettered onto the design automatically unless include_event_details is false. A reference_image from the conversation guides the engine's style. Each call spends one of the host's design generations (new accounts start with 5; every purchased publish credit adds 5) and REPLACES the current artwork (the previous design stays in the event's design history on the website), so confirm with the user before calling it. If this assistant already made an image in the conversation, attach it with invitation_image on lemonvite_update_invitation instead. Never call it merely because designs or themes are being discussed.
    Connector
    Destructive
    OAuth
  • Use this when the author asks to show a post card inside the chat or choose publication controls there. After search_posts or search_post_drafts, pass the found post ID as postId. Renders the MCP Apps UI with preview, text editing and scheduling. A screenshot or preview_post URL is not this UI. Opens no public link and never publishes or schedules on its own. If unavailable, refresh the connection's tool metadata; clients without UI retain text/tool workflows.
    ConnectorNo auth
  • Returns the MCP knowledge version: gitSha, indexedAt, componentCount, patternCount, uptimeSeconds. Call this ONCE per session before generating UI code so you know how fresh the design-system data is. Cheap to call. If gitSha is "unknown" or indexedAt is far in the past, surface that to the user before relying on the data.
    ConnectorNo auth
  • Returns the MCP knowledge version: gitSha, indexedAt, componentCount, patternCount, uptimeSeconds. Call this ONCE per session before generating UI code so you know how fresh the design-system data is. Cheap to call. If gitSha is "unknown" or indexedAt is far in the past, surface that to the user before relying on the data.
    ConnectorNo auth
  • The universal BUILD-KIT fetcher — the measured spec + code to reproduce a piece of UI. `recipe_type` selects which library across three families (all agent-ready through this one call): • COMPONENTS (decoded live from a real product's DOM — Mozaika's wedge): "Command Palette", "Dropdown Menu", "Dialog / Modal", "Login", "Data Table", "Onboarding Tour", "Navbar", "Logo Marquee", "Toast", "Date Picker", "Combobox" — returns the anatomy TREE (each node measured), the MOTION (open/close animation + easing a screenshot can't show), every STATE (empty/results/no-results/keyboard-selected), a webm of it running, and the design tokens. • EFFECTS (open-source WebGL hero backgrounds — Apache/MIT): "Hero Effect" → the shader's full config + fps + install command + license/NOTICE. • MOTION (open-source looping showcase templates — MIT): "Motion Showcase" → the template's full parameter surface + the exact Swiper/anime.js/Motion config + install. Use for "build a <thing> like <product>", e.g. get_recipe("Vercel", "Command Palette") or get_recipe("vanta", "Hero Effect"). A complete, uncopyable, measured build kit. Returns the available types if the requested one isn't found.
    ConnectorNo auth
  • Use this tool when the user wants to see service packages with fixed pricing and scope for a specific type of service. This tool returns standardized packages offered by service providers, including pricing tiers, deliverables, and delivery timelines. Do NOT use this tool for custom project questions (e.g. "How much would it cost to build a custom app?"). It only returns providers' pre-defined, fixed-price packages, not a quote tailored to a specific project; use recommend_service_providers for those needs instead. Examples: - "Show me SEO packages" -> service="SEO" - "What web design packages can I get for $5,000?" -> service="Web Design", budget=5000 - "Marketing packages from agencies in New York" -> service="Digital Marketing", location="New York" Use `page`/`limit` for pagination.
    ConnectorNo auth
  • Search the RoxyAPI knowledge base and get back ranked documentation snippets, each with a source URL. It covers API endpoints with their request and response fields, SDK usage for TypeScript, Python, PHP, C#, and the WordPress plugin, authentication and API keys, UI components, and step by step integration guides. Call this first whenever you need to integrate RoxyAPI into an app: to find which endpoint or SDK method to use, what parameters a call takes, how to authenticate, or how to wire a feature end to end. Pass the user question verbatim as `query`. If the first results miss, rephrase once and retry.
    ConnectorNo auth
  • Get the Designesy design-system contract — the canonical tokens, motion, acoustic, takt, cadence, typography, components, and verification rules that define what the Designesy org considers legitimate design. Use this when you need the actual contract values (token names and values, motion timings, accessibility rules) to author, check, or bind a design. When NOT to use: for a pass/fail score of a live site, use designesy_score; for an agent-skill-format export, use designesy_skill_md. Read-only — cached ~24h server-side. Returns the full contract JSON, or a single section when "section" is provided. Pass section to get one slice (e.g. "motion" for just the motion tokens) instead of the full contract — saves tokens when you only need one dimension.
    ConnectorNo auth
  • UI/UX guidelines and a review of a page against them. mode="guidelines" returns the principles — Nielsen's 10 heuristics, Hick's and Fitts's laws, WCAG 2.2, neurodiversity-inclusive design, motion and microinteractions (including when Lottie or Rive are worth their bundle cost), SVG craft and animation, light-first theming, lightness and responsiveness — optionally filtered by topic. Read them BEFORE designing or building UI. mode="review" statically reviews supplied HTML and CSS, or a URL, and reports what violates which principle. The review reads source and does not render it, so it cannot measure computed contrast, real target sizes, or where focus lands — it catches what is visible in the markup, which is most of what actually goes wrong.
    ConnectorNo auth
  • Lists every UI component in the project's design system, each with its name, source package, import path, and a short note on its intended use. Read-only and unpaginated: it returns the whole catalog across all packages assigned to the project, so expect a large response on big design systems. Use it to see what exists before building UI, and to get the exact component name other tools need. Do not use it to find a component by need - search_components ranks by description - and do not use it for props, examples, or Figma data, which only get_component returns. project_id is not a display filter: it selects the assigned packages, so two projects in one organization legitimately return different catalogs.
    ConnectorNo auth
  • List the UI components of Ionic Framework, optionally filtered by a keyword. Use this to find the component that fits a piece of UI before building it by hand, and to learn the custom element name it is used under. Use limit 100 to list every component. Returns `tag`, `description` and `url` per component, where `url` is the documentation page carrying its full API reference. Do not use this to read a component's API: call `get_doc_page` with the returned `url`. Do not use it for Capacitor plugins or native capabilities, which are covered by the Capacitor MCP server at https://capacitor-mcp.capawesome.io/mcp.
    ConnectorNo auth
  • Get a list of pages in a Canva design, such as a presentation. Each page includes its index and thumbnail. This tool doesn't work on designs that don't have pages (e.g. Canva docs). You must provide the design ID, which you can find using tools like `search-designs` or `list-folder-items`. You may also pass a full Canva design share URL directly (do not pre-extract just the ID) — any collaboration token embedded in the URL is needed to access a design shared via link and will be parsed and forwarded automatically. You can use 'offset' and 'limit' to paginate through the pages. Use `get-design` to find out the total number of pages, if needed.
    ConnectorOAuth
  • Fetch a Supero build reference. doc='skills' (default, the spec you MUST follow) | 'components' (the real pre-built SDK component/global catalog — read so you don't reinvent UI) | 'rubric' (the rich-app quality checklist — what 'stunning' means) | 'landing' (compact landing-page derivation + quality bar — MANDATORY read for public-facing apps) | 'integrations' (the EXACT services.* wrapper→service_id→args map for email/sms/stripe/ai/etc.) | 'web' / 'transactional' / 'workflows' / 'mobile' / 'services' (deep companion docs) | 'e2e_testing'. Returns the doc + a content version + the SDK floor to pin. Read 'skills' FIRST, then 'components' + a matching build_get_examples before you author UI. Docs are PAGED (~32KB/section): when the header says more:true, fetch the next section with offset=<next_offset> — never re-fetch from 0.
    ConnectorNo auth