# Team Workspace

> A team workspace home with a greeting, stat cards, onboarding checklist, recent activity and a month calendar.

- Author: Atelier UI
- License: MIT
- Page: https://chromotion.dev/en/templates/team-workspace
- Site: Atelier UI (https://chromotion.dev)

## Install

```bash
npx shadcn@latest add https://chromotion.dev/r/team-workspace.json
```

Adds the page at `app/team-workspace/page.tsx` together with the components below. Stack: React + TypeScript + Tailwind CSS v4, shadcn/ui conventions. `cn` comes from `@/lib/utils`.

## Components

- [App Sidebar](https://chromotion.dev/r/app-sidebar.md): `@/components/app-sidebar`
- [Stat Card](https://chromotion.dev/r/stat-card.md): `@/components/stat-card`
- [Onboarding Checklist](https://chromotion.dev/r/onboarding-checklist.md): `@/components/onboarding-checklist`
- [Activity Timeline](https://chromotion.dev/r/activity-timeline.md): `@/components/activity-timeline`
- [Event Calendar](https://chromotion.dev/r/event-calendar.md): `@/components/event-calendar`

## Dependencies

```bash
npm install lucide-react
```

## Source

```tsx title="app/team-workspace/page.tsx"
"use client"

import { CalendarDays, FolderKanban, GitMerge, Hexagon, House, Inbox, MessageSquare, Rocket, Settings, Users } from "lucide-react"

import { ActivityTimeline, type TimelineItem } from "@/components/activity-timeline"
import { AppSidebar } from "@/components/app-sidebar"
import { EventCalendar, type CalendarEvent } from "@/components/event-calendar"
import { OnboardingChecklist } from "@/components/onboarding-checklist"
import { StatCard } from "@/components/stat-card"

const events: CalendarEvent[] = [
  { id: "1", date: "2026-11-03", title: "Design review", time: "10:00", color: "violet" },
  { id: "2", date: "2026-11-05", title: "Sprint planning", time: "09:30", color: "blue" },
  { id: "3", date: "2026-11-07", title: "Standup", time: "09:15", color: "green" },
  { id: "4", date: "2026-11-07", title: "Customer call", time: "15:00", color: "amber" },
  { id: "5", date: "2026-11-12", title: "Launch day", time: "All day", color: "rose" },
  { id: "6", date: "2026-11-18", title: "Team lunch", time: "12:30", color: "amber" },
  { id: "7", date: "2026-11-24", title: "Quarterly OKRs", time: "11:00", color: "blue" },
]

const checklist = [
  { id: "profile", title: "Complete your profile", description: "Add a photo and a short bio so teammates know who you are.", actionLabel: "Edit profile" },
  { id: "invite", title: "Invite your team", description: "Projects are better together. Invite up to 5 teammates for free.", actionLabel: "Send invites" },
  { id: "project", title: "Create your first project", description: "Start from a template or from scratch.", actionLabel: "New project" },
  { id: "integrate", title: "Connect an integration", description: "Sync with Slack, GitHub or Linear in two clicks.", actionLabel: "Browse integrations" },
]

const activity: TimelineItem[] = [
  { icon: <Rocket />, color: "#22c55e", title: "Grace deployed Marketing site to production", time: "12m ago" },
  { icon: <GitMerge />, color: "#a855f7", title: "Alan merged “Drawer drag-to-close on touch”", time: "1h ago" },
  { icon: <MessageSquare />, color: "#3b82f6", title: "Margaret commented on “Migration guide for v2”", time: "3h ago" },
  { icon: <FolderKanban />, title: "Ada created the project Mobile app", time: "Yesterday" },
]

export default function TeamWorkspace() {
  return (
    <AppSidebar
      collapseBelow={768}
      brand={
        <>
          <Hexagon className="size-5 shrink-0 fill-primary text-primary" /> Hexa
        </>
      }
      brandIcon={<Hexagon className="size-5 shrink-0 fill-primary text-primary" />}
      groups={[
        {
          items: [
            { label: "Home", href: "#", icon: <House />, active: true },
            { label: "Inbox", href: "#", icon: <Inbox />, badge: 5 },
            { label: "Calendar", href: "#", icon: <CalendarDays /> },
          ],
        },
        {
          label: "Workspace",
          items: [
            { label: "Projects", href: "#", icon: <FolderKanban /> },
            { label: "Members", href: "#", icon: <Users /> },
            { label: "Settings", href: "#", icon: <Settings /> },
          ],
        },
      ]}
      user={{ name: "Ada Lovelace", email: "ada@hexa.dev", initials: "AL" }}
      accentColor="var(--ring)"
    >
      <div className="border-b bg-background px-6 py-5">
        <h1 className="text-xl font-semibold tracking-tight">Good morning, Ada</h1>
        <p className="mt-1 text-sm text-muted-foreground">Here is what is happening across your workspace today.</p>
      </div>

      <div className="flex flex-col gap-6 p-6">
        <div className="grid gap-4 sm:grid-cols-2 xl:grid-cols-3">
          <StatCard label="Open tasks" value="48" change={-6.4} caption="vs. last week" invertTrend data={[62, 60, 58, 55, 57, 52, 50, 48]} />
          <StatCard label="Deploys this week" value="23" change={14.2} caption="vs. last week" data={[10, 14, 12, 17, 15, 20, 23]} />
          <StatCard label="Active members" value="12" change={9.1} caption="vs. last week" data={[8, 9, 9, 10, 10, 11, 12]} />
        </div>

        <div className="grid gap-6 xl:grid-cols-2">
          <OnboardingChecklist items={checklist} defaultCompleted={["profile"]} />
          <section className="rounded-2xl border bg-card p-6 shadow-sm">
            <h2 className="mb-4 text-sm font-semibold">Recent activity</h2>
            <ActivityTimeline items={activity} />
          </section>
        </div>

        <EventCalendar events={events} year={2026} month={10} today="2026-11-07" />
      </div>
    </AppSidebar>
  )
}
```