Facet UI v1.3 is out: animated React components →

Build products
you're proud to ship

Production-ready UI kits by ETKits. Each ETKit pairs a Figma library with design tokens and coded components, kept in sync from the first pixel to production.

Components in motion
Facet UI in several brand themes Facet UI on mobile screens Facet UI developer handoff
Open the live style guide

Trusted by product teams at

  • Acmecorp
  • Lumina
  • Orbitly
  • Kitestack
  • Northfold
  • Zenhaus
  • Pixelra
Kits

One standard.
Many kits.

Facet UI is the first ETKit. Every kit that follows ships with the same three layers and the same level of polish.

Features

More than components.
A complete system.

Design and code stay in step, so what you see in Figma is what ships.

Themes in one click

Light and dark modes, 6 brand colors and 4 style themes, all driven by tokens.

Facet UI in several brand color themes

Figma Variables

246 variables: every color, size and radius can be rethemed.

Figma variables panel

Tokens to code

CSS variables, W3C DTCG JSON and a Tailwind preset.

:root {
  --primary: #5d4ff3;
  --radius: 12px;
  --surface: #0f0f17;
}

Clean layers

Auto Layout throughout, named and organized for handoff.

Organized Figma layers

AI agent demos

6 working demos with tool calls, generative UI and approvals.

Templates

Start from something real.
Not a blank file.

10 app templates and 26 screens, built from the same components and tokens.

Facet UI dashboard template
Get Facet UI

Three layers.
Ship with confidence.

Figma library

For designers

158components with variants Included with purchase
  • Variables and Auto Layout
  • Light and dark modes
  • 10 app templates, 26 screens
  • 147 icons

Design tokens

For everyone

246variables exported Included with purchase
  • CSS custom properties
  • W3C DTCG JSON
  • Tailwind preset
  • 6 brands, 4 style themes

Coded components

For developers

6working AI agent demos Try the live preview
  • Dependency-free HTML/CSS/JS
  • Live previews and code snippets
  • Charts and motion built in
  • Copy Markdown for AI tools

Available on

One purchase includes the Figma file, tokens and code. Already bought? Claim your purchase.

FAQ

Frequently asked
questions

What is ETKits?

ETKits is a collection of UI kits by ETKits. Each kit is a complete design system: a Figma library, design tokens and a coded component implementation that stay in sync.

What is in Facet UI?

158 Figma components with variants (every standard product-UI component), 246 design variables, 10 app templates, 6 brand themes, 4 style themes, light and dark modes, and a dependency-free HTML/CSS/JS style guide with 6 working AI agent demos.

Which frameworks does it work with?

The coded components are plain HTML, CSS and JavaScript, so they drop into any stack, and every component also comes as an animated React component you install with npx facetui. Tokens are exported as a Tailwind preset too.

Does it support dark mode?

Yes. Every component has light and dark values through semantic color tokens, in Figma and in code.

How do I get the Figma file?

After you buy, enter your purchase code on the claim page to unlock the Figma file and the code and tokens download.

Are more kits coming?

Yes. Facet UI is the first release, and new kits will be added here as they ship.