<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: Rakesh Nakrani</title>
    <description>The latest articles on DEV Community by Rakesh Nakrani (@rakesh_nakrani).</description>
    <link>https://dev.to/rakesh_nakrani</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F182292%2F9ffa2dd1-13e6-4137-a0b1-82b897fd91cf.jpg</url>
      <title>DEV Community: Rakesh Nakrani</title>
      <link>https://dev.to/rakesh_nakrani</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/rakesh_nakrani"/>
    <language>en</language>
    <item>
      <title>Starting a Next.js Project? These are the best Templates</title>
      <dc:creator>Rakesh Nakrani</dc:creator>
      <pubDate>Mon, 16 Mar 2026 11:16:01 +0000</pubDate>
      <link>https://dev.to/rakesh_nakrani/starting-a-nextjs-project-these-are-the-best-templates-developers-recommend-550f</link>
      <guid>https://dev.to/rakesh_nakrani/starting-a-nextjs-project-these-are-the-best-templates-developers-recommend-550f</guid>
      <description>&lt;p&gt;When starting a new Next.js project, many developers spending lot of time in just setting things up. Things like creating layouts, adding navigation, setting up components, and organizing folders can take quite a bit of time.&lt;/p&gt;

&lt;p&gt;That’s why many developers prefer starting with a template. A descent template already gives you the basic structure. So we get ready to use layouts, useful components, and a cleaner project setup so you can focus more on building your actual idea instead of doing repetitive setup work.&lt;br&gt;
The problem is that finding the template is not always easy… &lt;/p&gt;

&lt;p&gt;Some templates look great in the demo but are difficult to work with whereas some are outdated and others are missing features developers usually expect.&lt;/p&gt;

&lt;p&gt;So I spent some time exploring and reviewing different Next.js templates. Based on my own experience and what developers often recommend, I picked a list of templates that stand out in terms of structure, usability, and overall developer experience.&lt;/p&gt;

&lt;p&gt;Instead of writing long explanations for each one, I created a simple comparison table. This way you can quickly check important details like:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;the tech stack used in the template&lt;/li&gt;
&lt;li&gt;whether it has a free or pro version&lt;/li&gt;
&lt;li&gt;if Figma design files are available&lt;/li&gt;
&lt;li&gt;who created the template&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;The goal is to make it easier for you to compare options and find something that fits your project.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Here are some Next.js templates developers recommend:&lt;/strong&gt;&lt;/p&gt;

&lt;div class="table-wrapper-paragraph"&gt;&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;Template&lt;/th&gt;
&lt;th&gt;Tech&lt;/th&gt;
&lt;th&gt;Pro Version&lt;/th&gt;
&lt;th&gt;Free Version&lt;/th&gt;
&lt;th&gt;Figma&lt;/th&gt;
&lt;th&gt;AI Ready&lt;/th&gt;
&lt;th&gt;Author&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;

&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;&lt;a href="https://berrydashboard.com/" rel="noopener noreferrer"&gt;Berry&lt;/a&gt;&lt;/td&gt;
&lt;td&gt;React, NextJS, MUI, Vite, JS, TS&lt;/td&gt;
&lt;td&gt;Yes&lt;/td&gt;
&lt;td&gt;No&lt;/td&gt;
&lt;td&gt;Yes&lt;/td&gt;
&lt;td&gt;No&lt;/td&gt;
&lt;td&gt;CodedThemes&lt;/td&gt;
&lt;/tr&gt;

&lt;tr&gt;
&lt;td&gt;&lt;a href="https://minimals.cc/" rel="noopener noreferrer"&gt;Minimal&lt;/a&gt;&lt;/td&gt;
&lt;td&gt;React, NextJS, MUI, Vite, JS, TS&lt;/td&gt;
&lt;td&gt;Yes&lt;/td&gt;
&lt;td&gt;Yes&lt;/td&gt;
&lt;td&gt;Yes&lt;/td&gt;
&lt;td&gt;No&lt;/td&gt;
&lt;td&gt;Minimal&lt;/td&gt;
&lt;/tr&gt;

&lt;tr&gt;
&lt;td&gt;&lt;a href="https://mantisdashboard.com/" rel="noopener noreferrer"&gt;Mantis&lt;/a&gt;&lt;/td&gt;
&lt;td&gt;React, NextJS, MUI, Vite, JS, TS&lt;/td&gt;
&lt;td&gt;Yes&lt;/td&gt;
&lt;td&gt;No&lt;/td&gt;
&lt;td&gt;Yes&lt;/td&gt;
&lt;td&gt;Yes&lt;/td&gt;
&lt;td&gt;CodedThemes&lt;/td&gt;
&lt;/tr&gt;

&lt;tr&gt;
&lt;td&gt;&lt;a href="https://material-kit-pro-react.devias.io/dashboard" rel="noopener noreferrer"&gt;Devias Kit&lt;/a&gt;&lt;/td&gt;
&lt;td&gt;React, NextJS, MUI, Vite, JS, TS&lt;/td&gt;
&lt;td&gt;Yes&lt;/td&gt;
&lt;td&gt;Yes&lt;/td&gt;
&lt;td&gt;Yes&lt;/td&gt;
&lt;td&gt;No&lt;/td&gt;
&lt;td&gt;Devias&lt;/td&gt;
&lt;/tr&gt;

&lt;tr&gt;
&lt;td&gt;&lt;a href="https://mui.com/store/previews/zone-landing-page/" rel="noopener noreferrer"&gt;Zone&lt;/a&gt;&lt;/td&gt;
&lt;td&gt;React, NextJS, MUI, Vite, JS, TS&lt;/td&gt;
&lt;td&gt;Yes&lt;/td&gt;
&lt;td&gt;No&lt;/td&gt;
&lt;td&gt;Yes&lt;/td&gt;
&lt;td&gt;No&lt;/td&gt;
&lt;td&gt;Minimal&lt;/td&gt;
&lt;/tr&gt;

&lt;tr&gt;
&lt;td&gt;&lt;a href="https://www.saasable.io/" rel="noopener noreferrer"&gt;SassAble UI Kit&lt;/a&gt;&lt;/td&gt;
&lt;td&gt;React, NextJS, MUI, JS, TS&lt;/td&gt;
&lt;td&gt;Yes&lt;/td&gt;
&lt;td&gt;Yes&lt;/td&gt;
&lt;td&gt;Yes&lt;/td&gt;
&lt;td&gt;No&lt;/td&gt;
&lt;td&gt;Phoenixcoded&lt;/td&gt;
&lt;/tr&gt;

&lt;tr&gt;
&lt;td&gt;&lt;a href="https://mira.bootlab.io/dashboard/default" rel="noopener noreferrer"&gt;Mira&lt;/a&gt;&lt;/td&gt;
&lt;td&gt;React, NextJS, MUI, Vite, JS, TS&lt;/td&gt;
&lt;td&gt;Yes&lt;/td&gt;
&lt;td&gt;No&lt;/td&gt;
&lt;td&gt;Yes&lt;/td&gt;
&lt;td&gt;No&lt;/td&gt;
&lt;td&gt;Bootlab&lt;/td&gt;
&lt;/tr&gt;

&lt;tr&gt;
&lt;td&gt;&lt;a href="https://template.getbazaar.io/vendor/dashboard" rel="noopener noreferrer"&gt;Bazaar Pro&lt;/a&gt;&lt;/td&gt;
&lt;td&gt;React, NextJS, MUI, JS, TS&lt;/td&gt;
&lt;td&gt;Yes&lt;/td&gt;
&lt;td&gt;No&lt;/td&gt;
&lt;td&gt;Yes&lt;/td&gt;
&lt;td&gt;No&lt;/td&gt;
&lt;td&gt;UI Lib&lt;/td&gt;
&lt;/tr&gt;

&lt;tr&gt;
&lt;td&gt;&lt;a href="https://admin.saasable.io/" rel="noopener noreferrer"&gt;SassAble Admin&lt;/a&gt;&lt;/td&gt;
&lt;td&gt;React, NextJS, MUI, Vite, JS, TS&lt;/td&gt;
&lt;td&gt;Yes&lt;/td&gt;
&lt;td&gt;Yes&lt;/td&gt;
&lt;td&gt;Yes&lt;/td&gt;
&lt;td&gt;No&lt;/td&gt;
&lt;td&gt;Phoenixcoded&lt;/td&gt;
&lt;/tr&gt;

&lt;tr&gt;
&lt;td&gt;&lt;a href="https://nextjs-demo.tailadmin.com/" rel="noopener noreferrer"&gt;TailAdmin&lt;/a&gt;&lt;/td&gt;
&lt;td&gt;Tailwind, NextJS, TS&lt;/td&gt;
&lt;td&gt;Yes&lt;/td&gt;
&lt;td&gt;Yes&lt;/td&gt;
&lt;td&gt;Yes&lt;/td&gt;
&lt;td&gt;No&lt;/td&gt;
&lt;td&gt;TailAdmin&lt;/td&gt;
&lt;/tr&gt;

&lt;tr&gt;
&lt;td&gt;&lt;a href="https://demo.nextadmin.co/" rel="noopener noreferrer"&gt;NextAdmin&lt;/a&gt;&lt;/td&gt;
&lt;td&gt;Tailwind, NextJS&lt;/td&gt;
&lt;td&gt;Yes&lt;/td&gt;
&lt;td&gt;Yes&lt;/td&gt;
&lt;td&gt;Yes&lt;/td&gt;
&lt;td&gt;No&lt;/td&gt;
&lt;td&gt;NextAdmin&lt;/td&gt;
&lt;/tr&gt;

&lt;tr&gt;
&lt;td&gt;&lt;a href="https://open.cruip.com/" rel="noopener noreferrer"&gt;Cruip&lt;/a&gt;&lt;/td&gt;
&lt;td&gt;React, Tailwind, NextJS&lt;/td&gt;
&lt;td&gt;Yes&lt;/td&gt;
&lt;td&gt;Yes&lt;/td&gt;
&lt;td&gt;Yes&lt;/td&gt;
&lt;td&gt;No&lt;/td&gt;
&lt;td&gt;Cruip&lt;/td&gt;
&lt;/tr&gt;

&lt;tr&gt;
&lt;td&gt;&lt;a href="https://magicui.design/" rel="noopener noreferrer"&gt;Magic UI&lt;/a&gt;&lt;/td&gt;
&lt;td&gt;React, Tailwind, NextJS, Shadcn UI&lt;/td&gt;
&lt;td&gt;Yes&lt;/td&gt;
&lt;td&gt;Yes&lt;/td&gt;
&lt;td&gt;Yes&lt;/td&gt;
&lt;td&gt;No&lt;/td&gt;
&lt;td&gt;Magic UI&lt;/td&gt;
&lt;/tr&gt;

&lt;tr&gt;
&lt;td&gt;&lt;a href="https://horizon-ui.com/" rel="noopener noreferrer"&gt;Horizon UI&lt;/a&gt;&lt;/td&gt;
&lt;td&gt;React, Tailwind, NextJS, Shadcn UI&lt;/td&gt;
&lt;td&gt;Yes&lt;/td&gt;
&lt;td&gt;Yes&lt;/td&gt;
&lt;td&gt;Yes&lt;/td&gt;
&lt;td&gt;Yes&lt;/td&gt;
&lt;td&gt;Horizon UI&lt;/td&gt;
&lt;/tr&gt;

&lt;tr&gt;
&lt;td&gt;&lt;a href="https://sakai.primereact.org/" rel="noopener noreferrer"&gt;Sakai&lt;/a&gt;&lt;/td&gt;
&lt;td&gt;React, NextJS&lt;/td&gt;
&lt;td&gt;No&lt;/td&gt;
&lt;td&gt;Yes&lt;/td&gt;
&lt;td&gt;No&lt;/td&gt;
&lt;td&gt;No&lt;/td&gt;
&lt;td&gt;Primefaces&lt;/td&gt;
&lt;/tr&gt;

&lt;/tbody&gt;
&lt;/table&gt;&lt;/div&gt;

&lt;h2&gt;
  
  
  Things to check before choosing any template
&lt;/h2&gt;

&lt;p&gt;We must go through these simple things before selecting any template as small details can make a big difference when you actually start working with it.&lt;/p&gt;

&lt;h3&gt;
  
  
  Here they are:
&lt;/h3&gt;

&lt;p&gt;&lt;strong&gt;Tech Stack&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;First, see what technologies the template is built with. Some templates use Material UI, some use Tailwind, and others may use different component libraries. Choosing a stack you are comfortable with will make development much easier.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Updates&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Check if the template is updated regularly. Templates that receive updates usually stay compatible with new versions of frameworks and libraries.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Figma Files&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;If the template includes Figma files, it becomes easier to work with designers. You can quickly adjust layouts or components without guessing the design.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Free vs Pro&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Many templates offer both free and pro versions. Free versions are good for trying things out, while pro versions usually include more pages, components, and support.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;A good template can save a lot of setup time. Instead of building everything from scratch, you can start working on your actual project right away.&lt;/p&gt;
&lt;/blockquote&gt;

</description>
      <category>nextjs</category>
      <category>react</category>
      <category>webdev</category>
      <category>javascript</category>
    </item>
    <item>
      <title>shadcn/ui March 2026 Update: CLI v4, AI Agent Skills and Design System Presets</title>
      <dc:creator>Rakesh Nakrani</dc:creator>
      <pubDate>Tue, 10 Mar 2026 10:23:20 +0000</pubDate>
      <link>https://dev.to/codedthemes/shadcnui-march-2026-update-cli-v4-ai-agent-skills-and-design-system-presets-1gp1</link>
      <guid>https://dev.to/codedthemes/shadcnui-march-2026-update-cli-v4-ai-agent-skills-and-design-system-presets-1gp1</guid>
      <description>&lt;p&gt;The shadcn/ui ecosystem has just taken a massive leap forward. The March 2026 release focuses on making the library more modular, more portable, and most importantly, more intelligent. With the launch of CLI v4, shadcn/skills, and a new Presets engine, shadcn/ui is now optimized for the “Agentic Era” of development.&lt;/p&gt;

&lt;p&gt;Check out the &lt;a href="https://ui.shadcn.com/docs/changelog" rel="noopener noreferrer"&gt;Official March 2026 Changelog&lt;/a&gt; and the &lt;a href="https://x.com/shadcn/status/2029974151427989567" rel="noopener noreferrer"&gt;launch announcement on X&lt;/a&gt; for the full breakdown.&lt;/p&gt;

&lt;h2&gt;
  
  
  Important Updates:
&lt;/h2&gt;

&lt;h3&gt;
  
  
  1. shadcn/cli v4: Safe &amp;amp; Inspectable Changes
&lt;/h3&gt;

&lt;p&gt;The heart of this update is &lt;strong&gt;CLI v4&lt;/strong&gt;. It’s no longer just an installer; it’s a sophisticated tool for managing project state. The major focus here is transparency.&lt;/p&gt;

&lt;p&gt;Before writing any files to your disk, you can now use new inspection flags to review changes:&lt;/p&gt;

&lt;p&gt;— &lt;strong&gt;dry-run:&lt;/strong&gt; See a simulation of what will be added.&lt;br&gt;
— &lt;strong&gt;diff:&lt;/strong&gt; Check for registry updates and compare them with your local changes.&lt;br&gt;
— &lt;strong&gt;view:&lt;/strong&gt; Inspect the payload a registry is about to add to your project.&lt;/p&gt;

&lt;h3&gt;
  
  
  2. shadcn/skills: Bringing Context to Coding Agents
&lt;/h3&gt;

&lt;p&gt;Coding agents like v0, Cursor, or Claude are powerful, but they often lack the specific “tribal knowledge” of a project’s registry or component patterns. &lt;strong&gt;shadcn/skills&lt;/strong&gt; fixes this by providing agents with a specialized context layer.&lt;/p&gt;

