# Functional UI Kit and its bet on Figma variables matching CSS variables

> Functional UI Kit is a React and TypeScript component set from Alex Yakir that ships a Figma library, a Storybook and an npm package, betting that a designer variable and a CSS variable should carry the same name. The bet is the product, and it comes with a set of trade-offs worth reading before you install it.

**alexyakir/functional-ui-kit** — Precise Figma & React components. Packed with best practices, unified prop names & consistent design and code.

- Repository: https://github.com/alexyakir/functional-ui-kit
- Website: https://functional-ui-kit.com
- Stars: 620 · Forks: 26
- Language: TypeScript
- License: MIT
- Published: 2026-10-22 · Updated: 2026-10-22 · Language: en
- Canonical page: https://hysenlabs.com/projects/alexyakir-functional-ui-kit

## The core claim is that a Figma variable and a CSS variable share a name

Functional UI Kit is a UI kit for design and development teams and for individuals who work alone on both sides of the handoff. The project states that it focuses on accessibility, development experience and a unified designer and developer experience, and it puts the mechanism in plain terms: each Figma variable has a direct counterpart in CSS, they share the same names, usage and inheritance structure. The documentation is explicit that this is not an extra feature but the core approach. That matters more than it might sound, because the usual failure in a design system is not a missing button, it is a designer picking a grey from a Figma style while a developer picks a different grey from a stylesheet, and nobody noticing until the review. Functional UI Kit tries to make that mismatch structurally impossible by starting both sides from the same names. The kit is available as a Figma community library, a Storybook, an npm package called functional-ui-kit, and a site at functional-ui-kit.com, all from one repository maintained by Alex Yakir.

## Fifteen component directories, mostly inputs and overlays

The repository layout shows how the library is organised: each component lives in its own top level directory with a matching name, and package.json lists the same set in the files array that gets published to npm. The set is fui-badge, fui-button, fui-checkbox, fui-empty, fui-modal, fui-notification, fui-option-group, fui-popover, fui-radio, fui-select, fui-status-message, fui-stepper, fui-switch, fui-text-input, fui-toggle and fui-tooltip. Sixteen directories covering badges, buttons, form controls, empty states, modals, notifications, popovers, status messages, a stepper and a tooltip. The shape of that list is worth stating plainly: this is a form and feedback kit, not an application shell. There is no table, no navigation, no chart and no date picker in the published set. Teams adopting it should expect to bring their own patterns for anything heavier. The naming convention is consistent, which helps with grep and with code review, and the prefix means the components will not collide with anything else in a bundle.

## Installation is an npm package plus one CSS import

The setup path is short because the package ships its own stylesheet. Install the latest version from npm, then import the stylesheet into your CSS file.

```bash
npm install functional-ui-kit
```

The stylesheet is exposed as a subpath export, so the import goes in beside your other global styles.

```css
@import 'functional-ui-kit/style';
```

The documentation also shows the same import placed directly in the main React App file, which saves a separate stylesheet when a project has no CSS file yet.

```js
import React, { Component } from 'react'
import 'functional-ui-kit/style';
```

Neither import carries the token values, though. The theme file at src/css/theme-colors.css is where the variable names are defined, and it is the reference you need before deciding whether the kit can be restyled to your brand or only partially reskinned. Storybook is the other half of the workflow. The package scripts define dev as npm run storybook and a separate storybook script that starts the tool on port 6006, with a build script and a deploy script that pushes to Chromatic using a project token checked into package.json. That token in a public repository is a detail to raise with the maintainer rather than to rely on for your own deployments.

## Theming runs through CSS variables you override yourself

Customisation happens by overriding the CSS variables rather than by passing a theme object to a provider. The documentation gives the shape of that override, and it is the mechanism to understand before wiring the kit into an existing brand.

```css
:root {
  --fui-color-brand: var(--fui-color-green-700);
}

[data-theme="dark"],
[data-theme="dark"] * {
  --fui-color-brand: var(--fui-color-green-500);
}
```

Two things follow from that pattern. The theme hook is a data-theme attribute on an element, with a descendant selector that catches children, so a dark region can be scoped to a subtree rather than forced across the whole page. And the brand variable points at another variable, so the palette is a set of ramps that a theme selects from, which is the same structure the Figma variables use and therefore the reason the two stay in step. The limit is that only variables listed in the theme file are reachable this way. Anything hard coded inside a component style is not, and the documentation does not enumerate which parts of a component can be themed without reading the component source. A team that needs per-component overrides will find out by reading fui-button and the other component folders directly.

## Using a component is a named import from its own subpath

Components are imported individually rather than from a barrel, which keeps bundles smaller and makes tree shaking less of a concern. The example the documentation gives is a badge.

