https://github.com/remorses/dashboard-blocks
Modern dashboards building blocks
https://github.com/remorses/dashboard-blocks
Last synced: 7 months ago
JSON representation
Modern dashboards building blocks
- Host: GitHub
- URL: https://github.com/remorses/dashboard-blocks
- Owner: remorses
- Created: 2020-06-13T16:28:55.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2021-10-03T18:13:31.000Z (over 4 years ago)
- Last Synced: 2025-03-04T18:40:47.988Z (10 months ago)
- Language: TypeScript
- Homepage: https://dashboard-blocks.now.sh
- Size: 1.21 MB
- Stars: 4
- Watchers: 3
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
Dashboards building blocks
`dashboard-blocks` is an npm package that groups together many useful components that can be composed together to create beautiful Dashboards.
## Install
```sh
yarn add dashboard-blocks framer-motion @emotion/react @chakra-ui/react @emotion/styled
```
Features
- Dark mode
- No global css dependency (only css in js with emotion)
- Easiest thing ever
- Pretty by default
## Todo
Dashboard blocks
## Dashboard Layout
Layout with sidebar to easily create a dashboard skeleton, children are rendered side to the nav links.
The side nav is rendered as a select when in mobile view.
### Block
A container for a graph, a stat, a table, can have a title (can be an outer title)
Manages the space around and has a cool shadow or border
### Table
Display elements inside a table with a top header
Manages truncating its children,
Has a load more button,
### Chart
Display a graph with good defaults (depends on apex charts).
Has a select to choose the time domain.
### Breadcrumbs
Breadcrumbs to display the current path
### Back link
Link with a back arrow
### Error message
Block with an error icon and red text
### Banner
Banner block that highlights new changes and features,
Can have an icon