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)