LiamMartens/figma-react-ui-kit

Figma React UI Kit

Latest Storybook
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

<Button disabled>I am a disabled button</Button>
<Button buttonSize={ControlSizes.S} buttonType={ButtonTypes.PRIMARY}>I am a small primary button</Button>
<Button buttonSize={ControlSizes.M} buttonType={ButtonTypes.GHOST}>I am a medium ghost button</Button>
<Button buttonSize={ControlSizes.M} buttonType={ButtonTypes.DESTRUCTIVE}>I am a medium ghost button</Button>

IconButton

<IconButton>
    <svg />
</IconButton>

Input

<InputLabel>Some label</InputLabel>
<Input type="text" />
<Input type="text" inlineLabel="Label" />
<Input type="text" cleanBorder />

Textarea

<Textarea>Enter some content...</Textarea

Checkbox

<Checkbox label="This is a checkbox" />

Select

<Select
    placeholder="Select an option"
    options={[{
        value: 'value',
        label: 'label',
        icon: (
            <svg />
        )
    }]}
    onChange={(option: ISelectOption) => {}}
/>

OptionMenu

<OptionMenu
    options={[
        {
            label: 'My option',
            value: 'my-option',
            onClick: (value) => {
                console.log(value);
            }
        }
    ]}
/>

Section

<Section>
    <SectionBlock>
        <SectionBlockTitle>This is a title</SectionBlockTitle>
    </SectionBlock>
</Section>

Tabs

<Tabs
    onSwitch={console.log}
    tabs={[{
        id: 'tab-1',
        label: 'Tab 1',
        view: () => (
            <p>Tab 1 Content</p>
        )
    }, {
        id: 'tab-2',
        label: 'Tab 2',
        view: () => (
            <p>Tab 2 Content</p>
        )
    }, {
        id: 'tab-3',
        label: 'Tab 3',
        view: TabComponent
    }]}
/>