Code components & design tokens brought to perfection

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

compatible with

Angular

React

soon

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

Install Frames X Components

/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';

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

Web design system 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

Q1'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 the largest UI component library, building the most flawless interface design language— subscribe and be the first to use it.

Brought to you by