Rud Dashboard

Dashboard component library with TailwindCSS. Supports React and Preact.

Installation

npm install rud-dashboard
# or
bun add rud-dashboard

Setup

1. Style Setup

For Tailwind CSS v4 (Recommended)

Add to your main CSS file:

@import "rud-dashboard";

For Tailwind CSS v3

Update your tailwind.config.js:

import rudPreset from 'rud-dashboard/tailwind.preset'

export default {
  presets: [rudPreset],
  content: [
    "./src/**/*.{js,ts,jsx,tsx}",
    "./node_modules/rud-dashboard/**/*.{js,ts,jsx,tsx}",
  ],
}

Then import the styles in your main CSS file:

@import 'rud-dashboard/styles.css';

Or copy the CSS variables from node_modules/rud-dashboard/dist/styles.css to customize them.

3. Use the Components

React:

import { Dashboard } from 'rud-dashboard'

function App() {
  return (
    <Dashboard 
      enableEditMode={true}
      defaultEditMode={false}
      gridMode="elegant"
      showDefaultToolbar={true}
      initialItems={[
        { id: '1', type: 'basic', title: 'Widget', x: 0, y: 0, w: 2, h: 1 }
      ]}
    />
  )
}

Preact:

import { Dashboard } from 'rud-dashboard/preact'

export function App() {
  return (
    <Dashboard 
      enableEditMode={true}
      defaultEditMode={false}
      gridMode="elegant"
      showDefaultToolbar={true}
      initialItems={[
        { id: '1', type: 'basic', title: 'Widget', x: 0, y: 0, w: 2, h: 1 }
      ]}
    />
  )
}

Development

Install Dependencies

bun install

Build Library

bun run build

Create Package

bun run pack:local

Playground

React Playground

# Start dev server
bun run dev
# With Node
npm run dev

Preact Playground

# Start dev server
bun run test:preact
# With Node
npm run test:preact

Testing Built Package

Preact Example

cd example
bun install
bun add ../rud-dashboard-0.1.0.tgz
bun run dev
bun run build
bun run preview

React Example

cd example-react
bun install
bun add ../rud-dashboard-0.1.0.tgz
bun run dev
bun run build
bun run preview

TypeScript

Full TypeScript support:

import type { DashboardProps, StatCardProps } from 'rud-dashboard'
// or
import type { DashboardProps, StatCardProps } from 'rud-dashboard/preact'

License

MIT