Convert a screenshot, mockup, or wireframe image into framework-specific component code. Supports React, Next.js, Vue, Angular, Svelte, HTML, and UI libraries like shadcn/ui.
MIT
660,737 tools. Updated 2026-10-15 21:42
"shadcn/ui" matching MCP tools:
- Scan React/Next codebases for exported UI components, Tailwind/shadcn signals, and Figma↔code name mappings so you can reuse existing components before building a Figma design.MIT
- Generate UI components for React, Vue, Angular, Svelte, or HTML with style audit and design context awareness. Integrates with libraries like shadcn/ui, Radix UI, and more.MIT
- Retrieve all components from a specified UI library, such as shadcn, radix, headlessui, material, or primevue, for use in project integration.MIT
- Generate UI components from popular libraries like shadcn, radix, headlessui, or material UI with support for themes, custom props, tests, stories, and framework-specific output.MIT
- Evaluate a UI component need and receive a structured verdict on whether to use existing shadcn/ui or 21st.dev components or build a custom solution, guided by real-app references.MIT
Matching MCP Servers
- AlicenseAqualityDmaintenanceHelps AI assistants access shadcn/ui component documentation and examples through a TypeScript-based MCP server that provides reference information for component details, usage examples, and search capabilities.4507 npm60MIT
- AlicenseAqualityDmaintenanceProvides AI assistants with comprehensive access to shadcn/ui v4 components, blocks, demos, and metadata across React, Svelte, Vue, and React Native, enabling efficient component integration and code generation.105,131 npmMIT
Matching MCP Connectors
Mlola UI components, tokens and design rules for coding agents, with a markup checker
Discover and install Aura UI Blade components for Laravel, Livewire and Tailwind CSS 4.
- List all shadcn/ui components already installed in the project, helping you track existing dependencies and decide which components to add next.MIT
- Browse all available shadcn/ui component templates to quickly find and select the right UI template for your project.MIT
- Install any shadcn/ui component and its dependencies into your project. Preview the exact changes with dryRun before committing.MITDestructive
- Retrieve the source code for any shadcn/ui v4 component by providing its name. Use this to get the exact implementation for your project.MIT
- Retrieve the source code for a specified shadcn/ui v4 component by providing its name. This enables direct integration into your project without manual searching.MIT
- Retrieves the source code for a specific shadcn/ui v4 component by name, so AI assistants can inspect and reuse UI building blocks in development workflows.MIT
- Retrieve source code for a shadcn/ui v4 block by specifying its name. Optionally include component files for complex blocks.MIT
- Diagnose UI quality issues in shadcn/Tailwind apps from code or URL. Get scores, affected files, and fix categories to plan UI improvements.MIT
- Retrieve the source code for any shadcn/ui v4 block, such as calendar-01 or dashboard-01, to integrate ready-made UI components into your project.MIT
- Browse available shadcn/ui components from the official registry. Filter by category to find components that match your project needs.MIT
- Check a shadcn/ui component's dependencies, files, and installation status to verify what's needed before adding it to the project.MIT
- Remove installed shadcn/ui components from your project by deleting their files. Clean up unused components to keep your codebase organized.MITDestructive
- Retrieve source code for a specific shadcn/ui v4 block, such as calendar-01 or dashboard-01, optionally including component files for complex layouts.MIT
- Retrieve demo code showing how to use a specific shadcn/ui v4 component. Enter the component name to see its usage example.MIT
- Get demo code for any named shadcn/ui v4 component to see correct usage. Pass the component name and receive a ready-to-use example.MIT