UI kits for Figma and code

What these kits contain

A UI kit gathers designed sections and components that you assemble instead of starting from a blank page. These go from mockup to site: the Bento kit delivers grid sections in HTML, Tailwind CSS v4 and Astro, in light and dark, with a Figma file on the same tokens. The restaurant website sections cover the menu filterable by allergen, the dish page, opening hours and an accessible booking form. The RGAA accessibility kit gathers annotation stamps, components in their states and an audit grid of 47 criteria. The design tokens starter in the DTCG format, free with an account, sets the base in CSS variables and a Tailwind theme. They are joined by kits for online stores (Shopify, WooCommerce, PrestaShop, Shopware, Magento and Adobe Commerce), an AI assistant interface, two game interface kits, token palettes, and neo-brutalist, frosted glass and health practice sections. Paid kits are bought once, under a commercial license, and stay in your account. Prospero, an e-commerce kit for Webflow, opens from Figma Community.

From the blog

UI Kit vs. Design System: Understanding the Crucial Differences

Understand the essential differences between UI Kit and Design System. Complete guide with examples, use cases and recommendations for your project.

Design Tokens: What the New W3C DTCG Standard Really Changes

The W3C Design Tokens Format Module (DTCG) has been stable since late 2025, backed by 24+ organizations. What it actually changes for your design systems.

Bento Design: The Must-Know UI Trend in 2025 (Guide & Examples)

Bento Design: the 2025 UI trend inspired by the Japanese lunchbox. Principles, origins and best practices to adopt it, with examples.