Skip to content

lacymorrow/dazzboard

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 

History

60 Commits
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

Warning

This project is unmaintained.

dazzboard logo

A ✨ dazzling πŸ’« dashboard that works for you

Features

  • Built with React + Next. Use any React component as a dashboard object 🍑
  • Pre-cooked on the server for instant page loads with SSR 🍳
  • Includes basic components to fill your first board πŸ‡

dazzboard

Install

# Clone the repository
$ git clone https://github.com/Dazzboard/dazzboard.git
$ cd dazzboard

# Install dependencies
$ npm install

# Run Development
$ npm run dev

Run Production

npm start

Opens at localhost:3000

API

<Dash />

A container for holding a singular componentized element.

Optional properties

[background, badge, direction, fill, text, title, subtitle, subtext, width, wrap]

<Board />

A collection of <Dash /> elements representing a single dashboard. Nest multiple to add more Dazzboards. (also <DashGroup />, <DashList />, <DashTabs />)

Optional properties

[width]

<DashGroup />

A container for multiple <Dash /> elements. (also <DashGroup />, <DashList />, <DashTabs />)

Optional properties

[color, height, title, width]

<DashList />

A container for multiple <Dash /> elements, displayed in a compact format.

Optional properties

[color, height, title, width]

<DashTab />

A container for multiple <DashGroup /> elements to create a tabbed list.

Optional properties

[height, width]

<Card />

A colorful <Dash /> element with simpler API.

Optional properties

[background, text, title, subtext, width]

<Code />

A simple monospace text wrapper

Optional properties

[color]

background

Type: string

The CSS background value for the element.

Usage:
background='linear-gradient(315deg, #df74f9, #b72cf6)'
badge

Type: object

Add a colored badge to a <Dash /> element. Options are success and error.

Usage:
badge={{ success: {text: 'OK', link: '#'}, error: {text: 'Alert!', link: '#'}}}
color

Type: string

Hex color for the highlight color or title color of an element.

direction

'row' || 'column'

Set the Flexbox flex-direction.

fill

Type: bool

For stretching an element to fit it's container.

Usage:
fill='true'
height

Type: string

Defines the element height.

Usage:
height='300px'
width

Type: number || array

Defines a responsive element width. Use an array to define widths at multiple breakpoints. More info in the Rebass docs.

Usage:
width={[1, 1, 1, 1/4]}
wrap

Type: bool

Sets the Flexbox flex-wrap.

Usage:
wrap='true'
text
title
subtext
subtitle

Type: string

Dash text content properties.

License

MIT Β© Lacy Morrow