ghostout-ui-kit

React UI Kit based on the Bulma CSS framework

npm package

Installation

npm i ghostout-ui-kit

Usage

This kit comes with a variety of components that can be individually used. Follow the code samples to use in your React code.

Building Layouts

Columns allow you to build responsive layouts.

To build a layout, use as many Column components as desired inside of a Columns container.

import { Columns, Column } from  'ghostout-ui-kit'
...
<Columns>
    <Column>Column 1</Column>
    <Column>Column 2</Column>
    <Column>Column 3</Column>
    <Column>Column 4</Column>
</Columns>

Columns

Children Support? Yes

Supported Props

|Name|Description | |--|--| |className|Optional class name for styling. |

Column

A single Column can be used to individually change the column size.

Children Support? Yes

Supported Props

|Name|Description | |--|--| |modifiers|Class name to represent the size of the column, for example: is-three-quarters, is-two-thirds, is-half. For a full reference of all supported class names refer to Bulma's column documentation| |renderScrollbars|Optional Boolean that let's you control if a single column should display its own scrollbar. Use to create page layouts powered by columns. |

Components

Alert

Use Alert blocks to notify the user of something.

Children Support? Yes

import { Alert } from  'ghostout-ui-kit'
...
<Alert>Test</Alert>
<Alert type="danger">An error has occurred</Alert>
<Alert type="info">Hey! Take a look at this.</Alert>
<Alert type="warning">Beware</Alert>
<Alert type="success">Success!</Alert>

Supported Props

|Name|Description | |--|--| |type |Optional alert type that drives the alert's color. Supported values are danger, info, warning, and success |

Button

Button component for, you know, clicking on it.

Children Support? Yes

import { Button } from  'ghostout-ui-kit'
...
<Button className="my-class" onClick={() => console.log('Clicked')}>Click Me!</Button>
<Button loading>Click Me!</Button>

Supported Props

|Name|Description | |--|--| |className|Optional class name for styling. | |onClick|The onClick function. | |loading|Optional boolean to display the button in a loading state and disable clicking. |

ButtonGroup

Displays a set of buttons together.

Children Support? Yes

import { ButtonGroup, Button } from  'ghostout-ui-kit'
...
<ButtonGroup>
    <Button loading>Button 1</Button>
    <Button loading>Button 2</Button>
    <Button loading>Button 3</Button>
</ButtonGroup>

Card

Card component that act as a data container. Better used alongside the CardContent and CardHeader components.

Children Support? Yes

import { Card, CardHeader, CardContent } from  'ghostout-ui-kit'
...
<Card>
    <CardHeader title="This is a card" />
    <CardContent>
	    This is the card content.
    </CardContent>
</Card>

Supported Props

|Name|Description | |--|--| |className|Optional class name for styling. |

Hero

A hero banner that can be used to showcase something.

Children Support? No

import { Hero } from  'ghostout-ui-kit'
...
<Hero  head={<div>Hero Head</div>}  body={<div>Hero Body</div>}  />

Supported Props

|Name|Description | |--|--| |head|React component to be placed on the hero's header area. | |body|React component to be placed on the hero's body area. |

Dropdown

Dropdown to display a list of content.

Children Support? Yes*

*Children should be a list of DropdownItem components.

import { Dropdown, DropdownItem } from  'ghostout-ui-kit'
...
<Dropdown triggerContent={<span>Hover Over Me! <i  className="fas fa-caret-down"></i></span>}>
    <DropdownItem>Item 1</DropdownItem>
    <DropdownItem>Item 2</DropdownItem>
</Dropdown>

Supported Props

|Name|Description | |--|--| |className|Optional class name for styling. | |triggerContent|React component to be displayed as the visible portion of this component. |