ibrandify UI / Focus City Search K Upgrade 2 free Feedback Focus City A compact focus calendar with a morphing isometric skyline, heatmap, interactive day inspection, session breakdown and responsive controls. IU ibrandify UI by Waqar H. Syed Copy prompt Save Remix CLI Report Usage.tsx Component.tsx Copy "use client"; import * as React from "react"; import { FocusCity, type FocusDay } from "@/components/ui/focus-city"; /** Fixed, deterministic demo data. Replace with your own session history. */ export const demoDays: FocusDay[] = Array.from({ length: 81 }, (_, index) => { const date = new Date(Date.UTC(2026, 6, 20 + index)); const weekend = date.getUTCDay() === 0 || date.getUTCDay() === 6; const resting = index % 17 === 5 || index % 23 === 10 || (weekend && index % 3 === 0); let seed = Math.imul(index + 17, 0x45d9f3b); seed = Math.imul(seed ^ (seed >>> 16), 0x45d9f3b); seed = (seed ^ (seed >>> 16)) >>> 0; const total = resting ? 0 : weekend ? 35 + seed % 83 : 75 + seed % 165; const first = Math.round(total * .49), second = Math.round(total * .31); return { date: date.toISOString().slice(0, 10), sessions: total ? [ { id: `${index}-build`, title: "Component development", minutes: first, startedAt: "09:00" }, { id: `${index}-design`, title: "Design system", minutes: second, startedAt: "11:15" }, { id: `${index}-research`, title: "Research & planning", minutes: total - first - second, startedAt: "14:00" }, ] : [], }; }); export default function Default() { return ( <div style={{ width: "100%", padding: "24px 0" }}> <FocusCity days={demoDays} endDate="2026-10-08" /> <p style={{ margin: "12px 0 0", textAlign: "center", fontFamily: "system-ui, sans-serif", fontSize: 11, color: "light-dark(#777, #999)" }}>Sample activity · July–October 2026</p> </div> ); } Dependencies lucide-react License MIT License Published 10/8/2026 Similar components Heat Calendar 47 Heatmap Calendar 71 Monthly Heatmap Calendar 50 Heat Calendar 5 Activity Heatmap 274 Returns Calendar 97 Calendar Heatmap 37 Glass Calendar 1.7k Fullscreen Calendar 1.3k Mini Calendar Activity Heatmap Calendar 40 Calendar 156 Calendar With Presets 69 Calendar with Event Indicators 34 ThreeD Wall Calendar 245 AT Circularium Ring 93 Calendar Planner 38 Calendar Primitive Calendar 7 Pill Calendar 25 Calendar [React Area] 109 Heatmaps 98 GitHub Activity Grid 30 GitHub Contribution Graph 3D Heatmap 1.7k