Neutralis - Ant Design Theme & Template
Neutralis - Ant Design Theme & Template
Live Preview
Figma logo
Preview in Figma
Figma logo
Get access

Neutralis - Ant Design Theme & Template

Ant Design
Tailwind CSS Colors
Tabler Icons
Responsive
Inter font

Elevate your web application’s aesthetics and functionality with Neutralis - the ultimate Ant Design Theme & Template for Figma and React. Featuring Ant Design and AntBlocks UI components, Tailwind CSS colors, Tabler icons, and Inter font.

image showcasing a variety of UI components built with Neutralis. The image includes examples of buttons, forms, icons, and dashboard elements, all featuring the Ant Design components, Tailwind CSS color palette, Tabler icons, and Inter font.
image showcasing a variety of UI components built with Neutralis. The image includes examples of buttons, forms, icons, and dashboard elements, all featuring the Ant Design components, Tailwind CSS color palette, Tabler icons, and Inter font.
image showcasing a variety of UI components built with Neutralis. The image includes examples of buttons, forms, icons, and dashboard elements, all featuring the Ant Design components, Tailwind CSS color palette, Tabler icons, and Inter font.
image showcasing a variety of UI components built with Neutralis. The image includes examples of buttons, forms, icons, and dashboard elements, all featuring the Ant Design components, Tailwind CSS color palette, Tabler icons, and Inter font.
image showcasing a variety of UI components built with Neutralis. The image includes examples of buttons, forms, icons, and dashboard elements, all featuring the Ant Design components, Tailwind CSS color palette, Tabler icons, and Inter font.
image showcasing a variety of UI components built with Neutralis. The image includes examples of buttons, forms, icons, and dashboard elements, all featuring the Ant Design components, Tailwind CSS color palette, Tabler icons, and Inter font.
image showcasing a variety of UI components built with Neutralis. The image includes examples of buttons, forms, icons, and dashboard elements, all featuring the Ant Design components, Tailwind CSS color palette, Tabler icons, and Inter font.
No items found.

Introducing Neutralis - Ant Design Theme & Template

Elevate your app's aesthetics and functionality with Neutralis, an excellently crafted Ant Design Theme & Template. Developed using the powerful AntBlocks UI and Ant Design components, and enhanced with the Tailwind CSS color palette, Tabler icons library, and Inter font, Neutralis is the ultimate design solution for a diverse array of app and dashboard applications.

Why Choose Neutralis?

Meticulously crafted by top-tier designers and creators of the Ant Design System for Figma, Neutralis provides an exceptional User Interface (UI) experience. This theme and template are built with versatility at their core, offering limitless customization options to perfectly align with your app’s unique style and your brand's aesthetic.

Key Features

Ant Design Components

Neutralis is built on the robust foundation of Ant Design components, which are renowned for their high-quality, reusable UI elements designed for efficiency and coherence in design. These components ensure your app interfaces are consistent, predictable, and user-friendly, providing a seamless user experience.

AntBlocks UI Components

AntBlocks UI is a library of high-quality, responsive, customizable and ready-to-use React and Figma components built on Ant Design.

Tailwind CSS Color Palette

The theme includes a comprehensive Tailwind CSS color palette that allows for precise and versatile color customization. Tailwind's utility-first approach to design means you can easily adapt colors to fit your brand identity, ensuring your design stands out while maintaining a professional and modern look.

Tabler Icons

The inclusion of the Tabler icons library enriches your design with over 1,200 meticulously designed, open-source icons. These icons are highly customizable and versatile, fitting naturally into any design system and ensuring your app has a polished and professional appearance.

Inter Font

Neutralis uses the Inter font, a versatile and highly legible typeface that enhances readability across all interfaces. Designed specifically for user interfaces, this font adds a clean and modern look to your app, ensuring text content is both aesthetically pleasing and easy to read.

What’s Included?

Learn what you'll get after the purchase.

React:

  • Neutralis theme JSON files
  • Detailed theme installation instructions
  • Light & dark mode
  • Exclusive access to AntBlocks UI

Figma

  • Comprehensive Neutralis theme Figma file, including AntBlocks UI and Ant Design components
  • Example screens and components designed to showcase the Neutralis theme
  • Access to Ant Design Icons
  • A wide selection of Tabler Icons
  • Tailwind CSS color variables for seamless integration
  • Light & dark mode
  • In-depth customization documentation

How does it work?

See how easy it is to start using the Neutralis theme.

React

  1. Install Ant Design.
  2. Apply our theme following our installation instructions.
  3. Install Tabler icons and Inter font.
  4. Voila! Build beautiful UIs with Neutrals!