&lt;p&gt;By adding the shadcn skill to your workflow, you significantly reduce AI hallucinations and mistakes. Agents now understand Radix vs. Base UI primitives, registry workflows, and specific CLI flags. You can now reliably use prompts like:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;“Create a new Vite monorepo.”&lt;/li&gt;
&lt;li&gt;“Find a hero section from Tailark and add it to my home page.”&lt;/li&gt;
&lt;li&gt;“Install and configure a sign-in page from @clerk.”&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  3. Design System Presets: Portable Design Tokens
&lt;/h3&gt;

&lt;p&gt;Customizing a design system often involves tedious configuration. Presets simplify this by packing colors, themes, fonts, border-radius, and icons into a single, portable string.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Build:&lt;/strong&gt; Use the new visual &lt;a href="https://ui.shadcn.com/create" rel="noopener noreferrer"&gt;shadcn/create&lt;/a&gt; builder to preview and generate your preset.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Initialize:&lt;/strong&gt; Use &lt;strong&gt;npx shadcn@latest init — preset [CODE]&lt;/strong&gt; to scaffold a project with your exact design system.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Switch:&lt;/strong&gt; Need a different look? Rerunning the &lt;strong&gt;init — preset&lt;/strong&gt; command allows you to reconfigure your entire project and its installed components automatically.&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  4. Extended Framework &amp;amp; Template Support
&lt;/h3&gt;

&lt;p&gt;CLI v4 expands its reach beyond Next.js. &lt;strong&gt;The shadcn init&lt;/strong&gt; command now supports first-class project templates for:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;Next.js, Vite, TanStack Start, React Router, Astro, and Laravel.&lt;/strong&gt;&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Base UI &amp;amp; Radix:&lt;/strong&gt; Choose your underlying primitives using the — base flag (e.g., — base radix).&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Direct Documentation:&lt;/strong&gt; The &lt;em&gt;shadcn docs [component]&lt;/em&gt; command now fetches documentation links and official code snippets directly from the registry, providing instant context for both humans and agents.&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Summary
&lt;/h2&gt;

&lt;p&gt;The March 2026 update makes shadcn/ui the most “AI-ready” design system available. By combining portable presets with the context-aware shadcn/skills, the framework reduces the friction between a design concept and a production-ready UI.&lt;/p&gt;

&lt;p&gt;Whether you’re managing a complex monorepo or just trying to move between Radix and Base UI projects, these tools ensure your design system remains consistent and easy to maintain.&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>programming</category>
      <category>javascript</category>
      <category>tailwindcss</category>
    </item>
    <item>
      <title>How AI Prompts in Mantis Simplify Developer Workflows</title>
      <dc:creator>Rakesh Nakrani</dc:creator>
      <pubDate>Fri, 27 Feb 2026 14:53:11 +0000</pubDate>
      <link>https://dev.to/codedthemes/how-ai-prompts-in-mantis-simplify-developer-workflows-4628</link>
      <guid>https://dev.to/codedthemes/how-ai-prompts-in-mantis-simplify-developer-workflows-4628</guid>
      <description>&lt;p&gt;&lt;a href="https://mantisdashboard.com/" rel="noopener noreferrer"&gt;Mantis React MUI Dashboard Template&lt;/a&gt; is a modern admin dashboard template built with React and Material UI.&lt;/p&gt;

&lt;p&gt;When we started building Mantis, the goal wasn’t just to create another dashboard UI. We designed it for developers building real-world systems like admin panels, SaaS dashboards, enterprise applications, and scalable web applications where structure actually matters.&lt;/p&gt;

&lt;p&gt;Over the years, we’ve seen how quickly admin projects grow in complexity. What begins as a simple dashboard often turns into a large, feature-heavy system with authentication layers, role management, complex forms, API integrations, and strict UI standards.&lt;/p&gt;

&lt;p&gt;That’s why Mantis is not just a dashboard template. It’s a structured foundation for building complex admin systems with consistent standards and scalable architecture.&lt;/p&gt;

&lt;p&gt;And that structure is exactly what makes AI integration powerful.&lt;/p&gt;

&lt;p&gt;In my experience, AI works best when the environment is well-defined. When a project has clear architecture, naming conventions, and standardized patterns, AI tools can generate far more accurate and consistent outputs.&lt;/p&gt;

&lt;p&gt;AI has become part of a developer’s daily toolkit. From generating boilerplate code and fixing bugs to writing documentation and refactoring components, developers now depend on AI tools throughout the day.&lt;/p&gt;

&lt;p&gt;That’s where predefined AI prompts in Mantis come in.&lt;/p&gt;

&lt;p&gt;According to the &lt;a href="https://survey.stackoverflow.co/2025/ai/" rel="noopener noreferrer"&gt;2025 Stack Overflow Developer Survey&lt;/a&gt;, &lt;a href="https://survey.stackoverflow.co/2025/ai/" rel="noopener noreferrer"&gt;84% of developers already use or plan to use AI tools&lt;/a&gt; in their development work. Around &lt;strong&gt;51% of professional developers say they use AI tools every day&lt;/strong&gt;, which shows that AI is no longer a research and development activity. It is a part of actual development work.&lt;/p&gt;

&lt;p&gt;Many developers also report clear productivity gains when AI is used well. Industry studies show that developers often feel faster and see productivity improvements of &lt;strong&gt;up to ~55%&lt;/strong&gt; with AI assistance.&lt;/p&gt;

&lt;p&gt;But there is a problem most people do not talk about. As AI usage increases, so does the effort spent writing prompts. Developers repeatedly explain project structure, tech stack, rules, and context. Instead of saving time, prompt writing can slowly become repetitive and frustrating.&lt;/p&gt;

&lt;p&gt;That is exactly the problem Mantis aims to solve with predefined AI prompts.&lt;/p&gt;

&lt;h2&gt;
  
  
  Why does prompt writing become extra work?
&lt;/h2&gt;

&lt;p&gt;At first, writing prompts feel simple. But in real projects, it’s rarely just:&lt;/p&gt;

&lt;p&gt;“Create a dashboard component.”&lt;/p&gt;

&lt;p&gt;Developers often need to explain:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;The project structure&lt;/li&gt;
&lt;li&gt;The tech stack&lt;/li&gt;
&lt;li&gt;Naming conventions&lt;/li&gt;
&lt;li&gt;API patterns&lt;/li&gt;
&lt;li&gt;Authentication flow&lt;/li&gt;
&lt;li&gt;Database schema&lt;/li&gt;
&lt;li&gt;UI standards&lt;/li&gt;
&lt;li&gt;Business logic rules&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;And they end up repeating this context multiple times a day.&lt;/p&gt;

&lt;p&gt;Instead of AI saving time, developers spend extra minutes describing the same product details over and over. Prompt writing becomes another task on the to-do list.&lt;/p&gt;

&lt;h2&gt;
  
  
  What do “Predefined Prompts” mean in Mantis Dashboard
&lt;/h2&gt;

&lt;p&gt;Predefined prompts in Mantis are ready-to-use AI instructions built specifically around how Mantis works.&lt;/p&gt;

&lt;p&gt;They already contain:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Product structure&lt;/li&gt;
&lt;li&gt;Feature expectations&lt;/li&gt;
&lt;li&gt;Technical conventions&lt;/li&gt;
&lt;li&gt;Output formatting rules&lt;/li&gt;
&lt;li&gt;Business logic assumptions&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Developers don’t need to explain everything from scratch. The intelligence is &lt;a href="https://codedthemes.gitbook.io/mantis/ai/why-prompt" rel="noopener noreferrer"&gt;embedded in the prompt itself&lt;/a&gt;.&lt;/p&gt;

&lt;h2&gt;
  
  
  How agents.md gives AI full product context
&lt;/h2&gt;

&lt;p&gt;Mantis includes an &lt;a href="https://codedthemes.gitbook.io/mantis/ai/agents-md" rel="noopener noreferrer"&gt;agents.md&lt;/a&gt; file that acts as a structured knowledge guide for AI tools.&lt;/p&gt;

&lt;p&gt;This file helps AI models to understand:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;How Mantis is organized&lt;/li&gt;
&lt;li&gt;How features are structured&lt;/li&gt;
&lt;li&gt;How modules interact&lt;/li&gt;
&lt;li&gt;What standards should be followed&lt;/li&gt;
&lt;li&gt;How data flows across the system&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Instead of feeding the same product explanation repeatedly, AI models read from agents.md and instantly understand the environment it’s working in.&lt;/p&gt;

&lt;p&gt;This dramatically reduces context repetition and improves output consistency.&lt;/p&gt;

&lt;h2&gt;
  
  
  How these prompts work with any LLM
&lt;/h2&gt;

&lt;p&gt;One of the key advantages of Mantis predefined prompts is flexibility.&lt;/p&gt;

&lt;p&gt;They are not locked to a single AI provider. Since the prompts already include complete product context, they can work with any major LLM or AI coding assistant.&lt;/p&gt;

&lt;p&gt;Whether a team uses one AI tool today and another tomorrow, the prompts remain effective because the intelligence is built into the instructions themselves not dependent on a specific platform.&lt;/p&gt;

&lt;h2&gt;
  
  
  Predefined prompt levels in Mantis Dashboard
&lt;/h2&gt;

&lt;h3&gt;
  
  
  Free Prompts: What developers get with the free product
&lt;/h3&gt;

&lt;p&gt;The &lt;a href="https://github.com/codedthemes/mantis-free-react-admin-template" rel="noopener noreferrer"&gt;free version&lt;/a&gt; of Mantis dashboard includes essential predefined prompts that help developers:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Generate standard features&lt;/li&gt;
&lt;li&gt;Scaffold common components&lt;/li&gt;
&lt;li&gt;Follow a consistent project structure&lt;/li&gt;
&lt;li&gt;Reduce repetitive explanations&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;This ensures that even individual developers and small teams benefit from structured AI assistance.&lt;/p&gt;

&lt;h3&gt;
  
  
  Paid Product: Full access to all prompts
&lt;/h3&gt;

&lt;p&gt;The paid version unlocks the complete &lt;a href="https://mantisdashboard.com/ai-prompts#prompt-library" rel="noopener noreferrer"&gt;library of predefined prompts,&lt;/a&gt; including advanced prompts designed for handling complex and repetitive work.&lt;/p&gt;

&lt;p&gt;These advanced prompts are built for:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Multi-step feature generation&lt;/li&gt;
&lt;li&gt;Complex business logic handling&lt;/li&gt;
&lt;li&gt;Advanced form management&lt;/li&gt;
&lt;li&gt;Data-heavy dashboards&lt;/li&gt;
&lt;li&gt;Repetitive enterprise workflows&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Instead of manually guiding AI through complicated sequences, developers can rely on structured prompts that already understand the depth and repetition involved in large-scale projects.&lt;/p&gt;

&lt;p&gt;How do predefined AI prompts improve developer productivity?&lt;/p&gt;

&lt;p&gt;When developers stop worrying about how to phrase prompts, they gain back mental bandwidth.&lt;/p&gt;

&lt;p&gt;They spend:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Less time explaining&lt;/li&gt;
&lt;li&gt;Less time correcting AI misunderstandings&lt;/li&gt;
&lt;li&gt;Less time rewriting outputs&lt;/li&gt;
&lt;li&gt;Less time repeating context&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;And more time:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Building features&lt;/li&gt;
&lt;li&gt;Solving real product problems&lt;/li&gt;
&lt;li&gt;Improving performance&lt;/li&gt;
&lt;li&gt;Shipping faster&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;The result is not just faster coding…it’s smoother workflow management!!!&lt;/p&gt;

&lt;h2&gt;
  
  
  Why are product-built prompts more reliable?
&lt;/h2&gt;

&lt;p&gt;Generic prompts often lead to inconsistent results because they lack product awareness.&lt;/p&gt;

&lt;p&gt;Product-built prompts in Mantis are:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Context-aware&lt;/li&gt;
&lt;li&gt;Standardized&lt;/li&gt;
&lt;li&gt;Tested against real workflows&lt;/li&gt;
&lt;li&gt;Structured around actual product architecture&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;This makes outputs more predictable and reduces the trial-and-error cycle that developers often face with generic AI usage.&lt;/p&gt;

&lt;h2&gt;
  
  
  Who is this made for?
&lt;/h2&gt;

&lt;p&gt;Predefined prompts in Mantis are designed for:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Individual developers who want faster workflows&lt;/li&gt;
&lt;li&gt;Startups building MVPs quickly&lt;/li&gt;
&lt;li&gt;Agencies delivering multiple client dashboards&lt;/li&gt;
&lt;li&gt;Enterprises managing large admin systems&lt;/li&gt;
&lt;li&gt;Teams building scalable admin panels&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Anyone working on structured, feature-heavy applications benefits from reducing prompt overhead.&lt;/p&gt;

</description>
      <category>react</category>
      <category>ai</category>
      <category>productivity</category>
      <category>webdev</category>
    </item>
    <item>
      <title>Vuetify 4 is Live Now</title>
      <dc:creator>Rakesh Nakrani</dc:creator>
      <pubDate>Thu, 26 Feb 2026 10:46:37 +0000</pubDate>
      <link>https://dev.to/rakesh_nakrani/vuetify-4-is-live-now-d15</link>
      <guid>https://dev.to/rakesh_nakrani/vuetify-4-is-live-now-d15</guid>
      <description>&lt;p&gt;The wait is over, Vuetify 4 has officially been released. This major version marks a fundamental evolution of the world’s most popular Vue UI library. Based on the J&lt;a href="https://vuetifyjs.com/en/blog/january-2026-update/" rel="noopener noreferrer"&gt;anuary 2026 Update&lt;/a&gt; and the newly published &lt;a href="https://vuetifyjs.com/en/getting-started/release-notes/?version=v4.0.0" rel="noopener noreferrer"&gt;V4 Release Notes&lt;/a&gt;, this version is built for the modern web, focusing on native CSS power and streamlined performance.&lt;/p&gt;

&lt;h2&gt;
  
  
  Why was this update needed?
&lt;/h2&gt;

&lt;p&gt;As the web moves toward native CSS features and sophisticated design systems, the framework needed to shed its legacy dependencies. Vuetify 4 addresses long-standing developer pain points:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Specificity Wars:&lt;/strong&gt; No more fighting! &lt;code&gt;important&lt;/code&gt; flags in your style overrides.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Modern Aesthetics:&lt;/strong&gt; Moving from the older Material Design standards to a more refined, fluid design language.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Bundle Bloat:&lt;/strong&gt; Transitioning from global resets to surgical, component-level normalization.&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Material Design 3 (MD3) Integration
&lt;/h2&gt;

&lt;p&gt;The most visible change is the full-scale adoption of Material Design 3. MD3 brings a more organic feel, better accessibility, and a highly customizable color system.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Dynamic Color Support:&lt;/strong&gt; The framework now handles color transparency natively using CSS &lt;code&gt;color-mix()&lt;/code&gt; and the relative color syntax (&lt;code&gt;rgb(from …)&lt;/code&gt;).&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;New Elevation System&lt;/strong&gt;: Vuetify has streamlined its elevation system from 25 levels down to &lt;code&gt;6 distinct levels (0–5)&lt;/code&gt;, providing a cleaner and more consistent visual hierarchy.&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Core Architectural Shifts
&lt;/h2&gt;

&lt;h3&gt;
  
  
  CSS Cascade Layers (@layer)
&lt;/h3&gt;

&lt;p&gt;Vuetify 4 fully embraces CSS Cascade Layers. By using five top-level layers (&lt;code&gt;vuetify-core&lt;/code&gt;, &lt;code&gt;vuetify-components&lt;/code&gt;, &lt;code&gt;vuetify-utilities&lt;/code&gt;, etc.), the framework guarantees that your custom styles take priority. This completely eliminates the need for high-specificity selectors when you want to tweak a component’s look.&lt;/p&gt;

&lt;h3&gt;
  
  
  System Theme by Default
&lt;/h3&gt;

