Docs

Welcome to AntBlocks UI!

AntBlocks UI is a comprehensive library of ready-to-use React components meticulously crafted on the robust Ant Design framework. Created with the aim to streamline web development and enhance efficiency, AntBlocks UI empowers developers to effortlessly build stunning, functional, and responsive web applications.

What is Ant Design?

Ant Design is a popular and widely used design system and UI framework for building high-quality and visually appealing web and mobile applications. Developed by Ant Group, Ant Design provides a set of well-designed and standardized components, patterns, and guidelines that help developers create consistent and user-friendly interfaces.

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.

Copying AntBlocks UI Components

Once you've successfully installed Ant Design, 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.

Previewing Dark Mode

After the component has been rendered, you can see a preview of how the components will look in dark mode. Simply click on the switch located in the top right corner of the component preview frame.

Testing Responsiveness

To test how the components behave at different breakpoints, you can drag the handle on the left-hand side of the component preview frame to the right. This allows you to observe and evaluate their responsiveness.

Create Figma account

‍We assume that you are already a happy user of Figma but if you don't have an account go to www.figma.com and sign up. If you need help with signing up, you can learn how to do it here.

Install Figma Font Helper

‍If you're using the Figma Desktop app, any locally stored fonts are already available to you. For the browser version of Figma, follow this guide.

Download and install SF Pro Text font

‍This UI Kit uses SF Pro Text font, and you can get it from here (macOS) or here (Other OS - click on the green dropdown button "Code" and select "Download ZIP"). Then install SF Pro Text fonts on your PC and restart your computer.

Download the AntBlocks UI kit for Figma

If you purchased our Pro License you are eligible to download our UI kit for Figma:

1. Log in to our AntBlocks UI account.
2. Click on Account dropdown in our navbar.
3. Click on Figma.
4. On the new page, our UI kit for Figma versions will be visible.
5. Click on the one you want to download.
6. A new copy of the UI kit will be duplicated to your Figma account. Make sure you are logged in to Figma.

Import the file

‍There are many different ways to import design files into Figma. The easiest one is to drag and drop the file into your 'Drafts' folder. If you have problems opening the file in Figma, please follow these instructions from the official Figma's help page.

Publish it to your team library

If you are in a team and purchased the Team license of this product, you can publish it to your team library in Figma. You will find more information about team libraries in Figma and how to work with them here.

Photos

For image placeholders in our components, we use unsplash.com - a popular website that provides a vast collection of high-quality, free-to-use photographs and images.