---
title: Widgets overview
description: A collection of widgets that are used in our websites for bento grids and other presentations.
---

import AlarmClock from "@/animata/widget/alarm-clock";
import BatteryLevel from "@/animata/widget/battery-level";
import Battery from "@/animata/widget/battery";
import CalendarEvent from "@/animata/widget/calendar-event";
import CalorieCounter from "@/animata/widget/calorie-counter";
import ClockWithPhoto from "@/animata/widget/clock-with-photo";
import Cycling from "@/animata/widget/cycling";
import DeliveryCard from "@/animata/widget/delivery-card";
import DirectionCard from "@/animata/widget/direction-card";
import ExpenseTracker from "@/animata/widget/expense-tracker";
import FlightWidget from "@/animata/widget/flight-widget";
import LiveScore from "@/animata/widget/live-score";
import MobileDetail from "@/animata/widget/mobile-detail";
import MusicWidget from "@/animata/widget/music-widget";
import NotesWidget from "@/animata/widget/notes";
import Profile from "@/animata/widget/profile";
import ReminderWidget from "@/animata/widget/reminder-widget";
import Reminder from "@/animata/widget/reminder";
import ScoreBoard from "@/animata/widget/score-board";
import SecurityAlert from "@/animata/widget/security-alert";
import ShoppingListWidget from "@/animata/widget/shopping-list";
import SleepTracker from "@/animata/widget/sleep-tracker";
import StorageStatus from "@/animata/widget/storage-status";
import StorageWidget from "@/animata/widget/storage-widget";
import StudyTimer from "@/animata/widget/study-timer";
import VpnWidget from "@/animata/widget/vpn-widget";
import WaterTracker from "@/animata/widget/water-tracker";
import WeatherCard from "@/animata/widget/weather-card";
import WeeklyProgress from "@/animata/widget/weekly-progress";

<Callout>
  We are still working on some of the widgets to make them interactive and more user-friendly. We
  will keep updating this page as we make progress.
</Callout>

## Square

