What's New

Big release of CoreUI Design System for Penpot!

 

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.

​

Design tokens
1,066 tokens organised into seven sets:

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

2. Semantic - Light · Dark (theme sets)

3. Size - Small · Default · Large

4. Shape - Default · Pill · Square

5. Theme - Default · v3

6. Table variant - nine contextual table colours
    

Every token was reorganised and documented: correct token types so it's only offered where it applies, CSS output so Penpot's Code/Inspect hands you the matching custom property, and a description naming the CoreUI Sass variable it comes from - including where a value is derived or knowingly falls short.

​

Redesigned component properties
Theme, size and shape are now token-driven modes and variant properties, not duplicated components — 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 component instances 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
   

AI Agent Skills 🤖

A public package of agent skills (SKILL.md format) that teaches AI coding agents — Claude Code, Cursor, Codex, OpenCode — how to build faithful UI with the kit, and hand it off without rework.

Seven skills, two paths:

• In Penpot — coreui-kit-design assembles screens from the kit's real components and tokens; coreui-kit-to-code converts an existing Penpot design to code by reading each component's identity, not the raw CSS export.

• In code — coreui-kit-page builds pages directly from CoreUI's coded (Pro) components.

• Shared — coreui-kit-setup (connect Penpot MCP or install the Pro components), coreui-kit-select (which component when), coreui-kit-import-tokens, and coreui-kit-brand (rebrand by repointing tokens).

​​

Upgrading

Existing instances keep working. Variant lists are shorter because theme and size moved to token themes and variant properties, and overriding a value now means pointing a token somewhere new rather than editing every instance.