```js
import React, { Component } from 'react'
import { FuiBadge } from 'functional-ui-kit/fui-badge';

function App() {
  return (
    <div>
      <FuiBadge label='label' />
    </div>
  );
}
```

The import path mirrors the published directory list in package.json, and the prop name for the badge is label. Two details stand out for anyone integrating this with a typed codebase. The package is written in TypeScript, with tsconfig.json and a Babel preset chain in the dev dependencies, yet the usage examples are class component React with a label prop written as a plain string, which is the older style and will look odd in a modern hooks-based project. The runtime dependencies are small and telling: @floating-ui/react for positioning, classnames for conditional class merging, and react-modal for the modal component. That last one matters, because react-modal brings its own accessibility and focus handling conventions that you inherit rather than design.

## Storybook and Chromatic are the review loop, not an afterthought

The development scripts describe a project whose main review surface is Storybook. The dev script runs npm run storybook, which starts on port 6006, and the repository includes a .storybook directory alongside .husky, .eslintrc.js, .babelrc.json and a precommit script that runs lint-staged. The Storybook dev dependencies list addons for design, essentials, interactions, links, mdx-gfm, toolbars and blocks, plus a react-webpack5 builder and the testing library. The addon-designs and addon-links addons are what let a designer open the Figma library inside Storybook and see the same component side by side with its source, and they are the practical expression of the shared variable names. The addon-interactions addon covers component interaction testing. This is a repository where the documentation site and the design library are treated as part of the product, and that has a cost: a lot of infrastructure depends on Storybook 7 packages and on Chromatic for visual review, so a team that abandons Storybook loses more than a sandbox.

## Licence and release history are the two rough edges

Two things deserve attention before adoption. The first is a licence inconsistency: the repository is recorded under an MIT licence, with a LICENSE file at the top level, while package.json declares the license field as ISC. Those are different licences with different terms, and the version on npm is what your package manager sees. This is not legal advice, but it is the kind of mismatch that a compliance checklist catches, and the practical step is to ask which one the maintainer intends before shipping it inside a closed product. The second is release cadence. The single recorded release is design-system v1.0.0 on 2024-02-11, described as the Functional UI Kit launch, while package.json carries version 1.0.3 and the last push to the main branch was on 2026-09-24. A version number that moved past the only tagged release, with a CHANGELOG file in the tree, suggests changes are landing without tagged releases. The repository is not archived and the push is recent, so the code is being worked on, but you should verify that what npm serves matches what the repository contains, since the version history does not tell that story clearly.

## Conclusion

Functional UI Kit fits teams that already work in Figma and React and want one token vocabulary across both tools, and it fits those who want a Storybook plus a community Figma library instead of a bespoke kit. It does not fit projects on Vue, Svelte or Angular, and it does not fit teams that need a component set beyond forms, overlays and status messaging. Before adopting it, run npm install functional-ui-kit and check that the sixteen shipped component directories cover the screens you need, read src/css/theme-colors.css to see how much of the palette is genuinely exposed, and confirm the MIT repository licence against the ISC string recorded in package.json with whoever handles compliance.

## FAQ

### How do I install Functional UI Kit?

Install the package from npm with npm install functional-ui-kit, then import the stylesheet with @import 'functional-ui-kit/style'; in your CSS file or directly in your main React App file.

### How does Functional UI Kit theme its components?

You override CSS variables such as --fui-color-brand, which the documentation shows being pointed at a green ramp value in :root and switched under a [data-theme="dark"] selector. The full variable list lives in src/css/theme-colors.css.

### Which components does Functional UI Kit include?

The published set is sixteen directories covering badges, buttons, checkboxes, radio buttons, switches, toggles, text inputs, selects, option groups, a stepper, a popover, a tooltip, a modal, notifications, status messages and an empty state.

### Is there a Figma library and Storybook for Functional UI Kit?

Yes. A Figma community library is linked from the documentation, and the Storybook runs locally through the npm run storybook script on port 6006, with a published Storybook and a Chromatic deploy script in package.json.

## Sources

- [alexyakir/functional-ui-kit on GitHub](https://github.com/alexyakir/functional-ui-kit)
- [License: MIT](https://github.com/alexyakir/functional-ui-kit/blob/main/LICENSE)
- [Project website](https://functional-ui-kit.com)
- [README](https://github.com/alexyakir/functional-ui-kit/blob/main/README.md)
- [Releases](https://github.com/alexyakir/functional-ui-kit/releases)

---

Hysen Labs editorial analysis, written from the project's own repository and release notes. Cite the canonical page: https://hysenlabs.com/projects/alexyakir-functional-ui-kit