&lt;p&gt;The default theme has shifted from “light” to “system.” Applications built with V4 will now automatically respect the user’s operating system preferences. This not only improves user experience but also fixes common SSR “flicker” issues where a theme would snap from light to dark on page load.&lt;/p&gt;

&lt;h2&gt;
  
  
  Performance &amp;amp; Layout Improvements
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;Refined Breakpoints: Breakpoints have been adjusted to better match modern device sizes. For instance, &lt;code&gt;md&lt;/code&gt; is now 840px (down from 960px) and &lt;code&gt;xl&lt;/code&gt; is now 1545px (down from 1920px).&lt;/li&gt;
&lt;li&gt;VContainer Optimization: The max-width calculations for &lt;code&gt;v-container&lt;/code&gt; now round to the nearest 100px, creating more predictable and stable layouts across different viewports.&lt;/li&gt;
&lt;li&gt;Flex over Grid: Core components like &lt;code&gt;VBtn&lt;/code&gt; and &lt;code&gt;VField&lt;/code&gt; have reverted from CSS Grid back to Flexbox to resolve gap-control limitations and improve rendering consistency in complex forms.&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Developer Experience (DX) Enhancements
&lt;/h2&gt;

&lt;p&gt;Vuetify 4 makes your code cleaner and your workflow faster:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Unwrapped Slot Variables:&lt;/strong&gt; In &lt;code&gt;VForm&lt;/code&gt;, variables like &lt;code&gt;isValid&lt;/code&gt; are no longer refs. They are passed as plain values to slots, removing the need for .value in your templates.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Unified API:&lt;/strong&gt; The slot naming for items in &lt;code&gt;VSelect&lt;/code&gt;, &lt;code&gt;VCombobox&lt;/code&gt;, and &lt;code&gt;VAutocomplete&lt;/code&gt; has been standardized to &lt;code&gt;internalItem&lt;/code&gt;, matching the pattern used in &lt;code&gt;VDataTable&lt;/code&gt;.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Sass Variable Cleanup:&lt;/strong&gt; Redundant Sass variables have been consolidated into more logical groups (e.g., &lt;code&gt;$field-gap&lt;/code&gt;), making theme-level adjustments straightforward.&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Conclusion
&lt;/h2&gt;

&lt;p&gt;Vuetify 4 is a commitment to long-term stability and modern development standards. By moving toward native CSS features and MD3, it eliminates technical debt and provides a faster, more flexible foundation for any Vue.js project. Whether you are building a simple landing page or a massive enterprise dashboard, V4 is designed to stay out of your way and let you build features faster.&lt;/p&gt;

&lt;p&gt;Our Commitment to Vuetify 4 At CodedThemes, we are always working to keep our users on the cutting edge. We are currently in the process of updating our flagship products- &lt;a href="https://berrydashboard.com/vue/" rel="noopener noreferrer"&gt;Berry&lt;/a&gt;, &lt;a href="https://mantisdashboard.com/vue/" rel="noopener noreferrer"&gt;Mantis&lt;/a&gt;, and &lt;a href="https://ableproadmin.com/vue/" rel="noopener noreferrer"&gt;Able Pro&lt;/a&gt; to fully support Vuetify 4. Stay tuned for these upcoming releases!&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>beginners</category>
      <category>frontend</category>
      <category>vue</category>
    </item>
    <item>
      <title>Tackling UI Design Challenges in SaaS: Balancing Front-End and Admin Interfaces</title>
      <dc:creator>Rakesh Nakrani</dc:creator>
      <pubDate>Sat, 05 Oct 2024 05:20:39 +0000</pubDate>
      <link>https://dev.to/rakesh_nakrani/tackling-ui-design-challenges-in-saas-balancing-front-end-and-admin-interfaces-1kgh</link>
      <guid>https://dev.to/rakesh_nakrani/tackling-ui-design-challenges-in-saas-balancing-front-end-and-admin-interfaces-1kgh</guid>
      <description>&lt;p&gt;Hey Dev community,&lt;/p&gt;

&lt;p&gt;As a designer and developer working on SaaS projects for the past few years, I’ve consistently run into the same design challenges. Most UI kits out there are great for front-end components like marketing pages, but they fall short when it comes to admin interfaces—an equally important part of any SaaS product.&lt;/p&gt;

&lt;p&gt;In my experience, this often results in teams scrambling to design or code their own admin dashboards from scratch, which not only wastes time but also creates inconsistencies across the product.&lt;/p&gt;

&lt;p&gt;This got me thinking: &lt;strong&gt;Why isn’t there a UI kit that includes both front-end and admin interface components in one place?&lt;/strong&gt; Something that could cut down on design time while ensuring consistency across an entire SaaS product.&lt;/p&gt;

&lt;p&gt;So, I started building a solution to tackle this very issue. The goal was simple: create a complete UI kit that includes not only front-end UI blocks like Hero sections, Testimonials, and Pricing tables but also fully designed admin components such as analytics dashboards, user management, billing, and more.&lt;/p&gt;

&lt;p&gt;I’ve been testing it internally, and it’s helped reduce design time and maintain consistency between marketing pages and admin dashboards.&lt;/p&gt;

&lt;h2&gt;
  
  
  Why am I sharing this?
&lt;/h2&gt;

&lt;p&gt;Because I’ve seen how much time and effort it saves, and I’m curious to know if others have faced similar challenges.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;How do you handle UI design for both front-end and admin interfaces?&lt;/strong&gt;&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Do you use separate kits, or do you start from scratch for each part of your product?&lt;/strong&gt;&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Any tips or tools you’d recommend for creating consistent designs across your SaaS apps?&lt;/strong&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;I’d love to hear how other teams and freelancers manage this process, and maybe we can swap ideas on streamlining workflows. Feel free to share your thoughts, experiences, or any tools that have made your life easier.&lt;/p&gt;

&lt;p&gt;Looking forward to hearing your perspectives!&lt;/p&gt;

</description>
      <category>saas</category>
      <category>productivity</category>
      <category>help</category>
    </item>
    <item>
      <title>Material UI is now MUI</title>
      <dc:creator>Rakesh Nakrani</dc:creator>
      <pubDate>Sat, 18 Sep 2021 10:39:53 +0000</pubDate>
      <link>https://dev.to/rakesh_nakrani/material-ui-is-now-mui-1o9h</link>
      <guid>https://dev.to/rakesh_nakrani/material-ui-is-now-mui-1o9h</guid>
      <description>&lt;h3&gt;
  
  
  &lt;strong&gt;What is Material UI (MUI React)?&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;Do you know React.js? If &lt;strong&gt;yes&lt;/strong&gt;, then you surely know &lt;a href="https://mui.com/" rel="noopener noreferrer"&gt;Material-UI&lt;/a&gt; - One of the popular React component library. I must say Material UI is the &lt;a href="https://retool.com/blog/react-component-libraries/" rel="noopener noreferrer"&gt;top&lt;/a&gt; general-purpose library out there in the market. It follows Google’s material design guidelines, components, and tools to make web applications faster.&lt;/p&gt;

&lt;h4&gt;
  
  
  &lt;strong&gt;The origin&lt;/strong&gt;
&lt;/h4&gt;

&lt;p&gt;Material UI &lt;a href="https://www.text-em-all.com/blog/material-ui-the-internet-found-our-ui-project" rel="noopener noreferrer"&gt;started&lt;/a&gt; as a React Implementation of Google’s Material Design specification back in 2014. The goal was simple, to entitle React developers to use Material Design. &lt;/p&gt;

&lt;p&gt;The React community is excited about new features, so the MUI team keeps adding them.&lt;/p&gt;

&lt;p&gt;Over 2200 developers helping hand to &lt;a href="https://github.com/mui-org/material-ui/graphs/contributors" rel="noopener noreferrer"&gt;contribute&lt;/a&gt; so far with an aim to build the customer-facing application, tools, and mobile-hybrid apps. Now React Material UI is the best react component library out there in market.&lt;/p&gt;

&lt;p&gt;This post is based upon Material UI turns to MUI, here I am going to use the &lt;strong&gt;MUI&lt;/strong&gt; term for upcoming sections.&lt;/p&gt;

&lt;h4&gt;
  
  
  &lt;strong&gt;A Larger Focus in mind&lt;/strong&gt;
&lt;/h4&gt;

&lt;p&gt;Material UI had a &lt;a href="https://mui.com/blog/2020-developer-survey-results/#comparison-with-last-year" rel="noopener noreferrer"&gt;survey&lt;/a&gt; last year about improving the Material Design, implementation was down by 60%. At the same time, 5x more developers were struggling with customizing the components.&lt;/p&gt;

&lt;p&gt;Based upon that context MUI v5 in 2019. The primary focus was to give a new and improved focus on DX(Developer Experience). The new &lt;a href="https://mui.com/blog/2020-developer-survey-results/#comparison-with-last-year" rel="noopener noreferrer"&gt;v5.0.0&lt;/a&gt; release has new initiatives that broaden the MUI horizon.&lt;/p&gt;

&lt;p&gt;MUI organization's goal is to become the most effective tool to build UIs while making access to as many as possible.&lt;/p&gt;

&lt;h3&gt;
  
  
  &lt;strong&gt;What’s new in MUI?&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;Let’s jump into the brand new MUI. Many people combine or synonym Material UI with Google. But the both Google’s Material Design and Material UI is identical to each other.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F5zr98vibbg5ztsjszmmf.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F5zr98vibbg5ztsjszmmf.gif" alt="mui-new-component" width="1195" height="631"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h5&gt;
  
  
  &lt;strong&gt;New Name&lt;/strong&gt;
&lt;/h5&gt;

&lt;p&gt;Material UI is now MUI. It stands for &lt;strong&gt;M&lt;/strong&gt;aterial to build &lt;strong&gt;UI&lt;/strong&gt;s.&lt;br&gt;
It is quite shorter. Many people already used it for pronouncing Material UI.&lt;/p&gt;

&lt;h5&gt;
  
  
  &lt;strong&gt;New Domain Name&lt;/strong&gt;
&lt;/h5&gt;

&lt;p&gt;Moved from &lt;a href="https://material-ui.com" rel="noopener noreferrer"&gt;https://material-ui.com&lt;/a&gt; to &lt;a href="https://mui.com" rel="noopener noreferrer"&gt;https://mui.com&lt;/a&gt;. Its very easy to type and to find a mui.com on internet.&lt;/p&gt;

&lt;h5&gt;
  
  
  &lt;strong&gt;New Logos&lt;/strong&gt;
&lt;/h5&gt;

&lt;p&gt;The new MUI logo is quite the same as an older one. They removed the 3D perspective and keep it simple as possible to adhere to the new brand identity. &lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fb112ak3inb4pmdspenky.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fb112ak3inb4pmdspenky.png" alt="mui-new-logo" width="800" height="392"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h5&gt;
  
  
  &lt;strong&gt;New Package Names&lt;/strong&gt;
&lt;/h5&gt;

&lt;p&gt;This is a breaking change - The package names have changed in MUI v5. The npm name moved from &lt;a class="mentioned-user" href="https://dev.to/material-ui"&gt;@material-ui&lt;/a&gt; to &lt;a href="https://www.npmjs.com/org/mui" rel="noopener noreferrer"&gt;@mui&lt;/a&gt;. For more details, you may see the release notes.&lt;/p&gt;

&lt;h5&gt;
  
  
  &lt;strong&gt;New Website &amp;amp; Documentation&lt;/strong&gt;
&lt;/h5&gt;

&lt;p&gt;I must say, the new Documentation helper guide is mindblowing. MUI team really understands the pain points of their developers. Sections like Getting started, components, API, customization, how-to guides, and styles are completely restructured. Also, they integrated Algolia search which is helpful to find any search term. &lt;/p&gt;

&lt;p&gt;You’ll find a completely different theme from Material Design with having new typefaces, colors, box-shadows with powerful theming features of v5.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ffiyseryja1wfvlin9cnq.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ffiyseryja1wfvlin9cnq.png" alt="mui-documentation" width="800" height="393"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h5&gt;
  
  
  &lt;strong&gt;Color Palette&lt;/strong&gt;
&lt;/h5&gt;

&lt;p&gt;Following is the new color palette of the MUI brand.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fkv35kxn6yphwyi0aj11o.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fkv35kxn6yphwyi0aj11o.png" alt="mui-color-palette" width="800" height="422"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h5&gt;
  
  
  &lt;strong&gt;MUI Core v5.0&lt;/strong&gt;
&lt;/h5&gt;

&lt;p&gt;&lt;a href="https://mui.com/blog/mui-core-v5/" rel="noopener noreferrer"&gt;Introducing&lt;/a&gt; MUI core v5.0. Over 400 days of development and 40+ releases, MUI team introduce MUI core v5.0.0!&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Faacl24hz56exx34ohaj4.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Faacl24hz56exx34ohaj4.png" alt="introducing-mui-v5" width="800" height="422"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://mui.com/core/" rel="noopener noreferrer"&gt;MUI Core&lt;/a&gt; is made for reusable, accessible UI components that you can combine to build your own website or web app. The components are free and also open-source, so you can edit them to fit your design system perfectly.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fl6osz5arftfmk5cyhkye.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fl6osz5arftfmk5cyhkye.gif" alt="mui-core" width="1903" height="937"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h5&gt;
  
  
  &lt;strong&gt;Features&lt;/strong&gt;
&lt;/h5&gt;

&lt;p&gt;Component library having 40+ building blocks covering Button, Text Field, Table, and lots more.&lt;br&gt;
Custom Theming - Start by defining your ideal design system, then build towards that goal.&lt;br&gt;
Styling - CSS utility classes provide an easy way to add styling for common use cases.&lt;br&gt;
[image]&lt;/p&gt;

&lt;h5&gt;
  
  
  &lt;strong&gt;MUI X&lt;/strong&gt;
&lt;/h5&gt;

&lt;p&gt;&lt;a href="https://mui.com/x/" rel="noopener noreferrer"&gt;MUI X&lt;/a&gt; is the premium product of MUI. Using the most powerful Data Grid on the market, you'll be able to build complex applications. &lt;br&gt;
The MUI X package makes it possible for apps to have complex use-cases that are supported by several advanced components.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Data Grid&lt;/li&gt;
&lt;li&gt;Date Picker&lt;/li&gt;
&lt;li&gt;Tree View&lt;/li&gt;
&lt;li&gt;Sparkline Chart&lt;/li&gt;
&lt;li&gt;Charts&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;The MUI Data Grid is a data table powerhouse. It comes with a multitude of features that make working with lots of data more efficient. From Editing to filtering MUI X is available for both Free and Premium plans of MUI.&lt;/p&gt;

&lt;p&gt;Follow the MUI X &lt;a href="https://github.com/mui-org/material-ui-x/projects/1" rel="noopener noreferrer"&gt;roadmap&lt;/a&gt; for future updates.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ftr85n29yhh2xm4946ahn.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ftr85n29yhh2xm4946ahn.png" alt="mui-x" width="800" height="422"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h5&gt;
  
  
  &lt;strong&gt;All New MUI Store&lt;/strong&gt;
&lt;/h5&gt;

&lt;p&gt;Find your desired premium MUI &lt;a href="https://mui.com/store" rel="noopener noreferrer"&gt;template&lt;/a&gt; in different categories like landing pages, Dashboard Templates and, E-commerce Templates.&lt;/p&gt;

&lt;p&gt;The fun fact is the MUI store collection has an average of 4.5 ratings with hand-tested by the MUI team.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fb68evu3ntfgy69vojhoz.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fb68evu3ntfgy69vojhoz.png" alt="mui-store" width="800" height="393"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h5&gt;
  
  
  &lt;strong&gt;Design Kits&lt;/strong&gt;
&lt;/h5&gt;

&lt;p&gt;MUI &lt;a href="https://mui.com/design-kits/" rel="noopener noreferrer"&gt;Design Kits&lt;/a&gt; is now in your favorite design tools - Sketch, Figma, and XD. &lt;/p&gt;

