https://github.com/liammartens/figma-react-ui-kit

https://github.com/liammartens/figma-react-ui-kit

Last synced: 2 months ago
JSON representation

• Host: GitHub
• URL: https://github.com/liammartens/figma-react-ui-kit
• Owner: LiamMartens
• Created: 2019-05-19T22:29:16.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2023-03-15T00:31:09.000Z (almost 2 years ago)
• Last Synced: 2024-10-18T16:13:18.654Z (2 months ago)
• Language: TypeScript
• Size: 1.83 MB
• Stars: 21
• Watchers: 3
• Forks: 1
• Open Issues: 6
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md

Awesome Lists containing this project

README

        
# Figma React UI Kit

[![npm-badge](https://badge.fury.io/js/figma-react-ui-kit.svg)](https://www.npmjs.com/package/figma-react-ui-kit)  

[Latest Storybook](https://development--6276bd991b0b1d004aff360e.chromatic.com)  

This library contains some generic components for creating Figma styled UI's

## Getting started

Install the libray

```

npm install --save figma-react-ui-kit

```

## Import css

Be sure to import the css files.

```

node_modules/figma-react-ui-kit/lib/index.css

node_modules/figma-react-ui-kit/lib/style.css

```

## Included components

### Button

```html

I am a disabled button

I am a small primary button

I am a medium ghost button

I am a medium ghost button

```

### IconButton

```html

    

```

### Input

```html

Some label

```

### Textarea

```html

Enter some content...

```

### Select

```jsx

        )

    }]}

    onChange={(option: ISelectOption) => {}}

/>

```

### OptionMenu

```jsx

 {

                console.log(value);

            }

        }

    ]}

/>

```

### Section

```html

    

        This is a title

    

```

### Tabs

```jsx

 (

            
Tab 1 Content

        )

    }, {

        id: 'tab-2',

        label: 'Tab 2',

        view: () => (

            
Tab 2 Content

        )

    }, {

        id: 'tab-3',

        label: 'Tab 3',

        view: TabComponent

    }]}

/>

```