Roadmap

Digital menu blocks for presenting food and drink offerings with categories, descriptions, and prices.

Chat UI Widgets is a collection of small chat interface blocks and components for adding messaging features to any app. It focuses on reusable pieces such as message bubbles, typing indicators, status badges, and attachment previews, all styled with Shadcn UI and Tailwind. The widgets ship in React, Vuejs, and Svelte versions.

Resume CV Templates is a collection of resume and CV page blocks for presenting work experience, skills, and education in a clean, professional layout. Each template is composed from Shadcn UI components and Tailwind utility classes, so typography and spacing stay consistent in light and dark themes. Every template comes in React, Vuejs, and Svelte versions.

Dashboard Page Layouts is a collection of admin layout blocks that provide the structural shell for dashboard applications, including sidebars, headers, and content areas. Each layout is assembled from Shadcn UI components with responsive Tailwind grids, so panels and navigation adapt cleanly from mobile to desktop. They serve as ready starting points for admin panels, shipping in React, Vuejs, and Svelte versions.

Directory Lists is a collection of listing blocks for browsing structured collections of people, companies, or resources. Each block pairs Shadcn UI cards, avatars, and inputs with Tailwind layouts to support searching, filtering, and scanning long lists. All the blocks are available in React, Vuejs, and Svelte versions.

Empty States is a collection of placeholder UI blocks shown when a screen has no data, content, or search results to display. Each block uses Shadcn UI's Empty component primitives with Tailwind styling to pair an icon or illustration with a clear title, description, and optional action. Drop them into React apps wherever lists or dashboards can be empty, or use the matching Vuejs and Svelte versions.

Error Pages is a collection of full-page blocks for HTTP error screens like 404 not found, 503 service unavailable, and restricted access. Each page uses Shadcn UI components and Tailwind typography to explain the problem clearly and route users back to safety with a prominent action. Built for React and Next.js error boundaries, with Vuejs and Svelte versions available for other routers.

File Upload Forms is a collection of form blocks that let users select and submit files from their device. Each block builds on Shadcn UI inputs, buttons, and progress components with Tailwind styling, covering patterns like drag and drop zones, file lists, and upload feedback. Ready for React forms, with matching Vuejs and Svelte versions.

Hero Sections is a collection of landing page blocks for the first screen visitors see, pairing bold headlines with supporting copy and calls to action. Each block is assembled from Shadcn UI components and Tailwind utilities, so typography, spacing, and dark mode stay consistent out of the box. Every block comes in React, Vuejs, and Svelte versions built on the same design.

Login Pages is a collection of authentication blocks where users enter their credentials to access an account. Each layout is composed from Shadcn UI form components, from simple centered cards to split-screen designs, all styled with Tailwind and ready for dark mode. The collection ships in React, Vuejs, and Svelte versions.

Media Galleries is a collection of layout blocks for displaying images, videos, and other media in an organized grid. Each gallery uses Shadcn UI components and responsive Tailwind columns to keep thumbnails, captions, and previews tidy across screen sizes. Available in React, Vuejs, and Svelte versions built on the same design.

Podcast Apps is a collection of audio streaming interface blocks for browsing shows and playing episodes. Each block builds on Shadcn UI components and Tailwind styling to cover player controls, episode lists, and show details. A practical starting point for audio platforms, available in React, Vuejs, and Svelte versions.

Rich Text Editors is a collection of WYSIWYG editing blocks for creating and formatting content with styles, links, and media. Each block pairs a formatting toolbar with an editable area, built from Shadcn UI components and styled with Tailwind. A strong starting point for CMS platforms and note-taking tools, offered in React, Vuejs, and Svelte versions.

Roles & Permissions is a collection of access control blocks for managing user roles, permission sets, and authorization levels in an admin dashboard. Each block combines Shadcn UI components with Tailwind styling to keep role tables, permission toggles, and member lists consistent with the rest of your app. The blocks ship in React, Vuejs, and Svelte versions.

SaaS Landing Pages is a collection of marketing page blocks for presenting a software product, from hero and features down to pricing and call to action. Every section is assembled from Shadcn UI components and Tailwind utilities, so the whole page stays consistent and theme friendly. Use the blocks as-is in React, or choose the matching Vuejs or Svelte editions.

