What's New

The biggest release of CoreUI Design System for Figma since launch 🎉

​

Every component has been rebuilt on a tokenised foundation, measured against the CoreUI and Bootstrap 5 docs and verified for contrast in light and dark.

​

Variables

1,066 variables in seven collections:

    1. Primitives - 724 raw values: colour ramps, type, spacing, radii, shadows

    2. Semantic - Light · Dark

    3. Size - Small · Default · Large

    4. Shape - Default · Pill · Square

    5. Theme - Default · v3

    6. Table variant - nine contextual table colours

    7. Avatar size - Avatar's own scale

​

Every variable was also reorganised and documented: scopes so it is only offered where it applies, code syntax so Dev Mode hands you the matching CSS custom property, and a description naming the CoreUI Sass variable it comes from, including where a value is derived or where it knowingly falls short.

​

Redesigned component properties

Theme, size and shape are now modes, not variants - a .table-primary is a modifier on one table, not a different table. Buttons alone went from 270 variants to 135, and light and dark are one component instead of two kept in sync by hand.

Icons, badges and controls are real swappable slots instead of placeholder rectangles. Every component now has its own page.

​

New components 🙌

• Chip - filled and outline, four states, optional icon, avatar and remove control

• Chip Set - groups chips; selection and filtering are configured on the chips

• Chip Input - chips inside a field you type into, with wrapping selection​

​

Upgrading

Existing instances keep working. Variant lists are shorter because theme and size moved to the mode switcher, and overriding a value now means pointing a variable somewhere new rather than editing every instance.