Changelog

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