https://github.com/functional-ui/functional-ui-kit Skip to content Toggle navigation Sign in * Product + Actions Automate any workflow + Packages Host and manage packages + Security Find and fix vulnerabilities + Codespaces Instant dev environments + Copilot Write better code with AI + Code review Manage code changes + Issues Plan and track work + Discussions Collaborate outside of code Explore + All features + Documentation + GitHub Skills + Blog * Solutions For + Enterprise + Teams + Startups + Education By Solution + CI/CD & Automation + DevOps + DevSecOps Resources + Learning Pathways + White papers, Ebooks, Webinars + Customer Stories + Partners * Open Source + GitHub Sponsors Fund open source developers + The ReadME Project GitHub community articles Repositories + Topics + Trending + Collections * Pricing Search or jump to... Search code, repositories, users, issues, pull requests... Search [ ] Clear Search syntax tips Provide feedback We read every piece of feedback, and take your input very seriously. [ ] [ ] Include my email address so I can be contacted Cancel Submit feedback Saved searches Use saved searches to filter your results more quickly Name [ ] Query [ ] To see all available qualifiers, see our documentation. Cancel Create saved search Sign in Sign up You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert {{ message }} functional-ui / functional-ui-kit Public * Notifications * Fork 4 * Star 75 * Precise Figma & React components. Packed with best practices, unified prop names & consistent design and code. functional-ui-kit.com License MIT license 75 stars 4 forks Branches Tags Activity Star Notifications * Code * Issues 0 * Pull requests 0 * Actions * Projects 0 * Security * Insights Additional navigation options * Code * Issues * Pull requests * Actions * Projects * Security * Insights functional-ui/functional-ui-kit This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository. main BranchesTags Go to file Code Folders and files Name Name Last commit Last commit message date Latest commit History 46 Commits .github/workflows .github/workflows .husky .husky .storybook .storybook fui-badge fui-badge fui-button fui-button fui-checkbox fui-checkbox fui-empty fui-empty fui-modal fui-modal fui-notification fui-notification fui-option-group fui-option-group fui-popover fui-popover fui-radio fui-radio fui-select fui-select fui-status-message fui-status-message fui-stepper fui-stepper fui-switch fui-switch fui-text-input fui-text-input fui-toggle fui-toggle fui-tooltip fui-tooltip src src style style .babelrc.json .babelrc.json .eslintrc.js .eslintrc.js .gitignore .gitignore CHANGELOG.md CHANGELOG.md CODEOWNERS CODEOWNERS LICENSE LICENSE README.md README.md package.json package.json tsconfig.json tsconfig.json vite.config.ts vite.config.ts View all files Repository files navigation * README * MIT license functional-ui-kit-cover [6874747073] [6874747073] [6874747073] [6874747073] Welcome to Functional UI Kit Functional UI Kit is a professionally crafted design system 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. Your design ideas stay 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 @import 'functional-ui-kit/style'; html { ... you can also import the CSS file directly into your main React App file 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 :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 import React, { Component } from 'react' import { FuiBadge } from 'functional-ui-kit/fui-badge'; function App() { return (
); } About Precise Figma & React components. Packed with best practices, unified prop names & consistent design and code. functional-ui-kit.com Topics react ui-design front-end frontend uikit react-components storybook ui-components figma front-end-development ux-design design-system ui-library ux-ui Resources Readme License MIT license Activity Custom properties Stars 75 stars Watchers 1 watching Forks 4 forks Report repository Releases 1 v1.0.0 Functional UI Kit launch! Latest Feb 11, 2024 Packages 0 No packages published Contributors 3 * @AlmogAdziashvili AlmogAdziashvili Fiasco * @alexyakir alexyakir Alex Yakir * @gavrielc gavrielc Languages * TypeScript 68.0% * CSS 22.8% * MDX 4.8% * HTML 2.4% * JavaScript 2.0% Footer (c) 2024 GitHub, Inc. Footer navigation * Terms * Privacy * Security * Status * Docs * Contact * Manage cookies * Do not share my personal information You can't perform that action at this time.