&lt;p&gt;Pick your favorite design tool, whether it's XD, Figma, or Sketch, to enjoy and use MUI components. Boost consistency and facilitate communication when working with developers.&lt;/p&gt;

&lt;p&gt;Designing with the same library will make development easier because you'll understand how it works, no matter you are Designers, Product Managers, or Developers you will surely love the MUI Design kits.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F2zlgouud69fdyrk5ehvk.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F2zlgouud69fdyrk5ehvk.png" alt="mui-designkits" width="800" height="422"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  &lt;strong&gt;The Team behind MUI&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;Most of MUI's core contributors are volunteers, and without the support of the community, MUI wouldn't be able to exist. There are a lot of professionals from different countries contributing to the MUI project.&lt;/p&gt;

&lt;p&gt;Here is Core &lt;a href="https://mui.com/about/" rel="noopener noreferrer"&gt;Team&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fils9y3g96n06bc4gb2d0.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fils9y3g96n06bc4gb2d0.png" alt="mui-team" width="800" height="538"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  &lt;strong&gt;How to support MUI?&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;You can support MUI via three different channels&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Give them &lt;a href="https://github.com/mui-org/material-ui/issues?q=is%3Aissue+is%3Aopen+sort%3Areactions-%2B1-desc" rel="noopener noreferrer"&gt;feedback&lt;/a&gt;
&lt;/li&gt;
&lt;li&gt;Answer questions on &lt;a href="https://stackoverflow.com/questions/tagged/material-ui" rel="noopener noreferrer"&gt;Stackoverflow&lt;/a&gt;
&lt;/li&gt;
&lt;li&gt;Support them Financially via &lt;a href="https://opencollective.com/material-ui" rel="noopener noreferrer"&gt;Open collective&lt;/a&gt;
&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  &lt;strong&gt;Showcase&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;You can find some of the &lt;a href="https://mui.com/discover-more/showcase/" rel="noopener noreferrer"&gt;public&lt;/a&gt; apps using MUI. The websites included there have the following dimensions&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Non-Material Design Customization&lt;/li&gt;
&lt;li&gt;High Traffic&lt;/li&gt;
&lt;li&gt;Open Source&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  &lt;strong&gt;Open Source React MUI Templates&lt;/strong&gt;
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;a href="https://mui.com/store/items/berry-react-material-admin-free/" rel="noopener noreferrer"&gt;Berry Free&lt;/a&gt; React Admin Dashboard&lt;/li&gt;
&lt;li&gt;&lt;a href="https://mui.com/store/items/minimal-dashboard-free/" rel="noopener noreferrer"&gt;Minimal&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://mui.com/store/items/devias-kit/" rel="noopener noreferrer"&gt;Devias&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  &lt;strong&gt;Premium React Material MUI Templates&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;You can find the top 10 react material-ui admin templates in my other &lt;a href="https://dev.to/rakesh_nakrani/10-best-react-material-ui-admin-template-51ob"&gt;post&lt;/a&gt;. But here I’m list few of popular templates.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;a href="https://mui.com/store/items/berry-react-material-admin/" rel="noopener noreferrer"&gt;Berry&lt;/a&gt; React Dashboard Template&lt;/li&gt;
&lt;li&gt;
&lt;a href="https://mui.com/store/items/flexy-react-admin-dashboard/" rel="noopener noreferrer"&gt;Flexy&lt;/a&gt; React&lt;/li&gt;
&lt;li&gt;&lt;a href="https://mui.com/store/items/material-app/" rel="noopener noreferrer"&gt;Material App Pro&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;For the full blog post that this is based on, jump to: &lt;a href="https://mui.com/blog/material-ui-is-now-mui/" rel="noopener noreferrer"&gt;https://mui.com/blog/material-ui-is-now-mui/&lt;/a&gt;&lt;/strong&gt; &lt;/p&gt;

</description>
      <category>react</category>
      <category>javascript</category>
      <category>typescript</category>
    </item>
    <item>
      <title>Berry Pro React Admin Released</title>
      <dc:creator>Rakesh Nakrani</dc:creator>
      <pubDate>Mon, 31 May 2021 05:11:30 +0000</pubDate>
      <link>https://dev.to/rakesh_nakrani/berry-react-pro-released-3lj1</link>
      <guid>https://dev.to/rakesh_nakrani/berry-react-pro-released-3lj1</guid>
      <description>&lt;p&gt;Finally, The day is here. Berry Pro is released and available to purchase from Material-UI &lt;a href="https://material-ui.com/store/items/berry-react-material-admin/" rel="noopener noreferrer"&gt;store&lt;/a&gt;. Berry is a beautiful react admin template made using Material-UI v5 component library. You can build anything from a User Management panel to any complex backend project with power of fully structured code style and minimal User Interface.&lt;/p&gt;

&lt;p&gt;Berry is meant to be built for faster development with flexibility. In terms of development &amp;amp; easing work flow, we’ve made the standard folder structure and prettier code style that cut down your development time and money.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;To know more about Berry here is our post - &lt;a href="https://dev.to/rakesh_nakrani/all-you-need-to-know-about-berry-react-li6"&gt;Everything About Berry&lt;/a&gt;.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;In this post, I do focusing more in depth about Berry's concern UI framework, why you choose Berry over other and what challenges we face while working on Berry project.&lt;br&gt;
Table of content&lt;/p&gt;

&lt;h4&gt;
  
  
  Table of content
&lt;/h4&gt;

&lt;ul&gt;
&lt;li&gt;Why Material-UI?&lt;/li&gt;
&lt;li&gt;What makes Berry different?&lt;/li&gt;
&lt;li&gt;While working on the Berry Project.&lt;/li&gt;
&lt;li&gt;Future plans &amp;amp; RoadMap&lt;/li&gt;
&lt;li&gt;Important links&lt;/li&gt;
&lt;/ul&gt;

&lt;h4&gt;
  
  
  Why Material-UI a preferred choice for Berry?
&lt;/h4&gt;

&lt;p&gt;When you think about Reactjs UI library, your might have 3 top choices for choosing reliable component library i.e. React Bootstrap, Ant design, and &lt;a href="https://material-ui.com/" rel="noopener noreferrer"&gt;Material-UI&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;Well, Here we detailed the Material-UI’s best features &lt;a href="https://dev.to/kylehunter/6-six-reasons-to-use-material-ui-for-react-1anh"&gt;compared to others&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;Strictly follow Material design guidelines.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;It provides utility components, hooks, helpers and the theme customization engine.&lt;/li&gt;
&lt;li&gt;Designed for server-side rendering.&lt;/li&gt;
&lt;li&gt;CSS in JS solution combined with styled-components.&lt;/li&gt;
&lt;li&gt;Aesthetically brilliant with its animations and design styles.&lt;/li&gt;
&lt;li&gt;Each component functions independently.&lt;/li&gt;
&lt;li&gt;Extensive support for issues and bugs.&lt;/li&gt;
&lt;li&gt;Regularly updated library.&lt;/li&gt;
&lt;li&gt;Useful Documentation.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;In terms of appearance, Material-UI is a lot more dynamic and appealing when compared to React Bootstrap’s standard design.&lt;/p&gt;

&lt;h4&gt;
  
  
  What makes Berry unique in Crowd?
&lt;/h4&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F1occxodqlmtq7vb6az4s.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F1occxodqlmtq7vb6az4s.jpg" alt="Berry react admin template" width="800" height="600"&gt;&lt;/a&gt;&lt;br&gt;
Firstly, Berry’s refreshed design makes a significant difference from others. Secondly, Berry’s optimized code standard &amp;amp; easy to use folder structure opens the gate of easing development.&lt;/p&gt;

&lt;p&gt;For that we have made the Berry in a way that saves your thousands of dollars on development.&lt;/p&gt;

&lt;p&gt;Reasons to choose Berry&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Code Performance&lt;/li&gt;
&lt;li&gt;Custom Components&lt;/li&gt;
&lt;li&gt;Over 90+ pages to choose on.&lt;/li&gt;
&lt;li&gt;Highly responsive and fully tested design.&lt;/li&gt;
&lt;li&gt;Video Tutorials and Easy Documentation Guide.&lt;/li&gt;
&lt;li&gt;Theme variants with predefined customization options like Font Family selection, Border Radius settings, and dark - light options.&lt;/li&gt;
&lt;li&gt;5+ fully configured Applications.&lt;/li&gt;
&lt;li&gt;2+ conceptual Dashboards.&lt;/li&gt;
&lt;li&gt;And lots more features.&lt;/li&gt;
&lt;/ul&gt;

&lt;h4&gt;
  
  
  While making Berry
&lt;/h4&gt;

&lt;p&gt;Before making Berry - we have made a pre-plan that makes sense for our final product. We are continuously on track to overcome the pain points of our users. For that we have made lots of iteration processes with agile methodology.&lt;/p&gt;

&lt;h5&gt;
  
  
  Design Phase
&lt;/h5&gt;

&lt;p&gt;Design is the most crucial part of Berry. You just “wow” when you see the Berry for the first time. We know it better that the user's first interaction is Design instead of looking further into code.  So we got our first pain point - “The Design” or you may say “User Interface”.  Now it's time to re-think upon our past experience &amp;amp; make some fresh interface which is out of the box in the current market.&lt;/p&gt;

&lt;p&gt;In this phase, &lt;a href="https://twitter.com/olivtassinari" rel="noopener noreferrer"&gt;Mr. Olivier&lt;/a&gt; (Co-founder of Material-UI) helps us a lot to finalize the overall design aesthetics of Berry. We are also very much thankful to Mr. Olivier for supporting us in the whole project.&lt;/p&gt;

&lt;h5&gt;
  
  
  Development Phase
&lt;/h5&gt;

&lt;p&gt;It’s magic time to turn design into reality, Skin needs a hard skeleton for standing in a crowd. For that Material-UI serves the role of Skeleton. It has everything you demand for your next backend project. From UI components to design engine Material-UI is out of the box for faster development.&lt;br&gt;
Firstly, Berry is develop in Material-UI v4 version and while working version 5 is out with drastic changes in Performance. We have decided to migrate v4 to v5. Version 5 is our best decision to migrate Berry into it.&lt;/p&gt;

&lt;p&gt;It takes us almost 3 months of time to develop Berry from scratch. Each line of code is written carefully with proper style &amp;amp; formatting.&lt;/p&gt;

&lt;p&gt;You surely love the well commented code and easy navigation flow while using Berry for your next project.&lt;/p&gt;

&lt;h5&gt;
  
  
  Testing Phase
&lt;/h5&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fyrhe88on3vnga5095lej.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fyrhe88on3vnga5095lej.jpg" alt="berry react testing" width="800" height="600"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;“Making a Dashboard Template is a big thing” - You need to take care of each aspect of Design rendering, Code Performance, Speed, Validation, Device &amp;amp; Browser compatibility.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;For Berry - Our past experience plays a significant role in the Testing Phase. We have a huge portfolio in &lt;a href="https://codedthemes.com/item/category/templates/admin-templates/" rel="noopener noreferrer"&gt;Admin Templates&lt;/a&gt; and know the process for the best practices for smooth testing flow.&lt;/p&gt;

&lt;p&gt;Our main challenge is for Dark layout and Responsive testing in modern devices.&lt;/p&gt;

&lt;p&gt;Each of our member from our team really worked hard to make Berry a high performance product. For responsive tests we have used the real devices that cover iPad, iPhone, iMac &amp;amp; Android devices. So you get a smooth interface in every corner of your project.&lt;/p&gt;

&lt;h4&gt;
  
  
  RoadMap
&lt;/h4&gt;

&lt;p&gt;Considering Berry as our long-run project - we do continuous work on the following activities for future plans.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Knowledge Base for more easing help&lt;/li&gt;
&lt;li&gt;
&lt;a href="https://youtube.com/playlist?list=PLknn3jaIuWiDKKEy3EO-p5-MP1nSOgUr1" rel="noopener noreferrer"&gt;Video tutorial series&lt;/a&gt; - Guided Installation videos, detailed setup process that makes less burden to work with Berry&lt;/li&gt;
&lt;li&gt;
&lt;a href="https://codedthemes.gitbook.io/berry/roadmap" rel="noopener noreferrer"&gt;Roadmap&lt;/a&gt; for future releases&lt;/li&gt;
&lt;li&gt;Focus on detailing the &lt;a href="https://codedthemes.gitbook.io/berry/" rel="noopener noreferrer"&gt;Documentation&lt;/a&gt;
&lt;/li&gt;
&lt;/ul&gt;

&lt;h4&gt;
  
  
  Important Links
&lt;/h4&gt;

&lt;ul&gt;
&lt;li&gt;&lt;a href="https://www.producthunt.com/posts/berry-react-admin" rel="noopener noreferrer"&gt;Product Hunt&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;Live Preview - &lt;a href="https://berrydashboard.com/" rel="noopener noreferrer"&gt;https://berrydashboard.com/&lt;/a&gt;
&lt;/li&gt;
&lt;li&gt;Get Berry - &lt;a href="https://material-ui.com/store/items/berry-react-material-admin/" rel="noopener noreferrer"&gt;https://material-ui.com/store/items/berry-react-material-admin/&lt;/a&gt;
&lt;/li&gt;
&lt;li&gt;Free version - &lt;a href="https://github.com/codedthemes/berry-free-react-admin-template/" rel="noopener noreferrer"&gt;https://github.com/codedthemes/berry-free-react-admin-template/&lt;/a&gt;
&lt;/li&gt;
&lt;/ul&gt;

</description>
      <category>javascript</category>
      <category>react</category>
      <category>webdev</category>
    </item>
    <item>
      <title>It's out now - Berry Free React Admin Template</title>
      <dc:creator>Rakesh Nakrani</dc:creator>
      <pubDate>Mon, 10 May 2021 06:28:03 +0000</pubDate>
      <link>https://dev.to/rakesh_nakrani/it-s-out-now-berry-free-react-admin-template-hk3</link>
      <guid>https://dev.to/rakesh_nakrani/it-s-out-now-berry-free-react-admin-template-hk3</guid>
      <description>&lt;p&gt;It's finally here. Berry open-source react admin template is available to download. &lt;/p&gt;

&lt;p&gt;If you don't know about Berry - Here is my post on &lt;a href="https://dev.to/rakesh_nakrani/all-you-need-to-know-about-berry-react-li6"&gt;Everything about Berry&lt;/a&gt;. This product is minimal yet beautiful for your next React backend project.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;Berry is managed by team @CodedThemes&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;We have made lots of design Iteration and usability testing to overcome the customer’s pain points. Our customer-first approach gives us the motivation towards the Berry journey. You feel amazed after seeing the Berry User Interface.&lt;/p&gt;

&lt;p&gt;It is build using Material-UI a top-rated Material design React component library. For newcomers React is an open-source library, the most popular at this moment which actively supported by Facebook.&lt;/p&gt;

&lt;h2&gt;
  
  
  Table of contents
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;Why Berry?&lt;/li&gt;
&lt;li&gt;Download&lt;/li&gt;
&lt;li&gt;Getting Started&lt;/li&gt;
&lt;li&gt;Documentation&lt;/li&gt;
&lt;li&gt;Technology Stack&lt;/li&gt;
&lt;li&gt;License&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  Why Berry?
&lt;/h3&gt;

&lt;p&gt;Berry brings everything you need for dashboard development. We have added the following features in the initial release.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Modern aesthetics UI design&lt;/li&gt;
&lt;li&gt;Material-UI components&lt;/li&gt;
&lt;li&gt;Fully Responsive, all modern browser supported&lt;/li&gt;
&lt;li&gt;Easy to use code structure&lt;/li&gt;
&lt;li&gt;Flexible &amp;amp; High-Performance code&lt;/li&gt;
&lt;li&gt;Easy Documentation Guide&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  Download
&lt;/h3&gt;


