functional-ui-kit is a TypeScript React component library with a matching Figma library for design and development teams that want designers and engineers working from the same variables and component names.

What it is

Functional UI Kit is an MIT-licensed, open-source UI kit that ships two artefacts in step: a React component package published to npm as functional-ui-kit, and a corresponding Figma community library, documented further in a Storybook instance. The package is written in TypeScript, and its components are imported individually from subpath entries such as functional-ui-kit/fui-badge, with a stylesheet pulled in separately as functional-ui-kit/style.

The concrete problem it addresses is the drift that occurs between a design file and a codebase. In this kit each Figma variable has a direct counterpart in CSS with the same name, usage and inheritance structure, so a token chosen in Figma resolves to the same token in the browser and the designer's intent survives into the development phase without a translation step. On top of that the kit states a focus on accessibility, development experience, and unified designer–developer experience, with unified prop names and consistent design and code across components.

Key capabilities

• Components are installed from npm as functional-ui-kit and imported per component, for example import { FuiBadge } from 'functional-ui-kit/fui-badge'.
• The stylesheet is loaded once via @import 'functional-ui-kit/style'; in a CSS file, or directly in the main React app file with import 'functional-ui-kit/style';.
• Figma variables and CSS variables are mapped one-to-one, sharing names, usage and inheritance structure so design and code stay aligned.
• Theming is done by overriding CSS variables such as --fui-color-brand, with separate values scoped to [data-theme="dark"] for dark mode, drawn from the theme file src/css/theme-colors.css.
• A published Figma community library lets designers work from the same component set the code uses.
• A hosted Storybook at alexyakir.github.io/functional-ui-kit documents the component catalogue.
• The repository is written in TypeScript and carries an MIT licence.

Who uses it and how

• Design and development teams adopting a shared token layer, where designers pull the Figma community library and engineers pull the same components and variable names from npm.
• Front-end developers starting a React project who need core components and can install them as a single package with one style import.
• Teams that need themlight and dark appearances from one codebase, switching tokens through the [data-theme="dark"] attribute and CSS variable overrides rather than forking components.
• Design-system maintainers who want to adjust brand colour and other theme values centrally in src/css/theme-colors.css and have the change propagate through every component.
• Contributors and evaluators who can browse the live Storybook and the GitHub repository before committing to the kit.

Getting started

Install the package with npm install functional-ui-kit and import the stylesheet with @import 'functional-ui-kit/style'; (or import 'functional-ui-kit/style'; in your React entry file), then import components such as FuiBadge from their functional-ui-kit/fui-* subpaths.

How it compares

This registry names no comparable tools against which functional-ui-kit can be measured on licence, self-hosting or cost, so on the facts available it stands alone here: it is distinguished by pairing an MIT-licensed React package with a Figma library whose variables mirror its CSS variables by name.

When to use it — and when not

It suits React projects where a designer–developer token handoff is the pain point, and where the team is content to work within the kit's own component set and naming conventions. A self-hoster operates only the npm package, the CSS import and their own build; the README gives no hosted or Docker option, and the published scope covers the core components described rather than an exhaustive catalogue, so teams needing a very large component surface should verify coverage in the Storybook before adopting it.

npm install functional-ui-kit

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

html {
  ...

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

class App extends Component {
  ...

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

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

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

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