A shadcn/ui dashboard app with 23 blocks in Figma and React
The Sales & Marketing Dashboard is here: a complete shadcn/ui dashboard app for Next.js and 23 reusable React blocks, with matching Figma designs.
You can start with the whole app or use its blocks to build a dashboard of your own. Either way, you have matching design and code to work with.
Explore the Sales & Marketing Dashboard.
From first visit to closed revenue
The app brings sales and marketing into one dashboard. See where traffic comes from, how campaigns perform, where leads convert, and how the sales pipeline turns into revenue.
Marketing views cover spend, channels, acquisition costs, landing pages, funnels, and attribution. Sales views cover revenue against targets, pipeline stages, deals, win rates, and rep performance.
Together, they give you a complete app to explore and adapt, with the layouts and components already working together.
23 reusable shadcn/ui dashboard blocks
Every dashboard has different priorities. The release includes 23 individual blocks, so you can choose the views that matter to your product:
- Core metrics: metric cards, a hero time series, and goal progress.
- Marketing performance: traffic by channel, channel performance, acquisition cost trends, paid media allocation, campaign performance, and top landing pages.
- Conversion and growth: a marketing funnel, attribution breakdown, growth simulator, and engagement heatmap.
- Sales performance: revenue vs. target, pipeline by stage, rep leaderboard, deals table, win rate, and deal velocity by segment.
- Customers and insights: a lead-to-customer funnel, leads by region, customer health scores, and an AI insights panel.
Browse all 23 dashboard blocks.
Matching Figma designs and React code
This is a release for both designers and developers. The complete app and its blocks are available in Figma and React, with a 1:1 match between the design and implementation.
Explore a layout in Figma, then work with its counterpart in code. Use the complete app as a shared reference, or bring individual blocks into your existing product.
Built on shadcn/ui and Next.js
The app uses Next.js and shadcn/ui, so you can work with familiar React components instead of learning a separate UI framework. Install individual dashboard blocks through the shadcn CLI, then adapt their layouts and content to your product.
New to the stack? Our shadcn/ui guide explains the component model, and the Figma UI kit gives designers the matching foundation.
Start with the app. Make it yours.
Use the full Sales & Marketing Dashboard as your starting point, or put together a different view from the 23 blocks. The same blocks can support a sales workspace, a campaign dashboard, or a broader analytics product.
