Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/lacymorrow/dazzboard
🍱 Delightful web dashboard
https://github.com/lacymorrow/dazzboard
browser dashboard dashes jarvis javascript nextjs node now react
Last synced: 2 months ago
JSON representation
🍱 Delightful web dashboard
- Host: GitHub
- URL: https://github.com/lacymorrow/dazzboard
- Owner: lacymorrow
- License: mit
- Created: 2018-02-12T19:50:50.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2024-09-21T15:36:56.000Z (4 months ago)
- Last Synced: 2024-10-29T10:33:23.259Z (3 months ago)
- Topics: browser, dashboard, dashes, jarvis, javascript, nextjs, node, now, react
- Language: JavaScript
- Homepage: https://dazzboard.vercel.app
- Size: 20.5 MB
- Stars: 4
- Watchers: 3
- Forks: 1
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
> [!WARNING]
> This project is unmaintained.
[](https://github.com/Dazzboard/dazzboard)
> A ✨ dazzling 💫 dashboard that works for you
### [Live Demo](https://dazzboard.vercel.app)
## 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 🍇
[](https://github.com/Dazzboard/dazzboard)
## Install
```bash
# 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](http://localhost:3000/)_
## API
### \
A container for holding a singular componentized element.
###### Optional properties
`[background, badge, direction, fill, text, title, subtitle, subtext, width, wrap]`
### \
A collection of `` elements representing a single dashboard. Nest multiple to add more Dazzboards.
(_also ``, ``, ``_)
###### Optional properties
`[width]`
### \
A container for multiple `` elements.
(_also ``, ``, ``_)
###### Optional properties
`[color, height, title, width]`
### \
A container for multiple `` elements, displayed in a compact format.
###### Optional properties
`[color, height, title, width]`
### \
A container for multiple `` elements to create a tabbed list.
###### Optional properties
`[height, width]`
### \
A colorful `` element with simpler API.
###### Optional properties
`[background, text, title, subtext, width]`
### \
A simple `monospace` text wrapper
###### Optional properties
`[color]`
##### background
Type: `string`
The CSS `background` value for the element.
###### Usage:
```jsx
background='linear-gradient(315deg, #df74f9, #b72cf6)'
```
##### badge
Type: `object`
Add a colored badge to a `` element. Options are `success` and `error`.
###### Usage:
```jsx
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:
```jsx
fill='true'
```
##### height
Type: `string`
Defines the element height.
###### Usage:
```jsx
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](jxnblk.com/rebass/).
###### Usage:
```jsx
width={[1, 1, 1, 1/4]}
```
##### wrap
Type: `bool`
Sets the Flexbox `flex-wrap`.
###### Usage:
```jsx
wrap='true'
```
##### text
##### title
##### subtext
##### subtitle
Type: `string`
Dash text content properties.
## License
[MIT](http://opensource.org/licenses/MIT) © [Lacy Morrow](http://lacymorrow.com)