Code components & design tokens for Frames X UI Kit

Beautiful unstyled UI components, free, open-source, and ready to copy and paste into your projects.

Built for:

Angular

React

Vue

soon

HTML

soon

Web Components

soon

For Developers

Build high-quality websites, apps, and design systems

✓

Production-ready components

✓

Unstyled and fully customizable

✓

Override default configurations

✓

CDK and framework utilities

Get Started for Free

/getting-started

① Install

npm i @cocokits/angular-components @cocokits/theme-frames-x

② Configure

import { provideCocokits } from '@cocokits/angular-components';
import { framesXUIComponentConfig } from '@cocokits/theme-frames-x';

/* Base Token */
var(--base-surface-1) var(--base-surface-2) var(--base-fill-1) var(--base-fill-2) var(--base-fill-3) var(--base-fill-4) var(--base-fill-5) var(--base-border) var(--base-disabled)

/* Brand Token */var(--state-brand-active) var(--state-brand-hover) var(--state-brand-selected)

/* Base Token */
var(--base-surface-1) var(--base-surface-2) var(--base-fill-1) var(--base-fill-2) var(--base-fill-3) var(--base-fill-4) var(--base-fill-5) var(--base-border) var(--base-disabled)

/* Brand Token */var(--state-brand-active) var(--state-brand-hover) var(--state-brand-selected)

For Designers

Design without creative limits

Bring your designs made with Frames X to life with zero framework experience.

✓

Multiple modes and themes support

✓

Hand-off your designs effortlessly

✓

Design tokens and code syntax

Download Frames X UI Kits

Frames X

CocoKits

Design and code unified

Frames X has partnered with CocoKits, a powerful set of tools that bridges design and code—bringing your favorite Figma UI kit components to life.

Install Components

Star on GitHub

Design tokens

Angular components

React components

Vue components

Q4'25

Design that empowers everyone

Great design should be available everywhere. That's why we've chosen open-source technology to bring Frames X UI kit natively to all modern web frameworks, completely free.

We're carefully recreating Frames X UI Kit components, building the most robust UI library in design and code.

Subscribe for news and updates.

Brought to you by