Figma

  1. Import the Neutralis Theme Figma file to your Figma workspace.
  2. Start designing beautiful apps consistent with Ant Design!

How is Neutralis theme different from the default AntBlocks UI?

React

React version of AntBlocks UI comes with dedicated instructions on how to change the styling of your Ant Design / AntBlocks UI project:

  • implement the Neutralis styling into your project with our JSON files
  • install and use Tabler icons in your project
  • apply Inter font into your project

Figma

We restyled the default AntBlocks UI, so it's using Tailwind CSS color palette for primary, neutral, error, success, warning and info colors. The theme also includes all Tailwind CSS colors in the variables panel in Figma so you can replace the Zinc color (primary color) with a different color from Tailwind CSS palette. It's also using the Inter font as a main font family and Tabler icons as a main icons library (Ant Design icons were replaced with Tabler icons). The Neutralis theme also includes a Showcase page that contains components and screens examples built with new theme.

Perfect of designers, developers and teams

Neutralis is ideal for designers, developers, and businesses seeking a sophisticated, flexible, and highly customizable design solution. Whether you're a UI/UX designer looking to streamline your workflow with Figma, a front-end developer building robust web applications with React, or a product team aiming to maintain a cohesive brand identity across multiple platforms, Neutralis delivers the tools you need. Its seamless integration of Ant Design components, Tailwind CSS, Tabler icons, and the Inter font ensures that your projects not only look visually stunning but also function seamlessly, enhancing user experience and increasing productivity. Neutralis is the go-to choice for anyone looking to create polished, professional, and user-centric applications.

What's included:

React:

  • Neutralis theme JSON files
  • Detailed theme installation instructions
  • Ligh & dark mode
  • Exclusive access to AntBlocks UI

Figma:

  • Comprehensive Neutralis theme Figma file, including AntBlocks UI and Ant Design components
  • Example screens and components designed to showcase the Neutralis theme
  • Ant Design Icons
  • Tabler Icons
  • Tailwind CSS color variables for effortless color customization
  • Light & dark mode
  • In-depth customization documentation
expand_more
What is AntBlocks UI?
expand_more
What is the difference between Ant Design and AntBlocks UI?
expand_more
What version of Ant Design is supported?
expand_more
Where can I access my Figma files?
expand_more
How Do I Receive Updates?
expand_more
Can I use AntBlocks UI to build commercial projects?
expand_more
Can I use AntBlocks UI for client projects?
expand_more
Can I get an invoice?
expand_more
Can I use AntBlocks UI to build products to sell and templates?
expand_more
How Can I Contact Support?
expand_more
Is There a Money-Back Guarantee?
info
Here you will find installation instructions after logging in. You can log in on this page. If you don't have an account you can purchase access to AntBlocks UI on our pricing page.

Installing Ant Design

To utilize AntBlocks UI, it's essential to have Ant Design v5 (React) installed. You can initiate this process by referring to the comprehensive guide available on the official Ant Design documentation page. This guide will assist you in starting and implementing Ant Design in your project.

JSON files

Here's an example of how to use JSON files to match your project with the theme's styling. To explore further customization options in Ant Design, refer to the official documentation.

  1. Create the “tokens” folder in “src” in your Ant Design of React project.
  2. Create “light.json” and “dark.json” files to the “tokens” folder.
  3. Create “ThemedApp.jsx” file in the src folder in your Ant Design of React project with the following code.
  4. Change the code inside the index.js file in the src folder to the following code.
  5. Change the code inside the App.js file in the src folder to the following code.

Font family

The font family (”Inter”) is already specified in the JSON files. Make sure you also install the font with your preferred method:

  • Using Google Fonts
  • Using a Package Manager (typeface package)
  • Adding Custom Fonts Manually

Tabler Icons

  1. Install Tabler Icons Library: npm install @tabler/icons-react
  2. Create iconMap.js file in your src folder
  3. Create CustomIcon.js in your src folder
  4. You can find the icon names on this page. Make sure to use proper type naming as presented here.

Copying AntBlocks UI Components

Once you've successfully installed Ant Design and theme, you can proceed to integrate AntBlocks UI components into your project. Follow this brief example to understand how to copy a component from our website and integrate it into your project:

  1. Navigate to our Navbars page.
  2. Allow the components to load completely.
  3. Within the "Navbar with Buttons" component, locate the Preview/Code switch on the right-hand side.
  4. Click on the Code item.
  5. Copy the complete code from the snippet.
  6. Paste this copied code into a new JavaScript file within your project.
  7. Ensure you both render and import the component appropriately to display it in your project's interface.

Live Preview

Here are some example components built with the theme to give you a feel for its style. Just a heads up, these specific components aren't part of the theme itself—they're just demos to show what you can create with it.