Task Card
Boards and tasksMITRich task item with priority, assignee, due date, and labels.
bun add @otfdashkit/ui
Preview
Task CardBoards and tasks
Code
@otfdashkit/uiimport { Users } from 'lucide-react'
import { TaskCard, TaskCardWithLabels } from '@otfdashkit/ui'
export function Example() {
return (
<div className="grid gap-4 max-w-2xl" style={{ gridTemplateColumns: 'repeat(auto-fill, minmax(min(100%,240px),1fr))' }}>
<TaskCard title="Redesign onboarding" description="Update the user onboarding flow." priority="High" assigneeInitials="AC" dueDate="Mar 20" />
<TaskCard title="Fix login bug" description="Users are getting 401 errors on mobile." priority="High" assigneeInitials="BS" dueDate="Mar 18" />
<TaskCardWithLabels title="Write API docs" description="Document all REST endpoints." priority="Medium" assigneeInitials="JD" dueDate="Mar 25" labels={['Docs', 'Backend']} />
<TaskCardWithLabels title="Add dark mode" description="Implement system-aware dark mode." priority="Low" assigneeInitials="TR" dueDate="Apr 1" labels={['Frontend', 'Design', 'UI']} />
</div>
)
}
Free with the SDK. This block ships in @otfdashkit/ui under the MIT license.
Props
Props declared in the TaskCard source. Inherited HTML attributes are not listed.
| Prop | Type | Default | Description |
|---|---|---|---|
| assigneeInitials | string | 'AC' | |
| className | string | ||
| description | string | 'Update the user onboarding experience with the new design language.' | |
| dueDate | string | 'Mar 20' | |
| priority | 'High' | 'Medium' | 'Low' | 'High' | |
| title | string | 'Redesign onboarding flow' |