Changelog

🧩 New components added to Ant Design

- Added a new component Masonry.
- Added Panel Steps component.
- Added Progress / Value Position component.
- Added Descriptions / Basic component.
- Added Timeline / Horizontal.

🧩 New components added to Ant Design X:

- Think
- CodeHighlighter
- FileCard
- Sources
- FileCard has been extracted from the Attachments component and moved to a separate component.

🎨 Added/updated component variables

- Added a new variable VerticalMarginInline to Divider Vertical.
- Added itemPaddingInline in the Menu component.
- Added new variables to the Menu component: horizontalLineHeight, itemActiveBg, itemPaddingInline, dangerItemColor, dangerItemHoverColor, dangerItemSelectedColor, dangerItemActiveBg, dangerItemSelectedBg, darkDangerItemColor, darkDangerItemSelectedBg, darkDangerItemHoverColor, darkDangerItemSelectedColor, darkDangerItemActiveBg.
- Added navArrowColor component to Steps.
- Added component variables to Tabs: cardHeight, cardHeightLG, cardHeightSM.
- Added new variables to the Skeleton component: blockRadius, paragraphLiHeight, paragraphMarginTop, titleHeight.
- Added lineBorderRadius variable to the Progress component.
- Added handleFontSize to the InputNumber component.
- Added controlItemWidth to the Mentions component.
- Added variables to the Rate component: starBg, starColor, starSize, starSizeLG, starSizeSM.
- Added variables to the Slider component: handleActiveOutlineColor, handleLineWidth, handleLineWidthHover.
- Added maxWidth to Tooltip.
- Added variables to Switch: innerMaxMargin, innerMaxMarginSM, innerMinMargin, innerMinMarginSM.
- Added actionsColor and pictureCardSize to Upload.
- Added variables to the Avatar component: groupBorderColor, groupOverlapping, iconFontSize, iconFontSizeLG, iconFontSizeSM.
- Added miniContentHeight and actualized Calendar size.
- Added new variables: arrowOffset, arrowSize, dotGap, dotOffset.
- Added borderlessContentBg variable to the Collapse component.
- Added variables to the Descriptions component: colonMarginLeft, colonMarginRight, itemPaddingBottom, itemPaddingEnd.
- Added variables to the Table component: expandIconBg, rowExpandedBg, rowSelectedBg, selectionColumnWidth, stickyScrollBarBg.
- Added tailWidth to the Timeline component.
- Added and used the actionsBg variable in the Card component.

🧱 New variants / sizes / states

- Added a new variant in component InputNumber / Spinner.
- Added Error status in the Menu component.
- Added Large size to Pagination items.
- Added Center variant to Steps / Steps Item / Horizontal.
- Added Size variant to the Rate component.
- Added solidTextColor to the Tag component.
- Added variants to Tag / Status.

🧭 Naming changes / standardization

- Changed name from Input / Pre Post Tab to InputNumber / Pre Post Tab.
- Changed the name from Direction to Orientation in the Space component.
- Changed the name from Direction to Orientation in the Splitter component.
- Changed the name of the variable from resizeSpinnerSize to splitBarDraggableSize.
- Changed the name from Description to Description Title in Steps / Steps Item / Horizontal component settings.
- Changed the name from Position to Placement in the Tabs component.
- Changed the name to dotPlacement from dotPosition and changed Left and Right to Start and End.
- Changed the name from Expand Icon Position to Expand Icon Placement in the Collapse / Collapse Item component.
- Changed the name in settings from Text Position to Text Placement in the Timeline component.
- Standardized names of Select component items and made them all start with Select / Select Input.
- Standardized naming and changed names from Input to, for example, Input / Input Item / Outlined.

🔧 Fixes & improvements

- Deleted unused Splitter component variables.
- Fixed table and cell settings and linked the Action 2 boolean property to the correct item.
- Fixed and linked component variables to the appropriate global variables where they were missing.
- Updated Pagination / Pagination Item settings by adding an Active variant as a separate item, adding a hover variant for the Active state, and adding Disabled to State.
- Changed the height of Tabs Items.
- Changed border radius SM and LG in DatePicker.
- Fixed the background color of the Dashed Button disabled state to dashedBgDisabled and the disabled Ghost to colorBgContainerDisabled.
- Fixed text position in the Progress component.
- Fixed variables in DatePicker: cellHoverWithRangeBg, cellRangeBorderColor, paddingInlineLG, and actualized components.
- Actualized and added to the Select component: multipleItemHeight, multipleItemHeightLG, multipleItemHeightSM.
- Actualized Slider Handle settings with updated variables.
- Fixed Tooltip background.
- Fixed margin inside the TimePicker input.
- Fixed extra node in Collapse.

🧩 Nested instances / structural updates

- Added a link to the Masonry component in the Style Guide.
- Added Footer to the Drawer component.
- Added nested instance Select / Select Input to the Cascader component.
- Added nested instance settings for Transfer / Transfer Buttons and a boolean to delete Arrow Back.
- Added a nested instance to the AutoComplete component.
- Added a nested instance option to the suffix in TimePicker and added a prefix.

🎨 Visual & UI adjustments

- Changed Tag / Colorful settings from Border boolean to Type: Filled / Solid / Outlined.
- Actualized Tag component colors from level 6 to 7 to improve contrast.
- Removed the border option from the Tag component and the dashed border from Add New; updated icon color and internal margins, added an instance swap for the closeable icon, and updated the component background.

🗑️ Deprecated Components

- The List component has been deprecated and removed from the document.

New Features

• Added Ant Design X Components with screen examples based on Ant Design X

• Enhanced Color System
  • Added full color palette support to Button component
  • Introduced pink color to variables for Button color palette
  • Added nodeHoverColor and nodeSelectedColor variables to Tree component
• New Component Variants
  • Added Round variant to Segmented component
  • Introduced Underlined variant to Input, InputNumber, Select, DatePicker, and TimePicker
  • Added Borderless variant to Select component
  • Added Filled variant to Select and TimePicker components
  • Added preset variant to DatePicker component
  • Added showWeek variant to Calendar component
• Component Property Additions
  • Added prefix to DatePicker Input (Outlined) with swap property
  • Added prefix to Select component with swap property
  • Introduced Max Count feature to Select component with swap property
  • Added separator to Input/OTP components
  • Added Icon property to Notification component
  • Added indentSize variable for custom indent width in Tree component

Improvements

• Visual Consistency Updates
  • Card component now uses bodyPaddingSM, headerPaddingSM, bodyPadding, and headerPadding tokens
  • Menu now utilizes subMenuItemSelectedColor token for submenu titles with selected options
  • Added optionSelectedColor to Cascader for selected options
  • Changed arrow color in Select from colorTextPlaceholder to colorTextQuaternary
  • Added activeBorderColor and hoverBorderColor variables to Select component
  • Introduced labelColor token in Description component, replacing colorTextTertiary
• Organization & Usability
  • Improved page organization with new playground and grouped component sections
  • Added AntblocksUI to a single page for better component organization
  • Removed underscores from component names to enhance searchability

Bug Fixes

• Fixed hover state color in DatePicker Filled component (colorFillTertiary → colorFillSecondary)
• Fixed text color in Filled variant for Input and DatePicker (colorFillDescription → colorTextPlaceholder)
• Fixed color issues for warning and error statuses in DatePicker and TimePicker
• Fixed icon color in TimePicker Input components
• Changed icon in TimePicker (Borderless) to ClockCircleOutlined
• Fixed DatePicker color in disabled state to colorBgContainerDisabled

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.