# Caderneta A whole year in small squares, one per day, getting darker on the days with more activity. > Caderneta is an exclusive THM Componentes component that shows 12 months of activity as a calendar of small squares, one per day, in four shades of indigo. It has a tooltip with the full date, arrow key navigation, totals and the longest streak at the top, and suits delivery, support or traffic history in team dashboards. - Category: Data and visualization - Origin: THM exclusive, built by THM Tecnologia Inteligente; the prompt includes the full source code - Load weight: Light: CSS or light JavaScript, no noticeable cost - Technology: Vue 3, TypeScript - Interaction: Mouse, Keyboard - URL: https://vibecode.thmtecnologia.com/en/components/caderneta/ ## What it looks like It looks like the contribution grid on a developer profile: columns of weeks, rows of days, months along the top and Monday, Wednesday and Friday on the left. Days with no activity are a very light gray; the rest go from lavender blue to deep indigo depending on volume. When the map enters the screen, the squares appear one by one, growing from the center, in a wave that runs from the oldest week to the newest. On hover, the day grows slightly, gets an outline and shows the date and the count. On narrow screens the grid scrolls sideways and starts at the most recent days. ## You may be looking for this if you asked for something like - “that GitHub-style grid of squares to show activity” - “a calendar that colors the busiest days darker” - “show how many tickets the team handled each day of the year” - “a daily heatmap for the company dashboard” - “a whole-year grid with one square for each day” - “see how often people log in across the months” ## Also known as calendar heatmap, contribution graph, yearly activity calendar, daily activity grid, streak calendar ## When to use - A team dashboard that tracks deliveries, tickets or support calls per day - A user profile that shows consistency in usage, study or workouts - An annual report that needs to reveal seasonality and strong weeks - A SaaS metrics area with daily visits or events ## When to avoid - Data with only a few recorded days, which leaves the grid almost empty - Comparing exact values between days, since colors group values into bands - Dark or English-only sites, unless your AI adapts the default navy text and the built-in Portuguese labels ## How to ask your AI ```text Build a calendar-style activity heatmap with one square per day over the last 12 months for the support dashboard. Use my brand color ramp, a tooltip with the full date, arrow key navigation and a reveal animation that respects reduced motion. ``` With THM Componentes, you paste the full prompt from the catalog, which already includes this component's source code, and the AI reproduces this exact effect instead of improvising. ## Questions about Caderneta ### How do I connect my data to Caderneta? Pass the data prop as a list of objects with a YYYY-MM-DD date and a value, or as a map from date to number; values on the same day are added up. Without data, Caderneta shows seeded sample values. The unit and unitPlural props change the word used in the tooltip. ### Does Caderneta work with a keyboard and screen readers? Yes. Caderneta's grid takes focus and the arrow keys move through the days, with Home and End for the ends and Esc to close the tooltip. Screen readers get a summary with the total, longest streak and busiest day, a hidden table of monthly totals and announcements for the focused day. ### Does Caderneta respect reduced motion settings? Yes. With reduced motion turned on, Caderneta shows every day at once, with no wave reveal and no transitions. Otherwise the reveal only starts when a quarter of the map is on screen, and it does not replay on every scroll. ## Related components - [Sismógrafo](https://vibecode.thmtecnologia.com/en/components/sismografo/): A smooth area chart that keeps receiving new points and slides its time axis along. - [Alambique](https://vibecode.thmtecnologia.com/en/components/alambique/): A table that summarizes your records; drag fields between rows, columns and values to change the view. - [Pindorama](https://vibecode.thmtecnologia.com/en/components/pindorama/): Brazil's 27 federative units as hexagons placed like the real map, darker where the number is higher. - [Páreo](https://vibecode.thmtecnologia.com/en/components/pareo/): Horizontal bars that move forward period by period and swap places in the ranking as time goes by. - [Catraca](https://vibecode.thmtecnologia.com/en/components/catraca/): Big numbers that roll like the drums of a car odometer and settle with a slight bounce. --- THM Componentes: THM Componentes is a catalog of 268 UI components for Vue 3 and Nuxt, 115 of them exclusive, each with a live demo and a ready prompt for Claude Code, Cursor and other AI assistants. Pick the effect, copy the prompt and your AI applies it to your project. Lifetime access for R$ 497 (about US$ 99).