&lt;div class="ltag-github-readme-tag"&gt;
  &lt;div class="readme-overview"&gt;
    &lt;h2&gt;
      &lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fassets.dev.to%2Fassets%2Fgithub-logo-5a155e1f9a670af7944dd5e12375bc76ed542ea80224905ecaf878b9157cdefc.svg" alt="GitHub logo"&gt;
      &lt;a href="https://github.com/codedthemes" rel="noopener noreferrer"&gt;
        codedthemes
      &lt;/a&gt; / &lt;a href="https://github.com/codedthemes/berry-free-react-admin-template" rel="noopener noreferrer"&gt;
        berry-free-react-admin-template
      &lt;/a&gt;
    &lt;/h2&gt;
    &lt;h3&gt;
      Berry free react material-ui admin template for easing and faster web development.
    &lt;/h3&gt;
  &lt;/div&gt;
  &lt;div class="ltag-github-body"&gt;
    
&lt;div id="readme" class="md"&gt;
&lt;div class="markdown-heading"&gt;
&lt;h1 class="heading-element"&gt;Berry Free React Material UI Admin Template &lt;a href="https://twitter.com/intent/tweet?text=Get%20Berry%20React%20-%20The%20most%20beautiful%20Material%20designed%20Admin%20Dashboard%20Template%20&amp;amp;url=https://berrydashboard.com&amp;amp;via=codedthemes&amp;amp;hashtags=reactjs,webdev,developers,javascript" rel="nofollow noopener noreferrer"&gt;&lt;img src="https://camo.githubusercontent.com/cb820a0ecc9645168e33b03925d7f14691262ddbaeaf66a0a91697803d0cba2d/68747470733a2f2f696d672e736869656c64732e696f2f747769747465722f75726c2f687474702f736869656c64732e696f2e7376673f7374796c653d736f6369616c" alt="Tweet"&gt;&lt;/a&gt;
&lt;/h1&gt;
&lt;/div&gt;
&lt;p&gt;&lt;a href="https://opensource.org/licenses/MIT" rel="nofollow noopener noreferrer"&gt;&lt;img src="https://camo.githubusercontent.com/fdf2982b9f5d7489dcf44570e714e3a15fce6253e0cc6b5aa61a075aac2ff71b/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f4c6963656e73652d4d49542d79656c6c6f772e737667" alt="License: MIT"&gt;&lt;/a&gt;
&lt;a href="https://github.com/codedthemes/berry-free-react-admin-template/blob/main/LICENSE" rel="noopener noreferrer"&gt;&lt;img src="https://camo.githubusercontent.com/6c546ddf637b8172823c895707a0e1044f1f90e2a3db73b24424a5014fb53ae6/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f70726963652d465245452d3030393866372e737667" alt="Price"&gt;&lt;/a&gt;
&lt;a href="https://github.com/codedthemes/berry-free-react-admin-template/" rel="noopener noreferrer"&gt;&lt;img src="https://camo.githubusercontent.com/0e20eaff681ccff97d94e7fcf8c1cac1501f9c6755fcdab18702223951eeade9/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f7061636b6167652d6a736f6e2f762f636f6465647468656d65732f6d616e7469732d667265652d72656163742d61646d696e2d74656d706c617465" alt="GitHub package version"&gt;&lt;/a&gt;
&lt;a href="https://codedthemes.com/item/berry-mui-free-react-admin-template/" rel="nofollow noopener noreferrer"&gt;&lt;img src="https://camo.githubusercontent.com/d2f9f6c85cd3fb504d7897c908f4404a9c271195874c464286de4315675913a1/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f446f776e6c6f61642d5a49502d626c75653f7374796c653d666c61742d737175617265266c6f676f3d676974687562" alt="Download ZIP"&gt;&lt;/a&gt;
&lt;a href="https://discord.com/invite/p2E2WhCb6s" rel="nofollow noopener noreferrer"&gt;&lt;img src="https://camo.githubusercontent.com/f3879dc225e391b131ed6599f8fe5cf5a140290fb04eeb4bcd190959049e7be1/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f4a6f696e2d446973636f72642d3538363546323f7374796c653d666c61742d737175617265266c6f676f3d646973636f7264266c6f676f436f6c6f723d7768697465" alt="Join Discord"&gt;&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;Berry is a free Material UI admin dashboard template built with React. It is meant to provide the best possible User Experience with highly customizable feature-rich pages. It is a complete Dashboard Template that has easy and intuitive responsive design whether it is viewed on retina screens or laptops.&lt;/p&gt;
&lt;p&gt;✨ Support us! If you like this theme, click the ⭐ (Top right) and let it shine&lt;/p&gt;
&lt;p&gt;&lt;a rel="noopener noreferrer nofollow" href="https://camo.githubusercontent.com/1bf687333df81ba1f7a30c38e70479f422cd3caa4728c7249174f1203a306a50/68747470733a2f2f626572727964617368626f6172642e636f6d2f696d702d696d616765732f62657272792d6769746875622d667265652d7265706f2d312e6a7067"&gt;&lt;img src="https://camo.githubusercontent.com/1bf687333df81ba1f7a30c38e70479f422cd3caa4728c7249174f1203a306a50/68747470733a2f2f626572727964617368626f6172642e636f6d2f696d702d696d616765732f62657272792d6769746875622d667265652d7265706f2d312e6a7067" alt="IMG_8566.jpg"&gt;&lt;/a&gt;&lt;/p&gt;
&lt;div class="markdown-heading"&gt;
&lt;h2 class="heading-element"&gt;Table of contents&lt;/h2&gt;
&lt;/div&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href="https://github.com/codedthemes/berry-free-react-admin-template#getting-started" rel="noopener noreferrer"&gt;Getting Started&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://github.com/codedthemes/berry-free-react-admin-template#download" rel="noopener noreferrer"&gt;Download&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://github.com/codedthemes/berry-free-react-admin-template#why-berry" rel="noopener noreferrer"&gt;Why Berry?&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://github.com/codedthemes/berry-free-react-admin-template#whats-included-in-premium-version" rel="noopener noreferrer"&gt;What's included in Premium Version?&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://github.com/codedthemes/berry-free-react-admin-template#documentation" rel="noopener noreferrer"&gt;Documentation&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://github.com/codedthemes/berry-free-react-admin-template#browser-support" rel="noopener noreferrer"&gt;Browser support&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://github.com/codedthemes/berry-free-react-admin-template#technology-stack" rel="noopener noreferrer"&gt;Technology Stack&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://github.com/codedthemes/berry-free-react-admin-template#berry-figma-ui-kit" rel="noopener noreferrer"&gt;Berry Figma UI Kit&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://github.com/codedthemes/berry-free-react-admin-template#other-technologies" rel="noopener noreferrer"&gt;Other Technologies&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;💰&lt;a href="https://github.com/codedthemes/berry-free-react-admin-template#save-more-with-big-bundle" rel="noopener noreferrer"&gt;Save more with Big Bundle&lt;/a&gt;💰&lt;/li&gt;
&lt;li&gt;&lt;a href="https://github.com/codedthemes/berry-free-react-admin-template#more-react-dashboard-templates" rel="noopener noreferrer"&gt;More React Dashboard Templates&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://github.com/codedthemes/berry-free-react-admin-template#issues" rel="noopener noreferrer"&gt;Issues?&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://github.com/codedthemes/berry-free-react-admin-template#license" rel="noopener noreferrer"&gt;License&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://github.com/codedthemes/berry-free-react-admin-template#contributor" rel="noopener noreferrer"&gt;Contributor&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://github.com/codedthemes/berry-free-react-admin-template#useful-resources" rel="noopener noreferrer"&gt;Useful Resources&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://github.com/codedthemes/berry-free-react-admin-template#community" rel="noopener noreferrer"&gt;Community&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://github.com/codedthemes/berry-free-react-admin-template#follow-us" rel="noopener noreferrer"&gt;Follow us&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;div class="markdown-heading"&gt;
&lt;h2 class="heading-element"&gt;Getting Started&lt;/h2&gt;
&lt;/div&gt;
&lt;p&gt;Clone from Github&lt;/p&gt;
&lt;div class="snippet-clipboard-content notranslate position-relative overflow-auto"&gt;&lt;pre class="notranslate"&gt;&lt;code&gt;git clone https://github.com/codedthemes/berry-free-react-admin-template.git
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;div class="markdown-heading"&gt;
&lt;h2 class="heading-element"&gt;Download&lt;/h2&gt;

&lt;/div&gt;
&lt;ul&gt;
&lt;li&gt;Berry Free
&lt;ul&gt;
&lt;li&gt;&lt;a href="https://berrydashboard.com/free/" rel="nofollow noopener noreferrer"&gt;Live Preview&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://github.com/codedthemes/berry-free-react-admin-template" rel="noopener noreferrer"&gt;Download&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;Berry
&lt;ul&gt;
&lt;li&gt;&lt;a href="https://berrydashboard.com" rel="nofollow noopener noreferrer"&gt;Live Preview&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://material-ui.com/store/items/berry-react-material-admin/" rel="nofollow noopener noreferrer"&gt;Download&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;div class="markdown-heading"&gt;
&lt;h2 class="heading-element"&gt;Why Berry?&lt;/h2&gt;

&lt;/div&gt;
&lt;p&gt;Berry offers everything you need to create dashboards. We have included the following high-end…&lt;/p&gt;
&lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="gh-btn-container"&gt;&lt;a class="gh-btn" href="https://github.com/codedthemes/berry-free-react-admin-template" rel="noopener noreferrer"&gt;View on GitHub&lt;/a&gt;&lt;/div&gt;
&lt;/div&gt;


&lt;p&gt;&lt;strong&gt;Free Version&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;a href="https://berrydashboard.com/free/dashboard/default" rel="noopener noreferrer"&gt;Live Preview&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;Download from &lt;a href="https://github.com/codedthemes/berry-free-react-admin-template" rel="noopener noreferrer"&gt;Github&lt;/a&gt;
&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;Pro version&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;a href="https://berrydashboard.com" rel="noopener noreferrer"&gt;Live Preview&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://material-ui.com/store/items/berry-react-material-admin/" rel="noopener noreferrer"&gt;Purchase&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  Getting Started
&lt;/h3&gt;

&lt;p&gt;Clone from GitHub&lt;br&gt;
&lt;code&gt;git clone https://github.com/codedthemes/berry-free-react-admin-template.git&lt;/code&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  Documentation
&lt;/h3&gt;

&lt;p&gt;Berry documentation helps you out in all aspects from installation to deployment.&lt;/p&gt;

&lt;h3&gt;
  
  
  Technology Stack
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;a href="http://material-ui.com" rel="noopener noreferrer"&gt;Material-UI&lt;/a&gt; Component library.&lt;/li&gt;
&lt;li&gt;Built with React Hooks API.&lt;/li&gt;
&lt;li&gt;Redux &amp;amp; React Context API for State Management.&lt;/li&gt;
&lt;li&gt;React Router for Navigation Routing.&lt;/li&gt;
&lt;li&gt;Support of react-script.&lt;/li&gt;
&lt;li&gt;Code Splitting.&lt;/li&gt;
&lt;li&gt;CSS-in-JS where CSS is composed using JavaScript instead of defined in external files.&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  Issues
&lt;/h3&gt;

&lt;p&gt;Please generate a &lt;a href="https://github.com/codedthemes/berry-free-react-admin-template/issues" rel="noopener noreferrer"&gt;GitHub issue&lt;/a&gt; if you found a bug in any version. We love to resolve any issue.&lt;/p&gt;

&lt;h3&gt;
  
  
  License
&lt;/h3&gt;

&lt;p&gt;&lt;strong&gt;Free&lt;/strong&gt; version cover under &lt;a href="https://github.com/codedthemes/datta-able-bootstrap-dashboard/blob/master/LICENSE" rel="noopener noreferrer"&gt;MIT&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  Follow us
&lt;/h3&gt;

&lt;p&gt;Website &lt;a href="https://berrydashboard.com" rel="noopener noreferrer"&gt;https://berrydashboard.com&lt;/a&gt;&lt;br&gt;
Blog &lt;a href="https://blog.berrydashboard.com" rel="noopener noreferrer"&gt;https://blog.berrydashboard.com&lt;/a&gt;&lt;br&gt;
CodedThemes &lt;a href="https://codedthemes.com" rel="noopener noreferrer"&gt;https://codedthemes.com&lt;/a&gt;&lt;br&gt;
Dribbble &lt;a href="https://dribbble.com/codedthemes" rel="noopener noreferrer"&gt;https://dribbble.com/codedthemes&lt;/a&gt;&lt;br&gt;
Facebook &lt;a href="https://www.facebook.com/codedthemes" rel="noopener noreferrer"&gt;https://www.fb.com/codedthemes&lt;/a&gt;&lt;br&gt;
Twitter &lt;a href="https://twitter.com/codedthemes" rel="noopener noreferrer"&gt;https://twitter.com/codedthemes&lt;/a&gt;&lt;/p&gt;

</description>
      <category>opensource</category>
      <category>react</category>
      <category>javascript</category>
      <category>webdev</category>
    </item>
    <item>
      <title>14+ Best React Material UI (MUI) Admin Dashboard Template</title>
      <dc:creator>Rakesh Nakrani</dc:creator>
      <pubDate>Wed, 05 May 2021 15:36:52 +0000</pubDate>
      <link>https://dev.to/rakesh_nakrani/10-best-react-material-ui-admin-template-51ob</link>
      <guid>https://dev.to/rakesh_nakrani/10-best-react-material-ui-admin-template-51ob</guid>
      <description>&lt;p&gt;In this article, I present a curated list of the top React &lt;a href="https://mui.com" rel="noopener noreferrer"&gt;Material-UI&lt;/a&gt; admin templates for 2023. Each template in this collection is crafted using Material-UI, a widely acclaimed component &lt;a href="https://github.com/mui-org/material-ui" rel="noopener noreferrer"&gt;library&lt;/a&gt; that adheres to the Material Design Guidelines. These templates have been a popular choice and are guaranteed to provide an exceptional user experience.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;To ensure that you find a template that best suits your project's requirements, I have meticulously filtered this list based on three critical criteria: Usability, Flexibility, and Compatibility. These templates are not only powerful but also highly functional, making them an excellent choice for any project.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Most of the templates on this list offer a range of commonly-used features such as Axios, React Hooks, React-Redux, and Authentication methods like Auth0, Firebase, and JWT. In addition, some of these templates support both JavaScript and TypeScript languages, providing greater flexibility and ease of use. Regardless of your preferred language or authentication method, you are sure to find a template that fits your specific needs from this list.&lt;/p&gt;

&lt;p&gt;I have compiled a list of the best React Material-UI admin templates based on my extensive research. Whether you are a beginner or an experienced developer, you are sure to find a template that meets your needs. I hope that you find this post helpful and are able to choose a template that best suits your project requirements.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;This Article updated on - &lt;strong&gt;19/09/2025&lt;/strong&gt;&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;&lt;strong&gt;Template List&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Able Pro&lt;/li&gt;
&lt;li&gt;Mantis React&lt;/li&gt;
&lt;li&gt;Berry React&lt;/li&gt;
&lt;li&gt;Devias Kit Pro&lt;/li&gt;
&lt;li&gt;Materio Dashboard&lt;/li&gt;
&lt;li&gt;Materially&lt;/li&gt;
&lt;li&gt;Flexy React&lt;/li&gt;
&lt;li&gt;Minimal&lt;/li&gt;
&lt;li&gt;Fuse React&lt;/li&gt;
&lt;li&gt;Material Dashboard Pro&lt;/li&gt;
&lt;li&gt;Jumbo&lt;/li&gt;
&lt;li&gt;Mira Pro&lt;/li&gt;
&lt;li&gt;
React Material Admin by FlatLogic&lt;/li&gt;
&lt;li&gt;
SaasAble.io - coming soon&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  &lt;strong&gt;Able Pro Material React Dashboard Template&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F6xoev2fncrbo9cpke0gb.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F6xoev2fncrbo9cpke0gb.jpg" alt="Able Pro Material React Dashboard Template" width="800" height="456"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Themeforest offers a range of dashboard templates, including the popular Able Pro Material-UI React Dashboard template. This versatile design has been adopted by more than 2.5K customers, including both startup ventures and Fortune 500 companies, to address their backend requirements.&lt;/p&gt;