<ComponentList>
  <ComponentListItem copyId="cycling">
    <Cycling />
    ```tsx file=<rootDir>/animata/widget/cycling.tsx copyId="cycling"

    ````

  </ComponentListItem>

  <ComponentListItem copyId="battery-level">
    <BatteryLevel />
    ```tsx file=<rootDir>/animata/widget/battery-level.tsx copyId="battery-level"

    ````

  </ComponentListItem>

  <ComponentListItem copyId="alarm-clock">
    <AlarmClock />
    ```tsx file=<rootDir>/animata/widget/alarm-clock.tsx copyId="alarm-clock"

    ````

  </ComponentListItem>

  <ComponentListItem copyId="calendar-event">
    <CalendarEvent />
    ```tsx file=<rootDir>/animata/widget/calendar-event.tsx copyId="calendar-event"

    ````

  </ComponentListItem>

  <ComponentListItem copyId="live-score">
    <LiveScore />
    ```tsx file=<rootDir>/animata/widget/live-score.tsx copyId="live-score"

    ````

  </ComponentListItem>

  <ComponentListItem copyId="direction-card">
    <DirectionCard />
    ```tsx file=<rootDir>/animata/widget/direction-card.tsx copyId="direction-card"

    ````

  </ComponentListItem>

  <ComponentListItem copyId="expense-tracker">
    <ExpenseTracker />
    ```tsx file=<rootDir>/animata/widget/expense-tracker.tsx copyId="expense-tracker"

    ````

  </ComponentListItem>

  <ComponentListItem copyId="flight-widget">
    <FlightWidget />
    ```tsx file=<rootDir>/animata/widget/flight-widget.tsx copyId="flight-widget"

    ````

  </ComponentListItem>

  <ComponentListItem copyId="mobile-detail">
    <MobileDetail />
    ```tsx file=<rootDir>/animata/widget/mobile-detail.tsx copyId="mobile-detail"

    ````

  </ComponentListItem>

  <ComponentListItem copyId="profile">
    <Profile />
    ```tsx file=<rootDir>/animata/widget/profile.tsx copyId="profile"

    ````

  </ComponentListItem>

  <ComponentListItem copyId="score-board">
    <ScoreBoard />
    ```tsx file=<rootDir>/animata/widget/score-board.tsx copyId="score-board"

    ````

  </ComponentListItem>

  <ComponentListItem copyId="storage-widget">
    <StorageWidget />
    ```tsx file=<rootDir>/animata/widget/storage-widget.tsx copyId="storage-widget"

    ````

  </ComponentListItem>

  <ComponentListItem copyId="water-tracker">
    <WaterTracker />
    ```tsx file=<rootDir>/animata/widget/water-tracker.tsx copyId="water-tracker"

    ````

  </ComponentListItem>

  <ComponentListItem copyId="battery">
    <Battery />
    ```tsx file=<rootDir>/animata/widget/battery.tsx copyId="battery"

    ````

  </ComponentListItem>

  <ComponentListItem copyId="weather-card">
    <WeatherCard />
    ```tsx file=<rootDir>/animata/widget/weather-card.tsx copyId="weather-card"

    ````

  </ComponentListItem>

  <ComponentListItem copyId="weekly-progress">
    <WeeklyProgress />
    ```tsx file=<rootDir>/animata/widget/weekly-progress.tsx copyId="weekly-progress"

    ````

  </ComponentListItem>

  <ComponentListItem copyId="clock-with-photo">
    <ClockWithPhoto />
    ```tsx file=<rootDir>/animata/widget/clock-with-photo.tsx copyId="clock-with-photo"

    ````

  </ComponentListItem>

  <ComponentListItem copyId="music-widget">
    <MusicWidget />
    ```tsx file=<rootDir>/animata/widget/music-widget.tsx copyId="music-widget"

    ````

  </ComponentListItem>

  <ComponentListItem copyId="sleep-tracker">
    <SleepTracker />
    ```tsx file=<rootDir>/animata/widget/sleep-tracker.tsx copyId="sleep-tracker"

    ````

  </ComponentListItem>

  <ComponentListItem copyId="reminder">
    <Reminder />
    ```tsx file=<rootDir>/animata/widget/reminder.tsx copyId="reminder"

    ````

  </ComponentListItem>

  <ComponentListItem copyId="vpn-widget">
    <VpnWidget />
    ```tsx file=<rootDir>/animata/widget/vpn-widget.tsx copyId="vpn-widget"

    ````

  </ComponentListItem>

  <ComponentListItem copyId="study-timer">
    <StudyTimer />
    ```tsx file=<rootDir>/animata/widget/study-timer.tsx copyId="study-timer"

    ````

  </ComponentListItem>

  <ComponentListItem copyId="security-alert">
    <SecurityAlert />
    ```tsx file=<rootDir>/animata/widget/security-alert.tsx copyId="security-alert"

    ````

  </ComponentListItem>

  <ComponentListItem copyId="delivery-card">
    <DeliveryCard />
    ```tsx file=<rootDir>/animata/widget/delivery-card.tsx copyId="delivery-card"

    ````

  </ComponentListItem>
</ComponentList>

## Tall

<ComponentList className="lg:grid-cols-2">

  <ComponentListItem copyId="storage-status">
    <StorageStatus />
    ```tsx file=<rootDir>/animata/widget/storage-status.tsx copyId="storage-status"

    ````

  </ComponentListItem>

  <ComponentListItem copyId="calorie-counter">
    <CalorieCounter />
    ```tsx file=<rootDir>/animata/widget/calorie-counter.tsx copyId="calorie-counter"

    ````

  </ComponentListItem>

  <ComponentListItem copyId="reminder-widget">
    <ReminderWidget />
    ```tsx file=<rootDir>/animata/widget/reminder-widget.tsx copyId="reminder-widget"

    ````

  </ComponentListItem>

  <ComponentListItem copyId="notes">
    <NotesWidget />
    ```tsx file=<rootDir>/animata/widget/notes.tsx copyId="notes"

    ````

  </ComponentListItem>

  <ComponentListItem copyId="shopping-list">
    <ShoppingListWidget />
    ```tsx file=<rootDir>/animata/widget/shopping-list.tsx copyId="shopping-list"

    ````

  </ComponentListItem>
</ComponentList>
