Changelog

Figma

• Added support for typography variables in styles
• Added support for typography variables in components
• Added a new component, OTP (One-time password input)
• Added dropdown icons to Multiple type of Select component
• Added a new state variant to Select Input Items
• Added a new component Progress / Circular progress bar
• Added a text property to the Message component
• Added two small variants with tabs to Card / Basic
• Added a text property to Tag / Colorful
• Added Menu collapse interactions
• Added hover state interaction to Input/Filled
• Added interaction with hover state to Input/Password and interaction with the icon
• Adjusted the documentation on the website and in the Figma file for the Typography
• Variables in the components have been corrected according to the Ant documentation
• Fixed the text property in the Cascader Item
• Fixed checkbox interactions with Hover and inactive state
• Minor bug fixes and improvements

Figma

• Added component DatePicker Input / Filled
• Added Multiple variants to DatePicker Input / Outlined and updated the name for Outlined instead of Basic
• Added new variables to button components (defaultHoverBg, defaultHoverColor, defaultHoverBorderColor, defaultActiveBg, defaultActiveColor, defaultActiveBorderColor)
• Added Flex and ConfigProvider pages with information on these components
• Redesigned Table component and added Hover state.
• Updated Button component with new variables.
• Updated the height of Multiple Selection Items in the Small variant
• Updated the Theme Buddy Plugin to support the new version
• Added two levels of Menu Item / Inline / Navigation Item. This should help avoid any issues with overwriting instance dimensions.
• Corrected the "clip content" feature in the simple variant card advanced
• The main component no longer has **, and the name of the 'item' component has been changed to 'Component Name / Component Item'
• Fixed a bug with the dropdown button basic
• Fixed the paddings match up between main items and menu components

The update includes new components for React and Figma UI kit to support Ant Design 5.13, with additions such as "Empty state with button" and "Header with information" in React, and new Cards components. Figma's update restructured variable Collections into four groups, added new variables, and made adjustments like two modes for "Dimensions" collection, updated Brand Colors, and documentation improvements, along with minor fixes.

React

• Added new “Empty state with a button” component to Empty Sections category.
• Added new “Header with information”  component to App Headers category.
• Added 5 new Cards components to new Cards category.

Figma

• Updated the Figma UI kit to support Ant Design 5.13
• Added new component Input / Filled
• Added new “Empty state with button” component to Empty Sections category.
• Added new “Header with information”  component to App Headers category.
• Added 5 new Cards components to new Cards category.
• Restructured variable Collections into four groups: “1. Color”, “2. Dimensions”, “3. Typography” and “4. Components”
• “2. Dimensions” collection now has two modes: “Default” and “Compact” to support the Ant Design’s Compact mode
• Updated Brand Colors alias variables to match Ant Design 5.13
• Applied variables to Stroke in components.
• Applied variables to Effect styles
• Added new variables for Segmented component: “trackPadding” and “trackBg”
• Added new variable for Menu component: darkPopupBg
• Updated the documentation for the new collections structure
• Minor fixes and improvements

The AntBlocks UI for Figma Version 1.1 is based on Ant Design 5.11+.

General Changes

• The style guide has been applied for a more user-friendly organization with documentation for Typography, Color, Size, Space & Radius and Effects.
• Added the “Edit Theme” page to support you with the process of customizing the system.
• Simplified the effects and shadows.
• The Token Studio is no longer supported - we entirely switched to the Figma variables.
• Released Theme Buddy Plugin for Figma to help you transfer theme settings from Figma to code by converting Figma variables into a JSON format
• The style guide has been reorganized, and now there are separate pages for Typography, Color, Size, Space & Radius, and Effects.
• Added missing variables and removed unused variables.
• Variables have been assigned appropriate properties.
• Added component variables based on the Ant Design docs.
• Grouped general variables into the global groups.

Changes to the components

• Added title to the PopConfirm component.
• Updated active styles of Input, InputNumber, Select, Cascader, TreeSelect, DatePicker, and ColorPicker

We've added 74 components and updated our website with a Roadmap and Licensing page.

New components:

• Action panels - 5 components
• App headers - 8 components
• App shells - 5 components
• Cookies - 2 components
• Empty sections - 3 components
• Footers - 4 components
• Grids - 6 components
• Lists - 3 components
• Login Forms - 6 components
• Navbars - 4 components
• Panels - 9 components
• Section footers - 3 components
• Section headers - 4 components
• Signup forms - 4 components
• Stats - 3 components
• Tables - 3 components
• Typography - 2 somponents
  

Meet AntBlocks UI

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

AntBlocks UI improves the development process by providing a versatile collection of code snippets for various use cases and industries. It simplifies integration with its copy-and-paste interface and supports tokens for customization. It aims to save developers time and effort while empowering them to create stunning, functional, and responsive web applications easily.‍

Why did we build AntBlocks UI?

Creating components and sections, even when using the Ant Design library, can be time-consuming, and we are well aware of that. We created AntBlocks UI to help developers focus on what truly matters – crafting amazing user experiences and building successful projects without getting bogged down in the details of creating components from scratch.

Copy & paste: The simple copy-paste approach allows for quick and seamless integration of components into your project, accelerating your development process. Just copy the component and paste it into your Ant Design project.

Secure: We recognize the paramount importance of security, particularly for larger enterprises. With AntBlocks UI, you're not required to install any additional software beyond Ant Design itself. You can preview components and their associated code directly on our website, offering an added layer of reassurance.

Responsive: Every component is meticulously crafted to uphold responsiveness and functionality. This commitment guarantees a harmonious and dependable user experience across various devices and screen dimensions.

Dark mode: We developed all components so you can easily switch between light and dark modes to ensure that your app looks great, especially in low-light conditions or at night.

Built with tokens: Personalize your app's appearance with design tokens to easily customize color schemes, fonts, and more. Create a unique look that matches your brand's identity.

What's on the Horizon?

With today's launch, we've introduced access to 15 free components spanning various categories. But that's just the beginning – we're committed to expanding this collection further.

Our initial release comprises a selection of components thoughtfully organized into various categories:

• Empty sections - 2 components
• Grids - 2 components
• Panels - 2 components
• App headers - 2 components
• Footers - 2 components
• Login forms - 2 components
• Navbars - 2 components
• Stats - 1 component

‍

Here's a sneak peek at what's coming in the upcoming weeks:

Diverse Component Additions: Our immediate focus revolves around enhancing the General and Application UI categories. However, our plans encompass more than that. In the pipeline are components tailored for E-commerce, broadening the scope of possibilities.

Unveiling Themes: Fed up with the default Ant Design style? Our forthcoming Themes feature will empower you to swiftly apply distinct styles or aesthetics to your Ant Design project. This ensures a consistent brand presence and an exceptional user journey.

AntBlocks UI for Figma: Our efforts extend to crafting a comprehensive UI kit designed for Figma users. AntBlocks UI for Figma will facilitate seamless and methodical collaboration between designers and developers working on Ant Design projects.

‍

To stay informed about the latest developments, make sure to subscribe to our newsletter on the AntBlocks UI website. Be the first to know about exciting new releases and features on the horizon.