&lt;h5&gt;
  
  
  Multiple Reasons to choose Able Pro Dashboard Template?
&lt;/h5&gt;

&lt;ul&gt;
&lt;li&gt;Refreshed User Interface with high Aesthetics.&lt;/li&gt;
&lt;li&gt;One of the Handpicked Featured Template of Themeforest.&lt;/li&gt;
&lt;li&gt;Developed by Elite Author with 9+ Years of Experience in Dashboard Making.&lt;/li&gt;
&lt;li&gt;TypeScript Support.&lt;/li&gt;
&lt;li&gt;Complete Figma Design resource file.&lt;/li&gt;
&lt;li&gt;Light/Dark, Vertical, Horizontal Layouts with RTL and Multi-Language support.&lt;/li&gt;
&lt;li&gt;13+ Layouts options.&lt;/li&gt;
&lt;li&gt;7+ conceptual Apps for Chat, Kanban, Invoice, E-commerce, User Management, CRM, and Calendar.&lt;/li&gt;
&lt;li&gt;Material UI components with Advance Components.&lt;/li&gt;
&lt;li&gt;Supports Auth0, JWT, Firebase &amp;amp; AWS Cognito Auth Methods.&lt;/li&gt;
&lt;li&gt;Easy folder structure and well optimised code standard.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;a href="https://ableproadmin.com/react" rel="noopener noreferrer"&gt;Live Preview&lt;/a&gt; | &lt;a href="https://1.envato.market/c/1289604/275988/4415?subId1=phoenixcoded&amp;amp;u=https%3A%2F%2Fthemeforest.net%2Fitem%2Fable-pro-responsive-bootstrap-4-admin-template%2F19300403" rel="noopener noreferrer"&gt;Purchase&lt;/a&gt;&lt;br&gt;
Made by Elite Author - &lt;a href="https://themeforest.net/user/phoenixcoded" rel="noopener noreferrer"&gt;Phoenixcoded&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  &lt;strong&gt;Mantis Dashboard&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fwdto4co4ky8z22so9gta.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fwdto4co4ky8z22so9gta.jpg" alt="Mantis React Dashboard Template" width="800" height="456"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;To define Mantis In one word - You can call it a &lt;strong&gt;masterpiece&lt;/strong&gt;. A minimal and Simplistic Design aesthetic makes Mantis an Enterprise grade React Dashboard Template. Mantis is made using Material-UI a popular frontend React component library that gives fuel to this awesome template.&lt;/p&gt;

&lt;h5&gt;
  
  
  Why Mantis Dashboard?
&lt;/h5&gt;

&lt;ul&gt;
&lt;li&gt;Skeleton/Seed version for quick start using Mantis.&lt;/li&gt;
&lt;li&gt;JavaScript/TypeScript Support.&lt;/li&gt;
&lt;li&gt;Nextjs Support&lt;/li&gt;
&lt;li&gt;Figma Design resource file.&lt;/li&gt;
&lt;li&gt;Light/Dark Layouts with RTL and Multi-Language support.&lt;/li&gt;
&lt;li&gt;5+ working Apps for E-commerce, User Management, CRM, Inbox, Chat, Calendar, Contact.&lt;/li&gt;
&lt;li&gt;Material UI components with Ant Design principle.&lt;/li&gt;
&lt;li&gt;Supports Auth0, JWT, Firebase &amp;amp; AWS Cognito Auth Methods.&lt;/li&gt;
&lt;li&gt;Easy folder structure and well optimised code standard.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;a href="https://mantisdashboard.com" rel="noopener noreferrer"&gt;Live Preview&lt;/a&gt; | &lt;a href="https://mui.com/store/items/mantis-react-admin-dashboard-template/" rel="noopener noreferrer"&gt;Purchase&lt;/a&gt;&lt;br&gt;
Made by - &lt;a href="https://codedthemes.com" rel="noopener noreferrer"&gt;CodedThemes&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  &lt;strong&gt;Berry React&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F6kw0j28gf0sakl2recl7.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F6kw0j28gf0sakl2recl7.gif" alt="berry react material-ui admin template" width="800" height="429"&gt;&lt;/a&gt;&lt;br&gt;
Berry is the trending Admin Dashboard Template build for simplifying your development by having performance-centric code. The new update of Berry is support both TypeScript and JavaScript with having starter version of Nextjs. Also, You can build your web applications faster and beautifully. At first glance, you definitely fall in love with Berry’s design. Berry gives you wings to fly high with your project for their standardized code structure, beautiful user interface, and feature-rich material-UI react admin template.&lt;/p&gt;

&lt;h5&gt;
  
  
  Why Choose Berry React?
&lt;/h5&gt;

&lt;ul&gt;
&lt;li&gt;Simple yet minimal Design with warm colour palettes gives you the best User Experience.&lt;/li&gt;
&lt;li&gt;TypeScript Support.&lt;/li&gt;
&lt;li&gt;Nextjs Support.&lt;/li&gt;
&lt;li&gt;Figma Design resource file.&lt;/li&gt;
&lt;li&gt;Light/Dark Layouts with RTL and Multi-Language support.&lt;/li&gt;
&lt;li&gt;5+ working Apps for User Management, Customer, Email, Chat, Calendar, Contact.&lt;/li&gt;
&lt;li&gt;Material UI extended and advanced form components.&lt;/li&gt;
&lt;li&gt;Supports Auth0, JWT, Firebase Authentication Methods.&lt;/li&gt;
&lt;li&gt;Easy folder structure and well optimised code standard.&lt;/li&gt;
&lt;li&gt;Knowledge-base, Tutorials series, and extensive Documentation guide.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;a href="https://berrydashboard.com" rel="noopener noreferrer"&gt;Live Preview&lt;/a&gt; | &lt;a href="https://material-ui.com/store/items/berry-react-material-admin/" rel="noopener noreferrer"&gt;Purchase&lt;/a&gt;&lt;br&gt;
Made by - &lt;a href="https://codedthemes.com" rel="noopener noreferrer"&gt;CodedThemes&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  &lt;strong&gt;Devias&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fwt4iz41zv1cmy39yszwp.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fwt4iz41zv1cmy39yszwp.jpg" alt="Devias Kit Pro material-ui admin template" width="800" height="456"&gt;&lt;/a&gt;&lt;br&gt;
If you want a professional backend template then Devias is the priority choice for you. I am considering Devias for its performance and highly flexible code structure along with always updated code. Devias also serve you better if you consider complex projects. It has ready-to-use Material-UI components developed with one common goal in mind, to help you build faster &amp;amp; beautiful applications. &lt;/p&gt;

&lt;h5&gt;
  
  
  Why Choose Devias Material Kit?
&lt;/h5&gt;

&lt;ul&gt;
&lt;li&gt;Error Free tested design &amp;amp; pure code.&lt;/li&gt;
&lt;li&gt;The design follows all the Material design guidelines.&lt;/li&gt;
&lt;li&gt;TypeScript support along with Figma &amp;amp; Sketch Design resource files.&lt;/li&gt;
&lt;li&gt;Authentication Methods with Amplify Auth support.&lt;/li&gt;
&lt;li&gt;Ready to deploy Folder structure.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;a href="https://material-kit-pro-react.devias.io/" rel="noopener noreferrer"&gt;Live Preview&lt;/a&gt; |  &lt;a href="https://material-ui.com/store/items/devias-kit-pro/" rel="noopener noreferrer"&gt;Purchase&lt;/a&gt;&lt;br&gt;
Made by - &lt;strong&gt;Devias&lt;/strong&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  &lt;strong&gt;Materio Dashboard&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F39vwsmqwuahyf6b8i43f.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F39vwsmqwuahyf6b8i43f.jpg" alt="Materio React Dashboard" width="800" height="456"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;If you're a developer looking for an MUI React Admin Template that's rich with features and highly customizable, check out Materio MUI React Next.js admin template. Materio is equipped with numerous features that will help you create a stunning, high-quality app exactly as you imagine it. Furthermore, they've added unique and useful administrative tools to the Materio admin template.&lt;/p&gt;

&lt;h5&gt;
  
  
  Why Choose Materio React ?
&lt;/h5&gt;

&lt;ul&gt;
&lt;li&gt;Gradient UI with all possible Dark/Light colors options.&lt;/li&gt;
&lt;li&gt;Next.js support.&lt;/li&gt;
&lt;li&gt;Multiple Apps - Email, Chat, Invoice, User, Roles management system.&lt;/li&gt;
&lt;li&gt;ESLint, Prettier, JWT, ACL - CASL support &lt;/li&gt;
&lt;li&gt;Clean code and well organized folder structure.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;a href="https://demos.themeselection.com/materio-mui-react-nextjs-admin-template/landing/" rel="noopener noreferrer"&gt;Live Preview&lt;/a&gt; |  &lt;a href="https://themeselection.com/item/materio-mui-react-nextjs-admin-template/" rel="noopener noreferrer"&gt;Purchase&lt;/a&gt;&lt;br&gt;
Made by - &lt;strong&gt;ThemeSelection&lt;/strong&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  &lt;strong&gt;Materially&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Flcrl07qykfv2dhaaixi3.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Flcrl07qykfv2dhaaixi3.jpg" alt="Materially React Dashboard Template" width="800" height="456"&gt;&lt;/a&gt;&lt;br&gt;
The reason to choose Materially is for its Simplicity and flexibility. If you want a Material design-specific admin template then you can go with Materially. Its color, card styles, shadow, pages are similar to material design guidelines. On the other hand, You can get a lot of pages, as well as pre-build apps like sass, e-commerce, chat, mail, and many more. The materially react dashboard template is a perfect duo of user experience design and coding standards.&lt;/p&gt;

&lt;h5&gt;
  
  
  Why Choose Materially React?
&lt;/h5&gt;

&lt;ul&gt;
&lt;li&gt;Pure Material Look and feel.&lt;/li&gt;
&lt;li&gt;5+ Working Apps and Advance UI components.&lt;/li&gt;
&lt;li&gt;Authentication Methods - Auth0, JWT, Firebase.&lt;/li&gt;
&lt;li&gt;Multilanguage and RTL Support.&lt;/li&gt;
&lt;li&gt;Form components and included 3’rd party plugins like MUI Data Table, Modal, Formik, and many more.&lt;/li&gt;
&lt;li&gt;Easy to access Documentation guide.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;a href="https://codedthemes.com/demos/admin-templates/materially/react/default" rel="noopener noreferrer"&gt;Live Preview&lt;/a&gt; | &lt;a href="https://codedthemes.com/item/materially-reactjs-admin-dashboard/" rel="noopener noreferrer"&gt;Purchase&lt;/a&gt;&lt;br&gt;
Made by - &lt;a href="https://codedthemes.com" rel="noopener noreferrer"&gt;CodedThemes&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  &lt;strong&gt;Flexy React&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fzm9n6n46sqopifr4p4ni.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fzm9n6n46sqopifr4p4ni.jpg" alt="Flexy Material React Admin Dashboard Template" width="800" height="456"&gt;&lt;/a&gt;&lt;br&gt;
Flexy is the newly launched React Admin Template built by WrapPixel. If you want one of the most influential fully responsive Material-UI template then Flexy is your priority choice for your next project. It also has modern design with well-acclaimed prestigious features. For your any simple/complex backend project flexy serve your need completely.&lt;/p&gt;

&lt;h5&gt;
  
  
  Why Choose Flexy React?
&lt;/h5&gt;

&lt;ul&gt;
&lt;li&gt;5+ Working React apps like Email, Calendar, Customers, Chat, Notes and lots more.&lt;/li&gt;
&lt;li&gt;3 Unique demos Default, Dark React and RTL.&lt;/li&gt;
&lt;li&gt;5+ Color themes.&lt;/li&gt;
&lt;li&gt;Form components, Widget feeds, Tables, Social Profile and lots more.&lt;/li&gt;
&lt;li&gt;Detailed Documentation with full flagged support.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;a href="https://flexy-react-main.netlify.app/dashboards/analytical" rel="noopener noreferrer"&gt;Live Preview&lt;/a&gt;&lt;br&gt;
Made by - &lt;a href="https://www.wrappixel.com/" rel="noopener noreferrer"&gt;WrapPixel&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  &lt;strong&gt;Minimal&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ffh4zmhuyd2inho8q321t.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ffh4zmhuyd2inho8q321t.jpg" alt="Alt Text" width="800" height="456"&gt;&lt;/a&gt;&lt;br&gt;
Minimal is worth it for its UI and excellent user experience. You must say “WOW! What a masterpiece” when you first see it. Minimal React is not just the ordinary backend template, It has everything that makes your project finish. From UI components to working apps you feel the Minimal experience same as its name proves. &lt;/p&gt;

&lt;h5&gt;
  
  
  Why Choose Minimal React?
&lt;/h5&gt;

&lt;ul&gt;
&lt;li&gt;Minimal design &amp;amp; timely support.&lt;/li&gt;
&lt;li&gt;Strong components and utility foundation.&lt;/li&gt;
&lt;li&gt;Working apps Mail, Chat, Calendar, and many more.&lt;/li&gt;
&lt;li&gt;Organized Structuring patterns in code and folder directory&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;a href="https://minimals.cc" rel="noopener noreferrer"&gt;Live Preview&lt;/a&gt; | &lt;a href="https://material-ui.com/store/items/minimal-dashboard/" rel="noopener noreferrer"&gt;Purchase&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Made by - Trinh Minimal&lt;/p&gt;

&lt;h3&gt;
  
  
  &lt;strong&gt;Fuse React&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fatbenotb14pbf9fitv4z.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fatbenotb14pbf9fitv4z.jpg" alt="Alt Text" width="800" height="456"&gt;&lt;/a&gt;&lt;br&gt;
Fuse React is top selling Material-UI Admin Template in Themeforest. It includes 5 example apps, 20+ pages, lots of reusable react components, and more. If you're looking for a powerful and professional admin template for Web Applications, CRM, CMS, Admin Panels then you may choose Fuse. This template isn't only a good place to start, but it also has a bunch of advanced stuff to learn.&lt;/p&gt;

&lt;h5&gt;
  
  
  Why Choose Fuse React?
&lt;/h5&gt;

&lt;ul&gt;
&lt;li&gt;React + TailwindCSS = Awesome UI&lt;/li&gt;
&lt;li&gt;Private GitHub Repository access.&lt;/li&gt;
&lt;li&gt;Multiple Layouts &amp;amp; Theme Styling options with having Multilanguage &amp;amp; RTL Support.&lt;/li&gt;
&lt;li&gt;E-commerce, Academy, To-do, File Manager, Mail, Contact, Chat, Srumboard, and many more full-featured applications.&lt;/li&gt;
&lt;li&gt;Extensive Documentation.&lt;/li&gt;
&lt;li&gt;Helper classes and Authentication Methods support.&lt;/li&gt;
&lt;li&gt;Typography font size selection.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;a href="http://react-material.fusetheme.com/" rel="noopener noreferrer"&gt;Live Preview&lt;/a&gt; | &lt;a href="https://themeforest.net/item/fuse-react-react-redux-material-design-admin-template/21769397" rel="noopener noreferrer"&gt;Purchase&lt;/a&gt;&lt;br&gt;
Made by - &lt;a href="http://www.withinpixels.com/" rel="noopener noreferrer"&gt;withinpixels&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  &lt;strong&gt;Material Dashboard Pro&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fw7x35wfqc3s5qrxl4r5d.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fw7x35wfqc3s5qrxl4r5d.jpg" alt="material dashboard pro by creative-tim" width="800" height="456"&gt;&lt;/a&gt;&lt;br&gt;
If you know the Creative-Tim, then I guarantee that you know the Material Dashboard PRO template. It is out of the box and a popular material admin template. Material Dashboard Pro has a simple structure and minimal pages with stylish cards. The smooth animation flows make a super-intuitive user experience.&lt;/p&gt;