Survey Forms is a collection of form blocks for collecting feedback, opinions, and structured data from users. Each block leans on Shadcn UI inputs, radio groups, and selects with Tailwind layouts to keep multi-question surveys readable. Every block ships in React, Vuejs, and Svelte versions.

Notifications is a collection of alert and update blocks for showing user activity, mentions, and system messages in one place. The blocks use Shadcn UI avatars, badges, and tabs with Tailwind styling to separate read and unread items clearly. The whole collection comes in React, Vuejs, and Svelte versions.

Sticky Notes is a collection of digital sticky note blocks for jotting down reminders, quick thoughts, and lightweight to-dos. The blocks lean on Shadcn UI components and Tailwind utilities to recreate the familiar colorful note board in a clean, theme-aware interface. Shipped in React, Vuejs, and Svelte versions.

Two Step Verifications is a collection of authentication blocks for confirming a user's identity with a second verification step. The blocks pair Shadcn UI form components with Tailwind layouts for entering one-time codes sent by email, SMS, or an authenticator app. Each block is shipped in React, Vuejs, and Svelte versions.

Updates Pages is a collection of changelog and product update blocks for announcing new features, fixes, and releases. Each block presents dated entries with Shadcn UI cards and badges in a readable Tailwind layout that works in light and dark themes. Every block is published in React, Vuejs, and Svelte versions.

User Cards is a collection of profile card blocks that display brief user information such as name, avatar, and role. The blocks combine Shadcn UI avatars, badges, and buttons with Tailwind spacing to fit team pages, member directories, and dashboards. The cards ship in React, Vuejs, and Svelte versions.

Video Call Chats is a collection of video conferencing interface blocks with participant grids and side-panel messaging. The blocks use Shadcn UI components and Tailwind utilities to lay out video tiles, call controls, and a live chat thread. Provided in React, Vuejs, and Svelte versions.

Quiz Apps is a collection of interactive quiz and assessment blocks for building question flows with scoring and results. Each block uses Shadcn UI components styled with Tailwind to handle question cards, answer options, progress, and result summaries. Each block is ready in React, Vuejs, and Svelte versions.

Waitlist is a full-page signup block with an animated WebGL aurora background, gradient headline, and a single email capture form. The form combines Shadcn UI form and input components with React Hook Form and Zod validation, showing a loading spinner on submit and a success state once the user joins. Social proof avatars, a joined counter, and perk highlights like early access round out the Tailwind layout. Use it as a React landing page, or drop in the Vuejs or Svelte version.

Product List Table is an admin style product list block built on TanStack Table and Shadcn UI. It renders a digital product catalog as a sortable data table with name, price, status, total sales, and total revenue columns, inline SVG sparklines for revenue trends, and per row share and action menus. The toolbar holds a keyword search, single select category and status filter dropdowns, and a column visibility menu, and when rows are multi selected the search swaps out for a bulk action bar with publish, duplicate, archive, and delete buttons. An Add Product button sits top right, pagination runs along the footer, and the table scrolls horizontally on mobile. Available in React, Vuejs, and Svelte versions.

Product Grid is a storefront style product list block with a centered Our Products hero, a rounded pill category filter row, and a responsive card grid built from Shadcn UI components. Each card shows a star rating, a wishlist heart toggle, a square product photo, the name and price, and a round add to cart button, all on a soft muted surface that adapts to dark mode. Category filtering runs on simple local state, the grid collapses from three columns to one on mobile, and every color comes from the theme tokens. Available in React, Vuejs, and Svelte versions.

Real Estate Admin Dashboard is a full-page property management dashboard block with a topbar layout: a pill navigation with an active state, message and notification popovers, and a user menu, built entirely from Shadcn UI components in the default neutral theme. Four KPI stats with trend badges sit above a property distribution donut with a hatched segment, a sales overview chart with a working period selector, and a commission bar chart with a highlighted month. A top performing listings table filters by time range, expands with a See All toggle, and gives every row an actions menu. Light by default with dark mode support, responsive down to phones. Use it in React, or take the matching Vuejs or Svelte version.

Event Calendar With Sidebar is a full-page calendar block that pairs a month view with the official Shadcn UI sidebar-12 layout: a collapsible sidebar holding a date picker, checkbox calendar lists, a user menu, and a New Calendar action. Every control is wired up: toggling a calendar filters the colored event chips in the month grid, the sidebar date picker and the header arrows drive the visible month, clicking a day selects it, and the New Calendar dialog adds a working calendar with its own color. Built from Shadcn UI components with Tailwind classes, light and dark mode ready, responsive down to phones. Use it in React, or take the matching Vuejs or Svelte version.

