# Dashboard Components

> React Dashboard patterns with WordPress blue theme Use when this capability is needed.

- Skill: `tomevault-io/dashboard-components` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add tomevault-io/dashboard-components`
- Raw SKILL.md: https://api.skillmd.com/api/skills/tomevault-io/dashboard-components/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: tomevault-io (https://skillmd.com/u/tomevault-io)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/tomevault-io/dashboard-components

---


# Dashboard Components Reference

## Theme Colors (WordPress Blue)

```css
:root {
  --wp-bg: #0a0a0a;
  --wp-card: #141414;
  --wp-elevated: #1f1f1f;
  --wp-border: #2a2a2a;
  --wp-accent: #3b82f6;  /* WordPress Blue */
  --wp-text: #fafafa;
  --wp-text-secondary: #a3a3a3;
  --wp-text-muted: #737373;
}
```

## Button Templates

### Primary (Blue)
```tsx
<button className="bg-wp-accent hover:bg-blue-600 text-white px-4 py-2 rounded-lg">
  Save
</button>
```

### Secondary
```tsx
<button className="border border-wp-border text-wp-text hover:bg-wp-elevated px-4 py-2 rounded-lg">
  Cancel
</button>
```

## WordPress-Specific Components

### Post Status Badge
```tsx
const statusColors = {
  publish: 'bg-green-500/20 text-green-400',
  draft: 'bg-yellow-500/20 text-yellow-400',
  pending: 'bg-orange-500/20 text-orange-400',
  private: 'bg-purple-500/20 text-purple-400',
};

<span className={`px-2 py-1 rounded text-xs ${statusColors[status]}`}>
  {status}
</span>
```

### Media Type Icon
```tsx
const mediaIcons = {
  image: ImageIcon,
  video: VideoIcon,
  audio: AudioLinesIcon,
  application: FileIcon,
};

const Icon = mediaIcons[media.media_type] || FileIcon;
<Icon className="h-8 w-8 text-wp-text-muted" />
```

---
> Converted and distributed by [TomeVault](https://tomevault.io/claim/kaewz-manga) — claim your Tome and manage your conversions.
<!-- tomevault:4.0:skill_md:2026-04-13 -->