Changelog

New Features:

• Introduced the Splitter component for flexible layout control
• Added vertical variants to the Segmented component for improved versatility
• Implemented a new Button type for expanded design options
• Introduced Dropdown Menu Item Extra for additional content in dropdown menus
• Added placement variant to FloatButton Menu for customizable positioning

Improvements:

• Updated Currency and Phone input types for better user input handling
• Enhanced Radio Group component with a new boolean variant block
• Added new variables to Button component Text variant for increased customization
• Regenerated small and large instances in the Form component for improved consistency

Bug Fixes:

• Corrected border radius in Form, Radio Button, Cascader, and Multiple Selection Item components
• Fixed border radius in DatePicker Menu, TimePicker Menu, Select Menu, Autocomplete Menu, and Cascader Menu components to use BorderRadiusLG for visual consistency

‍

New Features:

• Added a text property to Step Items
• Introduced Group Title property for Dropdown Menu
• New variant added to the Divider component
• New variant and nested properties added to the ColorPicker component
• Added Assets page with various icon sets including Social Media, Flags, and Payment Methods

Improvements:

• Updated Radio Button to match Ant Design of React
• Enhanced Segmented Component with hover and focused states
• Added fontSizeIcon token to the Select component
• Updated Input component with new tokens and variants
• Introduced new variants to InputNumber
• Added synonyms to Icons for easier discovery using the Icon Tagger plugin

Bug Fixes:

• Fixed and reset Tabs Component settings
• Resolved issues with Select Menu component
• Corrected margin and icon size in Input component
• Fixed icon color in Input Pre Post Tab component
• Adjusted colors and placeholder color in InputNumber component

‍

• ‍Button Component: Added Icon Start and Icon End properties
• ‍Carousel Component: Added Arrows property
• Added new Outlined Icons: BaiduOutlined, BilibiliOutlined, BilibiliOutlined (duplicate), DiscordOutlined, DockerOutlined, DotNetOutlined, HarmonyOSOutlined, HolderOutlined, JavaOutlined, JavaScriptOutlined, KubernetesOutlined, LinuxOutlined, MergeOutlined, PinterestOutlined, PythonOutlined, RubyOutlined, SignatureOutlined, TikTokOutlined, TruckOutlined, TwitchOutlined, WechatWorkOutlined, XOutlined
• Added new Filled Icons: BilibiliFilled, DiscordFilled, MergeFilled, MoonFilled, OpenAIFilled, PinterestFilled, ProductFilled, SignatureFilled, SpotifyFilled, SunFilled, TikTokFilled, TruckFilled, TwitchFilled, WechatWorkFilled, XFilled
• Progress Component: Added a gradient variant
• ‍Tag Component: Added new social media icons
• ‍Popover Component: Added a Close link with a boolean property
• ‍Tooltip Component: Added Color variant
• Added Typography properties to the Typography variables
• Fixes:
  • Fixed box shadows in Notification, Modal, Message, Tour, Statistic, QRCode
  • Fixed icon size in buttons

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.

‍

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.