Minimal Calendar App is a full-page personal calendar block with an editorial, borderless layout centered on the screen: a compact day summary with serif typography on the left and an airy month grid with no cell borders on the right. The selected day sits in a filled circle in the default Shadcn UI theme color, and every day that holds a to-do or an event gets a small dot under its number, derived straight from the data. A working month dropdown and a Create dialog that adds to-dos to the selected day keep the controls functional, and the to-do and event lists follow whichever day you click. Built with Shadcn UI components and Tailwind classes, dark mode ready and responsive down to phones. Use it in React, or take the matching Vuejs or Svelte version.

Day View Calendar App is a full-page calendar block locked to day mode: a slim icon rail, a greeting panel with a mini month picker, and an indigo-headed day timeline with hour lines, soft colored event blocks, and a pink current time indicator. Picking a day in the mini month swaps the timeline to that date, the arrows page through months, overlapping events split into side by side lanes, and the CREATE button opens a dialog that drops a new timed event straight onto the schedule. Assembled from Shadcn UI components with Tailwind classes, dark mode ready, responsive down to phones. Use it in React, or take the matching Vuejs or Svelte version.

Search Result Map View is a full-page search results block that pairs a scrollable listing column with a real interactive map built on mapcn and MapLibre. Every listing renders as a photo and price marker at its actual coordinates, clicking a marker opens a popup card and highlights the matching listing, and a working price filter, sort menu, favorite hearts, and a list to grid switch drive the column with plain React state. The map pans, zooms, and switches between light and dark styles with the theme. Built from Shadcn UI components with Tailwind in the default theme. Use it in React, or take the matching Vuejs or Svelte version.

CRM Admin Dashboard is a full-page dashboard block for sales and customer success teams with a cool slate and blue theme. It combines a Shadcn UI sidebar with tile navigation, collapsible groups, and a notifications popover, a greeting hero with headline stats and an SVG customer satisfaction gauge, a schedule panel with tabbed meetings, a Recharts lead to deal conversion trend, an account status bar breakdown, quick action tiles, and a searchable, sortable customer accounts table with CSV export, all styled with Tailwind semantic tokens so it supports dark mode and stacks cleanly on mobile. Use it in React as a starting point, or take the matching Vuejs or Svelte version.

E-Commerce Admin Dashboard is a full-page store dashboard block built from Shadcn UI components in the default black and neutral theme. It pairs a sidebar with a promo card, a welcome header with search, cart, and notification popovers, three KPI stat cards, a Recharts conversion rate line chart and sales by month bar chart with working period filters, a customer inquiries list, a best sellers list, and a filterable, sortable inventory table, all styled with Tailwind semantic tokens so it supports dark mode and stacks cleanly on mobile. Use it in React as a starting point, or take the matching Vuejs or Svelte version.

Project Management Admin Dashboard is a full-page team dashboard block built from Shadcn UI components in the default black and neutral shadcn theme. It combines a sidebar with workspace switcher and grouped navigation, a command palette search, notifications, a New Project split button, four KPI cards with sparklines, a revenue area chart, a project status donut, tasks due, recent activity, upcoming deadlines, and a team workload bar chart, every control working and the layout stacking cleanly on mobile. Use it in React as a starting point, or take the matching Vuejs or Svelte version.

Project Management Admin Dashboard is a full-page agency dashboard block with a double sidebar: an icon rail plus a grouped navigation panel with a workspace switcher, built entirely from Shadcn UI components in the default neutral theme. A filter bar with working period, tag, and team menus drives a recent billing chart with a Gross and Profit toggle, an upcoming milestones capsule chart, a sprint activity section with schedule lists and a delivery pipeline funnel, and a selectable active projects table with status badges. Light by default with dark mode support, responsive down to phones. Use it in React, or take the matching Vuejs or Svelte version.

Activation Email is a transactional email template block that asks a new user to confirm their address and activate their account. It is built with react-email components (Html, Head, Body, Container, Section, Row, Column, Heading, Text, Button, Img, Link) and styled through the react-email Tailwind wrapper with a small custom theme that mirrors the shadcn/ui zinc palette, plus a mobile breakpoint for narrow clients. The example renders the template to static HTML on the server with @react-email/render and previews it in an iframe, so it is ready to wire up to Resend or Nodemailer in a React or Next.js app, with matching Vuejs and Svelte versions available.

