Sales & Marketing Dashboard by shadcncraft

LinkshadcncraftResource

shadcncraft has released a complete sales and marketing dashboard application built with Next.js, React, and shadcn/ui, featuring a 1:1 match with Figma. The package includes 23 reusable dashboard blocks covering metrics, funnels, and pipelines, alongside AI guideline integration via the Model Context Protocol (MCP).

Key points

  1. Complete application template using Next.js and React, matched 1:1 with Figma files.
  2. Features 23 modular dashboard blocks including metric cards, attribution breakdowns, funnels, and deal tables.
  3. Provides dedicated views for campaigns, analytics, lead tracking, customer profiles, and settings.
  4. Built for production using standard shadcn/ui component architecture.
  5. Introduces UI Rules via MCP to supply AI coding tools with brand styles and component guidelines.

Why it matters

This resource bridges the gap between Figma design assets and React implementations. Furthermore, the inclusion of MCP-compatible design rules highlights a practical approach to guiding AI code generation tools with structured component conventions.

Analysis

shadcncraft provides a production-grade UI kit that avoids rigid lock-in by using independent shadcn/ui blocks. Rather than forcing teams to adopt an entire boilerplate, the 23 modular blocks can be installed individually. The addition of MCP-based UI Rules addresses modern AI-assisted workflows, giving autonomous coding agents direct access to the application's design system rules.

Mentioned links

Found in

Summary generated by AI (Gemini 3.8 Flash, 27 September 2026). It may contain errors – the original source is authoritative.

Related entries

Similar in content, found by the AI search.

  • Link:Ajay Patel, Anand Patel

    Shadcn Studio: Components, UI Blocks, and Templates for shadcn/ui

    Shadcn Studio provides pre-built UI components, blocks, and templates for shadcn/ui, supporting both Radix UI and Base UI. In addition to copy-paste code and CLI installation, the platform features AI tools such as an MCP server, theme generation, and a Figma plugin.

    AI & LLMs· Tool

  • Link:Beste

    Beste UI: Component and Block Library for shadcn/ui with MCP Integration

    Beste UI is a library offering over 2,000 pre-built blocks, pieces, and components for Tailwind CSS and shadcn/ui in React and Next.js applications. Distributed without runtime dependencies, it enables direct code ownership and supports AI agent workflows via the Model Context Protocol (MCP).

    AI & LLMs· Tool

  • Link:21st Labs, Inc.

    21st.dev: Community UI Registry for React and shadcn Themes

    21st.dev is an interface registry featuring over 12,000 React components, templates, and themes. Designed around Tailwind CSS and shadcn/ui conventions, components can be added directly via prompts into AI coding assistants like Claude Code, Cursor, and Lovable.

    AI & LLMs· Resource

  • X post:Marcel

    Next.js CRM Dashboard Built with Claude Fable 5.1 and Design Skills

    Marcel (@marcelkargul) demonstrated a CRM dashboard built in Next.js over roughly two days. The interface was manually designed in Figma first, with Claude Fable 5.1 and two specialized agent skills assisting the development implementation.

    7.9kbookmarks731.4kviews

    AI & LLMs· Demo

  • Repository:shadcn-ui/chatbot-template

    shadcn/ui Chatbot Template: Minimal AI Chat UI with Vercel AI Gateway

    The official chatbot template from shadcn/ui provides a lean reference implementation for AI chat applications. It integrates Next.js, the Vercel AI SDK, and UI components from the shadcn ecosystem, powered by the Vercel AI Gateway.

    910starsTypeScript

    AI & LLMs· Tool

Back to the knowledge base

Let's talk about your project

Get in touch

Locations

  • Mattersburg
    Johann Nepomuk Bergerstraße 7/2/14
    7210 Mattersburg, Austria
  • Vienna
    Ungargasse 64-66/3/404
    1030 Wien, Austria

Parts of this content were created with the assistance of AI.