&lt;h5&gt;
  
  
  Why Choose Material Dashboard Pro?
&lt;/h5&gt;

&lt;ul&gt;
&lt;li&gt;If you are a novice developer, You can easily make work using Material Dashboard Pro.&lt;/li&gt;
&lt;li&gt;Sidebar filters with options of color, image, layout variants.&lt;/li&gt;
&lt;li&gt;Extended Forms and Form wizard pages.&lt;/li&gt;
&lt;li&gt;UI Components with extra useful pages like Pricing, Authentication, Maps, Charts, and many more.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;a href="https://demos.creative-tim.com/material-dashboard-pro-react/" rel="noopener noreferrer"&gt;Live Preview&lt;/a&gt; | &lt;a href="https://www.creative-tim.com/product/material-dashboard-pro-react" rel="noopener noreferrer"&gt;Purchase&lt;/a&gt;&lt;br&gt;
Made by - &lt;a href="https://www.creative-tim.com" rel="noopener noreferrer"&gt;Creative-Tim&lt;/a&gt;&lt;br&gt;
Dev-to Profile - &lt;a class="mentioned-user" href="https://dev.to/creativetim_official"&gt;@creativetim_official&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  &lt;strong&gt;Jumbo React&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fbrsusojnrcv81tn4imaa.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fbrsusojnrcv81tn4imaa.jpg" alt="Jumbo react" width="800" height="456"&gt;&lt;/a&gt;&lt;br&gt;
I love the Jumbo React for its jumbo features like theme &amp;amp; sidebar variants, 8+ Layout options, 3 Container settings, Sidebar sizes, theme color presets with RTL support. “You demand &amp;amp; Jumbo have it” - all combo in just one template. G-axon is a team passionate about helping others get results and have fun doing it.&lt;/p&gt;

&lt;h5&gt;
  
  
  Why Choose Jumbo React?
&lt;/h5&gt;

&lt;ul&gt;
&lt;li&gt;Multi variants of Pages &amp;amp; Color Presets.&lt;/li&gt;
&lt;li&gt;Along with Material-UI components, Jumbo has Coremat components included.&lt;/li&gt;
&lt;li&gt;360 Degree after-sales support - Video Tutorials, Slack community, Online documentation, and ticket support system.&lt;/li&gt;
&lt;li&gt;Private GitHub Repo Access.&lt;/li&gt;
&lt;li&gt;Useful widgets and apps like Social, wall, chat, contact, and many more.&lt;/li&gt;
&lt;li&gt;Multi-Language support&lt;/li&gt;
&lt;li&gt;Layout Builder&lt;/li&gt;
&lt;li&gt;Micro Interaction-based Interactivity.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;a href="https://jumbo.g-axon.work/" rel="noopener noreferrer"&gt;Live Preview&lt;/a&gt; | &lt;a href="https://themeforest.net/item/react-material-bootstrap-4-admin-template/20978545" rel="noopener noreferrer"&gt;Purchase&lt;/a&gt;&lt;br&gt;
Made by - &lt;a href="https://g-axon.com/" rel="noopener noreferrer"&gt;g-axon&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  &lt;strong&gt;Mira Pro&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Femn1m1flgepko059v8eq.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Femn1m1flgepko059v8eq.jpg" alt="mira-pro" width="800" height="456"&gt;&lt;/a&gt;&lt;br&gt;
Mira Pro aka Material App Pro is a damn good full-fledged template built on top of the most popular front-end React Material-UI library in the world. You can say, It is a professional grade admin template in terms of usability and flexibility. It featured up to 50+ pages that give you the freedom of choosing and combining. If you're familiar with Material-UI, then you'll certainly love this theme!. They said - “The sky is the limit!”&lt;/p&gt;

&lt;h5&gt;
  
  
  Why Choose Mira Pro React?
&lt;/h5&gt;

&lt;ul&gt;
&lt;li&gt;Professional design with a sense of Typography and spacing.&lt;/li&gt;
&lt;li&gt;Figma/Sketch design resource files that easing your pre-development plan.&lt;/li&gt;
&lt;li&gt;Besides the components, it has Dashboards, Settings, Pricing,
&lt;/li&gt;
&lt;li&gt;Project, Task, Calendar, and many more pages included.&lt;/li&gt;
&lt;li&gt;Free updates and 12 months support.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;a href="https://mira.bootlab.io/" rel="noopener noreferrer"&gt;Live Preview&lt;/a&gt; | &lt;a href="https://mui.com/store/items/mira-pro-react-material-admin-dashboard/" rel="noopener noreferrer"&gt;Purchase&lt;/a&gt;&lt;br&gt;
Made by - &lt;a href="https://bootlab.io/" rel="noopener noreferrer"&gt;BootLab&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  &lt;strong&gt;React Material Admin by FlatLogic&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fqiuj8raf3vwu1uiwp8kg.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fqiuj8raf3vwu1uiwp8kg.jpg" alt="react material admin" width="800" height="456"&gt;&lt;/a&gt;&lt;br&gt;
FlatLogic is one of the top players in the template market. They make enterprise-grade admin templates and UI kits. “React Material Admin” which is very easy to get started with your project in no time. They are committed to constantly update their portfolio on a regular basis. So you can always get updated code. &lt;/p&gt;

&lt;h5&gt;
  
  
  Why Choose it?
&lt;/h5&gt;

&lt;ul&gt;
&lt;li&gt;Private GitHub repo access to receive future updates.&lt;/li&gt;
&lt;li&gt;Various Chart Libraries.&lt;/li&gt;
&lt;li&gt;Fully Documented Codebase.&lt;/li&gt;
&lt;li&gt;The Perfect Folder Structure.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;a href="https://flatlogic.github.io/react-material-admin-full" rel="noopener noreferrer"&gt;Live Preview&lt;/a&gt; | &lt;a href="https://flatlogic.com/templates/react-material-admin-full" rel="noopener noreferrer"&gt;Purchase&lt;/a&gt;&lt;br&gt;
Made by - &lt;a href="https://flatlogic.com" rel="noopener noreferrer"&gt;FlatLogic&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  &lt;strong&gt;SaasAble UI Kit and Admin Dashboard Template&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F3auhu0kgmqr8dkdqk0lo.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F3auhu0kgmqr8dkdqk0lo.png" alt="saasable react UI kit and dashboard template" width="800" height="450"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;SaasAble is a comprehensive UI kit designed to streamline the creation of SaaS applications by offering a package of front-end and admin interface components. With over 200+ reusable blocks, it empowers teams to build marketing pages like landing pages, hero sections, pricing tables, testimonials, and more. But SaasAble doesn't stop there—it also delivers a fully designed admin template for dashboards, user management, analytics, billing systems, and other backend functionalities.&lt;/p&gt;

&lt;h5&gt;
  
  
  Multiple Reasons to Choose SaasAble.io?
&lt;/h5&gt;

&lt;ul&gt;
&lt;li&gt;Complete UI Solution for both Marketing + Admin UI.&lt;/li&gt;
&lt;li&gt;200+ reusable blocks.&lt;/li&gt;
&lt;li&gt;Admin dashboard ready.&lt;/li&gt;
&lt;li&gt;Tailored for all users.&lt;/li&gt;
&lt;li&gt;Figma Ready.&lt;/li&gt;
&lt;li&gt;Dark Mode, RTL/LTR Mode.&lt;/li&gt;
&lt;li&gt;Material 3 Design Specification.&lt;/li&gt;
&lt;li&gt;7+ Ready to use landing page demos like CRM, PMS, AI, Crypto, HRMS, Digital Products, Hosting like web apps.&lt;/li&gt;
&lt;li&gt;Material UI components with latest v6.&lt;/li&gt;
&lt;li&gt;Supports Supabase.&lt;/li&gt;
&lt;li&gt;Easy folder structure and well-optimised code standard.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;a href="https://saasable.io" rel="noopener noreferrer"&gt;Live Preview&lt;/a&gt; | &lt;a href="https://mui.com/store/" rel="noopener noreferrer"&gt;Purchase&lt;/a&gt;&lt;br&gt;
Made by - &lt;a href="https://phoenixcoded.net" rel="noopener noreferrer"&gt;Phoenixcoded&lt;/a&gt;&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;If you have any other Material-UI Admin Template that is likely to add to this post. Please comment here with the link. I would love to see it.&lt;/p&gt;
&lt;/blockquote&gt;

</description>
      <category>react</category>
      <category>webdev</category>
      <category>typescript</category>
      <category>javascript</category>
    </item>
    <item>
      <title>All you need to Know About Berry React</title>
      <dc:creator>Rakesh Nakrani</dc:creator>
      <pubDate>Fri, 30 Apr 2021 06:22:04 +0000</pubDate>
      <link>https://dev.to/rakesh_nakrani/all-you-need-to-know-about-berry-react-li6</link>
      <guid>https://dev.to/rakesh_nakrani/all-you-need-to-know-about-berry-react-li6</guid>
      <description>&lt;p&gt;In my previous blog, I introduced my upcoming product &lt;a href="https://berrydashboard.com" rel="noopener noreferrer"&gt;Berry&lt;/a&gt; - The react admin dashboard template. If you don't know what is Berry, Please look into this &lt;a href="https://dev.to/rakesh_nakrani/introducing-berry-react-material-design-admin-template-27dk"&gt;article&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;In this post, I am going to provide everything about Berry - The React-based Material Admin Template. This blog will cover the following topics.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;What makes Berry different from others?

&lt;ul&gt;
&lt;li&gt;Design&lt;/li&gt;
&lt;li&gt;Flexibility&lt;/li&gt;
&lt;li&gt;Technology stack&lt;/li&gt;
&lt;li&gt;Pages&lt;/li&gt;
&lt;li&gt;Package Includes&lt;/li&gt;
&lt;li&gt;Compatibility&lt;/li&gt;
&lt;/ul&gt;


&lt;/li&gt;

&lt;li&gt;Our Continuous Involvement in customer satisfaction&lt;/li&gt;

&lt;li&gt;Future planning &amp;amp; roadmap&lt;/li&gt;

&lt;/ul&gt;

&lt;p&gt;Let me explain all the above points in detail.&lt;/p&gt;

&lt;h3&gt;
  
  
  What makes Berry different from others?
&lt;/h3&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fbt9gt0irjh4otflozuhi.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fbt9gt0irjh4otflozuhi.jpg" alt="berry react dashboard template" width="800" height="1066"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;At First glance, minimal &lt;strong&gt;Design&lt;/strong&gt; makes Berry an Identical React backend template. Our focus is not just to achieve a simplistic design but it also provides a great User Experience and Berry will prove it. There are numerous features that make Berry one of the best, most powerful react admin templates available.&lt;/p&gt;

&lt;h4&gt;
  
  
  Design
&lt;/h4&gt;

&lt;ul&gt;
&lt;li&gt;Light / Dark Layouts&lt;/li&gt;
&lt;li&gt;LTR / RTL (Right-to-Left) Layouts&lt;/li&gt;
&lt;li&gt;Live customization of Font Family&lt;/li&gt;
&lt;li&gt;Use Eye-catchy warm color palette.&lt;/li&gt;
&lt;/ul&gt;

&lt;h4&gt;
  
  
  Flexibility
&lt;/h4&gt;

&lt;ul&gt;
&lt;li&gt;Easy &amp;amp; consistent folder structure&lt;/li&gt;
&lt;li&gt;Prettier and well-Commented code style&lt;/li&gt;
&lt;li&gt;Organized code structure&lt;/li&gt;
&lt;li&gt;The hassle-free setup process and convenient helper guide&lt;/li&gt;
&lt;li&gt;Easy to implement components and pages&lt;/li&gt;
&lt;/ul&gt;

&lt;h4&gt;
  
  
  Technology Stack
&lt;/h4&gt;

&lt;ul&gt;
&lt;li&gt;Built with &lt;a href="https://github.com/mui-org/material-ui" rel="noopener noreferrer"&gt;Material-UI&lt;/a&gt; v5 components library&lt;/li&gt;
&lt;li&gt;Authentication Methods - Auth0, Firebase, JWT&lt;/li&gt;
&lt;li&gt;Built with React Hooks API&lt;/li&gt;
&lt;li&gt;Redux &amp;amp; React Context API for State Management&lt;/li&gt;
&lt;li&gt;React Router for Navigation Routing&lt;/li&gt;
&lt;li&gt;Axios to Mock APIs&lt;/li&gt;
&lt;li&gt;Support of react-script&lt;/li&gt;
&lt;li&gt;Code Splitting&lt;/li&gt;
&lt;li&gt;CSS-in-JS where CSS is composed using JavaScript instead of defined in external files&lt;/li&gt;
&lt;li&gt;Multi-Language Support&lt;/li&gt;
&lt;/ul&gt;

&lt;h4&gt;
  
  
  Pages
&lt;/h4&gt;

&lt;ul&gt;
&lt;li&gt;100+ Ready to use pages&lt;/li&gt;
&lt;li&gt;5+ Working Apps like Mail, Chat, User Management, Contact, Calendar, and more to come soon.&lt;/li&gt;
&lt;li&gt;Vertical page Layout with unlimited Menu level support.&lt;/li&gt;
&lt;li&gt;Menu Header with creative yet useful Notification &amp;amp; User Dialog options.&lt;/li&gt;
&lt;li&gt;Live Customizer with support of font selection, Layout switcher, Border radius and Button shadow enables/disable options.&lt;/li&gt;
&lt;li&gt;2 Dashboards with Footer features.&lt;/li&gt;
&lt;li&gt;50+ Useful Data, Statistics, and Chart Widgets.&lt;/li&gt;
&lt;li&gt;Contact cards Grid &amp;amp; List variants.&lt;/li&gt;
&lt;li&gt;10+ Important Form Plugins like Masking, Editor, Autocomplete, Clipboard, etc...&lt;/li&gt;
&lt;li&gt;Table variants like Simple table, Data table, Enhanced table with search, filter, pagination support.&lt;/li&gt;
&lt;li&gt;3 Variants of Authentication pages like login, register, forget &amp;amp; reset the password, OTP verification.&lt;/li&gt;
&lt;li&gt;Maintenance Pages like Error, coming soon (2), under construction.&lt;/li&gt;
&lt;li&gt;Utility pages like Typography, Color, Shadows, Icons (i.e. 2000+ Material Icons, Tabler Icons)&lt;/li&gt;
&lt;li&gt;Landing Page&lt;/li&gt;
&lt;/ul&gt;

&lt;h4&gt;
  
  
  Package Includes
&lt;/h4&gt;

&lt;p&gt;The final download package includes the following directory.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Full &amp;amp; Skeleton (Quick start) package.&lt;/li&gt;
&lt;li&gt;Separate JavaScript &amp;amp; TypeScript package.&lt;/li&gt;
&lt;li&gt;Figma Design Resource File.&lt;/li&gt;
&lt;li&gt;Documentation.&lt;/li&gt;
&lt;/ul&gt;

&lt;h4&gt;
  
  
  Compatibility
&lt;/h4&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fd6k5zlf6mroutki77zf2.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fd6k5zlf6mroutki77zf2.jpg" alt="berry material react admin template" width="800" height="600"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;We have tested the Berry in the following environment.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Browser compatibility - Chrome, Mozilla, Edge, Safari (macOS), Opera&lt;/li&gt;
&lt;li&gt;Design Tested on Retina Displays, Laptop media, and responsive media like Tablet / iPad and Mobile devices.&lt;/li&gt;
&lt;li&gt;Page speed test made using Google Page Speed, GT Metrix tools.&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  Our Continuous Involvement in customer satisfaction
&lt;/h3&gt;

