https://github.com/functional-ui/functional-ui-kit

Precise Figma & React components. Packed with best practices, unified prop names & consistent design and code.
https://github.com/functional-ui/functional-ui-kit

design-system figma front-end front-end-development frontend react react-components storybook ui-components ui-design ui-library uikit ux-design ux-ui

Last synced: 3 days ago
JSON representation

Precise Figma & React components. Packed with best practices, unified prop names & consistent design and code.

• Host: GitHub
• URL: https://github.com/functional-ui/functional-ui-kit
• Owner: functional-ui
• License: mit
• Created: 2023-11-19T14:09:05.000Z (about 1 year ago)
• Default Branch: main
• Last Pushed: 2024-06-13T09:51:23.000Z (7 months ago)
• Last Synced: 2024-12-20T12:08:48.821Z (11 days ago)
• Topics: design-system, figma, front-end, front-end-development, frontend, react, react-components, storybook, ui-components, ui-design, ui-library, uikit, ux-design, ux-ui
• Language: TypeScript
• Homepage: https://functional-ui-kit.com
• Size: 136 KB
• Stars: 591
• Watchers: 6
• Forks: 24
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE
  • Codeowners: CODEOWNERS

Awesome Lists containing this project

README

        




  

  

  

  



# Welcome to Functional UI Kit

Functional UI Kit is a professionally crafted UI Kit for design & development teams, and individuals. We provide core components you would need in every project, focusing on accessibility, development experience and unified designer-developer experience.

We've made sure that Figma variables and CSS variables work together effortlessly. They share the same names, usage and inheritance structure. This isn't just an extra feature, **it's the core approach.**

Each Figma variable has a direct counterpart in CSS, so there's no confusion. The design stays crystal clear as you move into the development phase.



  
Website: www.functional-ui-kit.com

  
Figma Library: https://www.figma.com/community/file/1338456115232271694

  
Storybook: https://functional-ui.github.io/functional-ui-kit

  
Github: www.github.com/functional-ui/functional-ui-kit

  
Npm: www.npmjs.com/package/functional-ui-kit



# Setup

### Install

Install the latest version from NPM.

```

npm install functional-ui-kit

```

### Setup CSS

Import the functional-ui-kit CSS file into your project in your css file

```css

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

html {

  ...

```

you can also import the CSS file directly into your main React App file

```js

import React, { Component } from 'react'

import 'functional-ui-kit/style';

class App extends Component {

  ...

```

### Customizing Theme

You can customize the theme by overriding the CSS variables. You can find the list of variables in the [theme file](https:\/\/github.com/functional-ui/functional-ui-kit/blob/main/src/css/theme-colors.css)

```css

:root {

  --fui-color-brand: var(--fui-color-green-700);

}

[data-theme="dark"],

[data-theme="dark"] * {

  --fui-color-brand: var(--fui-color-green-500);

}

...

```

### Using Components

You can use the components by importing them into your React App file

```js

import React, { Component } from 'react'

import { FuiBadge } from 'functional-ui-kit/fui-badge';

function App() {

  return (

    


      

    

  );

}

```