81 Pro components and page blocks

Get Pro
uibrik

Issue Tracker

Pro

Preview

Customize

status
Row height40px

Installation

Pro

Issue Tracker is a Pro component

Sign in to see the source, or install it with a license key. The live preview and props above are free to explore.

Sign inGet Pro

Install with a key

  1. Add the Pro registry to components.json:
    components.json
    {
  "registries": {
    "@uibrik-pro": {
      "url": "https://uibrik.com/r/pro/{name}.json",
      "headers": { "Authorization": "Bearer ${UIBRIK_LICENSE}" }
    }
  }
}
  2. Put your key in .env.local and add that file to .gitignore:
    .env.local
    UIBRIK_LICENSE=your-license-key
  3. Install it:
    Terminal
    npx shadcn@latest add @uibrik-pro/issue-tracker

Usage

import { IssueTracker } from "@/components/uibrik/issue-tracker/issue-tracker";​const people = ["Maya Patel", "Arjun Kumar", "Sofia Reyes", "Jonas Lind"];​const labelColors = {  Bug: "#ef4444",  Feature: "#8b5cf6",  Design: "#ec4899",  Perf: "#f59e0b",  Docs: "#0ea5e9",};​<IssueTracker  defaultGroupBy="status"  rowHeight={40}  showLabels  people={people}  labelColors={labelColors}  idPrefix="UI"  onGroupByChange={(groupBy) => {}}  onChange={(issues) => {}}  // issues={[…]}  // groupBy="status"/>

Props

IssueTracker
defaultGroupBy
Type "status" | "priority" | "assignee"
"status"
Grouping on mount.
rowHeight
Type number
40
Height of every row.
showLabels
Type boolean
true
Label chips on rows when there is room.
issues
Type Issue[]
SAMPLE_ISSUES
{ id, title, status, priority, assignee?, labels?, description?, subtasks?, createdMinutesAgo, history? }. Issues on mount; the tracker keeps its own state from then on.
groupBy
Type "status" | "priority" | "assignee"
–
Controlled grouping; pair with onGroupByChange.
onGroupByChange
Type (groupBy) => void
–
Called when the grouping changes.
people
Type (string | { name: string; avatar?: string })[]
sample team
People who can be assigned. A photo URL shows instead of initials.
labelColors
Type Record<string, string>
DEFAULT_LABEL_COLORS
Colour for each label, by name.
idPrefix
Type string
"UI"
Prefix for ids of new issues.
onChange
Type (issues: Issue[]) => void
–
Called with every issue after any change.
className
Type string
–
Classes for the outer shell. It fills its parent's height.