&lt;p&gt;Customers always wanted a product that gives them satisfaction in terms of usability, support, and easy-to-find query solutions. To achieve that we have a plan for continuous involvement in Berry. From our past experience, we found that manage the following things makes a good impact on customers that helps them quickly find solutions in the very first step without writing a ticket to us. us.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Knowledge Base&lt;/li&gt;
&lt;li&gt;Video Tutorials&lt;/li&gt;
&lt;li&gt;Quick FAQs&lt;/li&gt;
&lt;li&gt;A Support System with minimum turnaround time query resolution
Act upon Customer Feedback queries&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  Future Planning &amp;amp; Road Map
&lt;/h3&gt;

&lt;p&gt;We consider Berry react dashboard as a long run project. We shake our hand with ongoing trends, by doing our continuous involvement in our users' needs &amp;amp; their problem statement. So we will work based upon it.&lt;/p&gt;

&lt;h4&gt;
  
  
  What we are considering next?
&lt;/h4&gt;

&lt;ul&gt;
&lt;li&gt;More App Pages like E-commerce, File Manager, Sass.&lt;/li&gt;
&lt;li&gt;Conceptual Analytic, Sass, E-commerce Dashboards.&lt;/li&gt;
&lt;li&gt;Rich set of Widgets for Statistics, Data, Charts.&lt;/li&gt;
&lt;li&gt;More Page Layouts - Horizontal, Collapse.&lt;/li&gt;
&lt;li&gt;Considering Form pages like Form Wizard, Multi-Column Forms, Form Validations.&lt;/li&gt;
&lt;li&gt;Considering Form Plugins like Form Mega Options, MaxLength, Multi-Select, Select2, noUISlider, Form Repeater, Auto resize Textarea, MarkDown Editor, File Upload.&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  Summer up
&lt;/h3&gt;

&lt;p&gt;Hope you enjoy this detailed post. I try to cover up the many things about our Berry Project which make sense upon Technology aspects and our future plan for The Berry Material UI admin template. I will regularly make a post on Berry, so you can better know it. Stay tuned and stay safe.&lt;/p&gt;

&lt;h3&gt;
  
  
  Follow us
&lt;/h3&gt;

&lt;p&gt;Follow &amp;amp; receive updates about Berry's Progress. Soon we will launch Berry Open source and premium version.&lt;/p&gt;

&lt;p&gt;Website - &lt;a href="http://berrydashboard.com" rel="noopener noreferrer"&gt;http://berrydashboard.com&lt;/a&gt;&lt;br&gt;
Blog - &lt;a href="https://blog.berrydashboard.com" rel="noopener noreferrer"&gt;https://blog.berrydashboard.com&lt;/a&gt;&lt;br&gt;
Facebook - &lt;a href="https://www.facebook.com/codedthemes" rel="noopener noreferrer"&gt;https://www.facebook.com/codedthemes&lt;/a&gt;&lt;br&gt;
Twitter - &lt;a href="https://twitter.com/codedthemes" rel="noopener noreferrer"&gt;https://twitter.com/codedthemes&lt;/a&gt;&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>startup</category>
      <category>react</category>
      <category>javascript</category>
    </item>
    <item>
      <title>Introducing Berry React - Material Design Admin Template</title>
      <dc:creator>Rakesh Nakrani</dc:creator>
      <pubDate>Mon, 26 Apr 2021 04:08:13 +0000</pubDate>
      <link>https://dev.to/rakesh_nakrani/introducing-berry-react-material-design-admin-template-27dk</link>
      <guid>https://dev.to/rakesh_nakrani/introducing-berry-react-material-design-admin-template-27dk</guid>
      <description>&lt;p&gt;I’m pleased to announce our brand new product in the season of spring. &lt;a href="http://berrydashboard.com" rel="noopener noreferrer"&gt;Berry&lt;/a&gt; - The complete React Admin Template package for making beautiful web applications faster.&lt;/p&gt;

&lt;p&gt;Crafting a Dashboard Template is not a small task, each aspect needs to be carefully designed &amp;amp; developed. There are hundreds of pages, components, 3’rd party plugins &amp;amp; lots of external factors like browser compatibility, cross-device testing, etc, and each of these needs attention in detail.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Pain Points&lt;/strong&gt;&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;Knowing about your user needs is the key thing before launching any great product.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;I have been developing Dashboards for 7 years &amp;amp; seen hundreds of templates and found the most common issues in major templates like inconsistent UI, lack of performance, outdated code, missing components, incomplete documentation, no knowledge base, buggy code without any standard, support issues, etc. Here, at CodedThemes we are seriously considering these issues &amp;amp; putting a positive effort to resolve them through the entire Berry project.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Our Goal&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Our goal is to reduce end-user efforts by catering above pain points. We have created new features, app pages, plugin integration which makes Berry unique in the crowd. It is always updated for our beloved users with the latest technologies &amp;amp; trends. While designing the Berry, we are always committed to quality work with high code standards &amp;amp; UI design.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;The team behind Berry Project&lt;/strong&gt;&lt;br&gt;
&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Funzrxhfhba0zitv4nn85.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Funzrxhfhba0zitv4nn85.jpg" alt="Alt Text" width="800" height="533"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;We adopt the mantra “Small team, big dream” and keep our team small and agile.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Berry is managed by the team &lt;a href="http://codedthemes.com" rel="noopener noreferrer"&gt;CodedThemes&lt;/a&gt;. We believe that effective communication is the key to building a great product as a team. Berry is carefully designed by our team for you to be our customer forever. Berry is developed while we all work from home which proves that we are a great team.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Why Berry Dashboard Template?&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Berry is a complete package for your end-to-end solution. We are considering it as a long-run product with continuous development with plenty of features and ready-to-use components. Berry v1.0 brings everything you need for dashboard development. We have added the following high-end features in the initial release.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Modern aesthetics UI design&lt;/li&gt;
&lt;li&gt;Quick Start with Skeleton version&lt;/li&gt;
&lt;li&gt;Hundreds of UI components &amp;amp; Elements&lt;/li&gt;
&lt;li&gt;Apps &amp;amp; Pre-build useful pages&lt;/li&gt;
&lt;li&gt;Fully Responsive, all modern browser supported&lt;/li&gt;
&lt;li&gt;Easy to use code structure&lt;/li&gt;
&lt;li&gt;Flexible &amp;amp; High-Performance code&lt;/li&gt;
&lt;li&gt;Easy Documentation Guide&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;V1.0 Key Features Highlight&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Following are features that make Berry a top-class React Material Dashboard Template.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;100+ Ready to use pages&lt;/li&gt;
&lt;li&gt;Built with Material-UI v5 components library to achieve the best Material Design experience in React Dashboard Template.&lt;/li&gt;
&lt;li&gt;Figma design files&lt;/li&gt;
&lt;li&gt;Authentication Methods - Auth0, Firebase, JWT&lt;/li&gt;
&lt;li&gt;Built with React Hooks API&lt;/li&gt;
&lt;li&gt;Easy to Folder Structure&lt;/li&gt;
&lt;li&gt;Redux &amp;amp; React Context API as State Manager&lt;/li&gt;
&lt;li&gt;React Router for Navigation Routing&lt;/li&gt;
&lt;li&gt;Axios&lt;/li&gt;
&lt;li&gt;Create React App&lt;/li&gt;
&lt;li&gt;Code Splitting&lt;/li&gt;
&lt;li&gt;Dark / Light Mode&lt;/li&gt;
&lt;li&gt;Live customizer - Font Selection &amp;amp; other Layout options&lt;/li&gt;
&lt;li&gt;CSS-in-JS where CSS is composed using JavaScript instead of defined in external files&lt;/li&gt;
&lt;li&gt;Multi-Language Support&lt;/li&gt;
&lt;li&gt;LTR / RTL (Right to Left) Mode&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;Downloads&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Download Free &amp;amp; Pro Berry React version using the following links.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;a href="https://github.com/codedthemes/berry-free-react-admin-template/" rel="noopener noreferrer"&gt;Free Version&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://berrydashboard.com/" rel="noopener noreferrer"&gt;Live Preview&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://material-ui.com/store/items/berry-react-material-admin/" rel="noopener noreferrer"&gt;Purchase Now&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;Next Plan&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Considering Berry a long-run project we are continuously make effort to make Berry a really high-end react dashboard template involving the following activities for future plans.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Knowledge Base for more easiness for users&lt;/li&gt;
&lt;li&gt;Video tutorial series - Guided Installation videos, detailed setup process that makes less burden to work with Berry&lt;/li&gt;
&lt;li&gt;
&lt;a href="https://codedthemes.gitbook.io/berry/roadmap" rel="noopener noreferrer"&gt;Roadmap&lt;/a&gt; for future releases&lt;/li&gt;
&lt;li&gt;Focus on detailing the Documentation&lt;/li&gt;
&lt;li&gt;&amp;amp; lots more to come&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;Summer up&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;To summer up this post, This post gives the context idea of the Berry Project. I'll share you more detailed post once we launch the product.&lt;/p&gt;

&lt;p&gt;I would like to know your feedback/suggestions on our upcoming product Berry. You can comment here or contact us via social handles. I'm happy to serve you well.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Social Handles&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Website - &lt;a href="http://berrydashboard.com" rel="noopener noreferrer"&gt;http://berrydashboard.com&lt;/a&gt;&lt;br&gt;
Github - &lt;a href="https://github.com/codedthemes/berry-free-react-admin-template" rel="noopener noreferrer"&gt;Berry Free React Admin Template&lt;/a&gt;&lt;br&gt;
Blog - &lt;a href="https://blog.berrydashboard.com" rel="noopener noreferrer"&gt;https://blog.berrydashboard.com&lt;/a&gt;&lt;br&gt;
Facebook - &lt;a href="https://www.facebook.com/codedthemes" rel="noopener noreferrer"&gt;https://www.facebook.com/codedthemes&lt;/a&gt;&lt;br&gt;
Twitter - &lt;a href="https://twitter.com/codedthemes" rel="noopener noreferrer"&gt;https://twitter.com/codedthemes&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Many Thanks&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;I'm very grateful to &lt;a href="https://twitter.com/olivtassinari" rel="noopener noreferrer"&gt;Olivier&lt;/a&gt; co-founder at &lt;a href="https://material-ui.com" rel="noopener noreferrer"&gt;Material-UI&lt;/a&gt; for his help in creating Berry. On the other ends, I'm very thankful for team @codedthemes to give tremendous effort to this project.&lt;/p&gt;

</description>
      <category>react</category>
      <category>webdev</category>
      <category>javascript</category>
      <category>typescript</category>
    </item>
    <item>
      <title>Huge Discounts in UI Kits, Dashboard Templates From Authentic Developers</title>
      <dc:creator>Rakesh Nakrani</dc:creator>
      <pubDate>Fri, 27 Nov 2020 05:19:15 +0000</pubDate>
      <link>https://dev.to/rakesh_nakrani/huge-discounts-in-ui-kits-dashboard-templates-from-authentic-developers-3fch</link>
      <guid>https://dev.to/rakesh_nakrani/huge-discounts-in-ui-kits-dashboard-templates-from-authentic-developers-3fch</guid>
      <description>&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2Ftvrw2e9l7k5049vq8nkm.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2Ftvrw2e9l7k5049vq8nkm.png" alt="Alt Text" width="800" height="800"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;The good news for designers, developers &amp;amp; project owners that Black Friday is here to grab the huge discounts on various web products which helps you in your development time. &lt;/p&gt;

&lt;p&gt;I'm excited to write here about this post to highlight a few Authentic companies that give a really great deal from 50% to 90% off on their templates.&lt;/p&gt;

&lt;p&gt;Companies here I'm highlighting are - CodedThemes, WrapPixel, Appseed, Creative-Tim, Bootstrapdash &amp;amp; Themesberg.&lt;/p&gt;

&lt;p&gt;I used the term Authentic companies because the mentioned companies have a good reputation from thousands of customers with outstanding products in a wide range of technologies and categories. &lt;/p&gt;

&lt;p&gt;Categories like UI kits, Dashboard Template &amp;amp; App Generators in Bootstrap, Angular, Vuejs, Reactjs, Node, Asp.net, Flask, Django &amp;amp; Laravel frameworks.&lt;/p&gt;

&lt;h3&gt;
  
  
  &lt;a href="https://codedthemes.com/" rel="noopener noreferrer"&gt;CodedThemes&lt;/a&gt;
&lt;/h3&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2Fgf1usdj7v5u52cjxe08z.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2Fgf1usdj7v5u52cjxe08z.png" alt="Alt Text" width="800" height="407"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;50% off on all products which includes UI Kits, Figma Kits, Admin Templates in Reactjs, Angular &amp;amp; Bootstrap 4 frameworks.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;7 Bootstrap 4 Admin Templates&lt;/li&gt;
&lt;li&gt;1 Bootstrap UI Kit&lt;/li&gt;
&lt;li&gt;2 Figma UI Kit&lt;/li&gt;
&lt;li&gt;5 Angular Dashboards&lt;/li&gt;
&lt;li&gt;2 ReactJs Dashboards&lt;/li&gt;
&lt;li&gt;2 Mega Bundle Products&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  &lt;a href="https://www.wrappixel.com/" rel="noopener noreferrer"&gt;Wrappixel&lt;/a&gt;
&lt;/h3&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2Fa72vmyjry9eg65sil505.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2Fa72vmyjry9eg65sil505.png" alt="Alt Text" width="800" height="383"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;95% off on bundle products which includes the following deal.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;12 Bootstrap templates.&lt;/li&gt;
&lt;li&gt;8 Angular templates.&lt;/li&gt;
&lt;li&gt;5 React templates.&lt;/li&gt;
&lt;li&gt;3 Vuejs templates.&lt;/li&gt;
&lt;li&gt;WrapKit Bootstrap UI.&lt;/li&gt;
&lt;li&gt;29+ domains.&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  &lt;a href="https://appseed.us/" rel="noopener noreferrer"&gt;AppSeed&lt;/a&gt;
&lt;/h3&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2Fcke0w6szm4lxptlmg8yz.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2Fcke0w6szm4lxptlmg8yz.png" alt="Alt Text" width="800" height="383"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Up to 73% off on Appseed web App Generator. You can get the Flask/Django framework dashboards with 24/7 Live support.&lt;/p&gt;

&lt;h3&gt;
  
  
  &lt;a href="https://www.creative-tim.com/" rel="noopener noreferrer"&gt;Creative-tim&lt;/a&gt;
&lt;/h3&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2Fd58zy1uiihf7d5mcjwxy.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2Fd58zy1uiihf7d5mcjwxy.png" alt="Alt Text" width="800" height="407"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Get 90% Off on Creative-Tim products which include all technologies stack products.&lt;/p&gt;

&lt;h3&gt;
  
  
  &lt;a href="https://www.bootstrapdash.com/" rel="noopener noreferrer"&gt;BootstrapDash&lt;/a&gt;
&lt;/h3&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2F3h7jkzg866faobh4l6da.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2F3h7jkzg866faobh4l6da.png" alt="Alt Text" width="800" height="407"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;They offer a Flat 25% off on Bundle products &amp;amp; a Flat 20% off on All other Templates. The offer is valid till November 30.&lt;/p&gt;

&lt;h3&gt;
  
  
  &lt;a href="https://themesberg.com/black-friday" rel="noopener noreferrer"&gt;Themesberg&lt;/a&gt;
&lt;/h3&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2Fkbs7r1c9xbevvnv9fmjy.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2Fkbs7r1c9xbevvnv9fmjy.png" alt="Alt Text" width="800" height="407"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;90% off on bundle product with having 7 Premium Bootstrap Themes along with 6/12 months support.&lt;/p&gt;

&lt;p&gt;Hope you like these deals. I wish all of you a happy thanksgiving day.&lt;/p&gt;

</description>
      <category>blackfriday</category>
    </item>
  </channel>
</rss>
