Project Dashboard
NewInstallation
npx shadcn@latest add https://uibrik.com/r/project-dashboard.jsonInstall the packages
npm install @tabler/icons-react motionAdd the cn helper
Imports
cnfrom@/lib/utils, whichshadcn initcreates. Add it by hand without shadcn.Copy the source into your project
components/uibrik/project-dashboard/project-dashboard.tsx"use client"; import { useCallback, useState, type FormEvent, type ReactNode } from "react"; import { motion, useReducedMotion } from "motion/react"; import { IconPlus, IconX } from "@tabler/icons-react"; import { cn } from "@/lib/utils"; import { Avatar, Badge, Button, CHIP, Dialog, EASE_OUT, EmptyState, FOCUS, Field, Input, PageHeader, Panel, Progress, Select, TILE, ago, useToast,
Adds the files to
components/uibrik/project-dashboard and installs @tabler/icons-react and motion. With the @uibrik namespace set up: npx shadcn@latest add @uibrik/project-dashboard.Props
ProjectDashboard- title
- Type string
- "Platform team"
- Names the team or project.
- capacity
- Type number
- 8
- Open issues per person before they read as over capacity.
- cycle
- Type { name: string; dates: string; goal?: string; daysLeft: number; added?: number; stats?: { label: string; value: string }[] }
- –
- The current cycle. `added` counts issues added after it started.
- counts
- Type Record<"backlog" | "todo" | "in-progress" | "in-review" | "done", number>
- –
- Issue counts per status for the cycle.
- members
- Type { name: string; open: number; done: number; avatar?: string }[]
- –
- One row per person with their open and done issues.
- issues
- Type { id: string; title: string; status: IssueStatus; priority: "urgent" | "high" | "medium" | "low" | "none"; assignee: string; updatedMinutesAgo: number }[]
- –
- Recently updated issues, newest first.
- activity
- Type { id: string; actor: string; action: string; issue: string; detail?: string; minutesAgo: number }[]
- –
- Feed entries, newest first, read as “actor action issue detail”.
- className
- Type string
- –
- Classes for the root.
