0.2.8 • Published 3 years ago
figma-react-ui-kit v0.2.8
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
}]}
/>
0.2.1
3 years ago
0.2.0
3 years ago
0.2.7
3 years ago
0.2.6
3 years ago
0.2.8
3 years ago
0.2.3
3 years ago
0.2.2
3 years ago
0.2.5
3 years ago
0.2.4
3 years ago
0.1.7
4 years ago
0.1.6
4 years ago
0.1.5
4 years ago
0.1.4
6 years ago
0.1.3
6 years ago
0.1.2
6 years ago
0.1.1
6 years ago
0.1.0
6 years ago
0.0.29
6 years ago
0.0.28
6 years ago
0.0.27
6 years ago
0.0.26
6 years ago
0.0.25
6 years ago
0.0.24
6 years ago
0.0.23
6 years ago
0.0.22
6 years ago
0.0.21
6 years ago
0.0.20
6 years ago
0.0.19
6 years ago
0.0.18
6 years ago
0.0.17
6 years ago
0.0.16
6 years ago
0.0.15
6 years ago
0.0.14
6 years ago
0.0.13
6 years ago
0.0.12
6 years ago
0.0.11
6 years ago
0.0.10
6 years ago
0.0.9
6 years ago
0.0.8
6 years ago
0.0.7
6 years ago
0.0.6
6 years ago
0.0.5
6 years ago
0.0.4
6 years ago
0.0.3
6 years ago
0.0.2
6 years ago
0.0.1
6 years ago