Feature Announcement Email is a marketing email template block for sending release notes and product update newsletters. It stacks a headline section, reusable FeatureBlock cards with an image, title, copy, and call-to-action button, a two-row highlights list, and a closing dashboard CTA, all composed from react-email components and styled with the react-email Tailwind wrapper using a zinc theme and a mobile breakpoint. The template is rendered to static HTML on the server with @react-email/render and previewed in an iframe, ready to send through Resend or Nodemailer from a React or Next.js app, with Vuejs and Svelte versions available as well.

Password Reset Email is a transactional email template block that delivers a one-time link for changing a forgotten password. It is composed from react-email components (Html, Head, Body, Container, Section, Row, Column, Heading, Text, Button, Img, Link) and styled with the react-email Tailwind wrapper using a zinc theme and a mobile breakpoint, with a Change password button and a reassurance note that nothing changes until the link is used. The example renders the template to static HTML on the server with @react-email/render and previews it in an iframe, ready to send through Resend or Nodemailer from a React or Next.js app, with Vuejs and Svelte versions available too.

Subscription Confirmation Email is a transactional email template block that confirms a new paid plan with the plan name, price, billing cycle, and next charge date. It is composed from react-email components (Html, Head, Body, Container, Section, Row, Column, Heading, Text, Button, Img, Link) and styled with the react-email Tailwind wrapper using a zinc theme and a mobile breakpoint, taking seven props so the same template works for any plan or billing interval. The example renders the template to static HTML on the server with @react-email/render and previews it in an iframe, ready to send through Resend or Nodemailer from a React or Next.js app, with Vuejs and Svelte versions available as well.

Welcome Email is an onboarding email template block that greets a new user with a hero image, a getting-started checklist, two feature highlights, and a dashboard call to action. It is composed from react-email components (Html, Head, Body, Container, Section, Row, Column, Heading, Text, Button, Img, Link) and styled with the react-email Tailwind wrapper using a zinc theme and a mobile breakpoint that stacks the two-column sections on phones. The example renders the template to static HTML on the server with @react-email/render and previews it in an iframe, ready to send through Resend or Nodemailer from a React or Next.js app, with Vuejs and Svelte versions available as well.

Verify Email is a transactional email template block that confirms a new email address with a six-digit one-time code and a one-click Verify email button. It is composed from react-email components (Html, Head, Body, Container, Section, Row, Column, Heading, Text, Button, Img, Link) and styled with the react-email Tailwind wrapper using a zinc theme, a monospace code box with wide letter spacing, an expiry note, and a mobile breakpoint. The example renders the template to static HTML on the server with @react-email/render and previews it in an iframe, ready to send through Resend or Nodemailer from a React or Next.js app, with Vuejs and Svelte versions available as well.

Order Confirmation Email is a transactional email template block that confirms a purchase with the order number, a list of line items with thumbnails and quantities, a subtotal, tax, shipping, and total summary, and a Track your order button. It is composed from react-email components (Html, Head, Body, Container, Section, Row, Column, Text, Button, Img, Link) and styled with the react-email Tailwind wrapper using a light tech variant of the zinc theme, rounded item tiles, and a mobile breakpoint, with all order data passed as props. The example renders the template to static HTML on the server with @react-email/render and previews it in an iframe, ready to send from a React or Next.js store through Resend or Nodemailer, with Vuejs and Svelte versions available as well.

Restaurant Menu is a full-page digital menu block for displaying dishes, descriptions, and prices by category. It is designed with Shadcn UI components in a clean Tailwind layout, with room for dietary labels and featured items. Ideal for restaurant websites, food ordering flows, and delivery platforms, with the menu available in React, Vuejs, and Svelte versions.

Website Analytics Admin Dashboard is a full-page dashboard block for tracking site metrics in a classic admin layout. It pairs a collapsible Shadcn UI sidebar and header with stat summary cards, an interactive Recharts area chart with time-range filtering, and a data table powered by TanStack Table with dnd-kit row reordering and Zod-typed data. The whole screen is styled with Tailwind and supports dark mode through next-themes. Drop it into a React app as a starting point, or grab the matching Vuejs or Svelte version.