dashboard-blocks is an npm package that groups together many useful components that can be composed together to create beautiful Dashboards.
yarn add dashboard-blocks framer-motion @emotion/react @chakra-ui/react @emotion/styledFeatures
- Dark mode
- No global css dependency (only css in js with emotion)
- Easiest thing ever
- Pretty by default
Dashboard blocks
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.
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
Display elements inside a table with a top header Manages truncating its children, Has a load more button,
Display a graph with good defaults (depends on apex charts). Has a select to choose the time domain.
Breadcrumbs to display the current path
Link with a back arrow
Block with an error icon and red text
Banner block that highlights new changes and features, Can have an icon