0.2.8 • Published 2 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
2 years ago
0.2.0
2 years ago
0.2.7
2 years ago
0.2.6
2 years ago
0.2.8
2 years ago
0.2.3
2 years ago
0.2.2
2 years ago
0.2.5
2 years ago
0.2.4
2 years ago
0.1.7
3 years ago
0.1.6
3 years ago
0.1.5
3 years ago
0.1.4
5 years ago
0.1.3
5 years ago
0.1.2
5 years ago
0.1.1
5 years ago
0.1.0
5 years ago
0.0.29
5 years ago
0.0.28
5 years ago
0.0.27
5 years ago
0.0.26
5 years ago
0.0.25
5 years ago
0.0.24
5 years ago
0.0.23
5 years ago
0.0.22
5 years ago
0.0.21
5 years ago
0.0.20
5 years ago
0.0.19
5 years ago
0.0.18
5 years ago
0.0.17
5 years ago
0.0.16
5 years ago
0.0.15
5 years ago
0.0.14
5 years ago
0.0.13
5 years ago
0.0.12
5 years ago
0.0.11
5 years ago
0.0.10
5 years ago
0.0.9
5 years ago
0.0.8
5 years ago
0.0.7
5 years ago
0.0.6
5 years ago
0.0.5
5 years ago
0.0.4
5 years ago
0.0.3
5 years ago
0.0.2
5 years ago
0.0.1
5 years ago