121 Pro components and page blocks

Get Pro
uibrik

Updated

Daily Rings

Pro

Preview

Customize

Ring width16
Ring gap4
Palette
Max goals4
List height160px

Installation

Pro

Daily Rings is a Pro component

Sign in to see the source, or install it with a license key. The live preview and props above are free to explore.

Sign inGet Pro

Install with a key

  1. Add the Pro registry to components.json:
    components.json
    {
  "registries": {
    "@uibrik-pro": {
      "url": "https://uibrik.com/r/pro/{name}.json",
      "headers": { "Authorization": "Bearer ${UIBRIK_LICENSE}" }
    }
  }
}
  2. Put your key in .env.local and add that file to .gitignore:
    .env.local
    UIBRIK_LICENSE=your-license-key
  3. Install it:
    Terminal
    npx shadcn@latest add @uibrik-pro/daily-rings

Usage

import { DailyRings } from "@/components/uibrik/daily-rings/daily-rings";​const palette = ["#f2555a", "#8b7cf6", "#3aa8e8", "#22b07d", "#f59e0b", "#ec4899"];​const defaultHabits = [  { id: "move", label: "Move", goal: 8000, step: 1000, unit: "steps", color: "#f2555a", icon: "flame" },  { id: "focus", label: "Focus", goal: 120, step: 25, unit: "min", color: "#8b7cf6", icon: "bolt" },  // …1 more];​<DailyRings  ringWidth={16}  ringGap={4}  palette={palette}  maxHabits={4}  editable  weekStrip  showOverflow  centerLabel="of goals"  logLabel="Log"  listMaxHeight={160}  locale="en-US"  defaultHabits={defaultHabits}  onHabitsChange={(habits) => {}}  onDaysChange={(days) => {}}  onLog={(habit, log, date) => {}}  onOpenChange={(habitId) => {}}  // habits={[…]}  // days={[{ date: "…", logs: [{ id: "…", habit: "…", amount: 0, time: "…" }] }]}  // defaultDays={[…]}  // defaultDay={0}/>

Where to use Daily Rings

  • Habit and wellness apps

    Rings fill as entries are logged, so a day's progress reads at a glance and each tap visibly counts.

    Pairs with Streak Calendar

  • Fitness dashboards

    The week strip refills the rings for any day, which makes comparing days quicker than reading numbers.

  • Goal tracking

    Opening a goal keeps the others in view as small rings, so switching between them is one tap.

    Pairs with Progress

Props

DailyRings
ringWidth
Type number
16
Thickness of the rings in the overview.
ringGap
Type number
4
Space between rings in the overview.
palette
Type string[]
["#f2555a","#8b7cf6","#3aa8e8","#22b07d","#f59e0b","#ec4899"]
Colours offered when adding or editing a goal. The demo also paints its first rings with them.
maxHabits
Type number
4
Most goals, and so rings. Four fit comfortably.
editable
Type boolean
true
Let goals be added, edited and deleted.
weekStrip
Type boolean
true
Show the week above the rings to switch days.
showOverflow
Type boolean
true
Keep counting past a goal in the numbers. Rings always stop full.
centerLabel
Type string
"of goals"
Line under the percentage in the overview.
logLabel
Type string
"Log"
Word on the log button, before the step amount.
listMaxHeight
Type number
160
Tallest the entries list grows before it scrolls.
locale
Type string
"en-US"
Locale for numbers and weekday names.
defaultHabits
Type { id: string; label: string; goal: number; step: number; unit: string; color: string; icon?: HabitIconName | ReactNode }[]
SAMPLE_HABITS
Goals on mount, outermost ring first. `step` is what one tap of the log button adds; `icon` is a built-in name (flame, bolt, droplet, moon, sun, book, heart, leaf, barbell, bike, apple, salad, pill, bed, star) or your own node.
habits
Type Habit[]
–
Goals (controlled). Pair with `onHabitsChange`.
onHabitsChange
Type (habits: Habit[]) => void
–
Called after a goal is added, edited, deleted or restored with Undo.
days
Type { date: string; logs: { id: string; habit: string; amount: number; time: string }[] }[]
–
Days in the week strip (controlled). A ring's value is the sum of its logs for the day.
defaultDays
Type HabitDay[]
SAMPLE_WEEK
Days on mount (uncontrolled).
onDaysChange
Type (days: HabitDay[]) => void
–
Called with every day after an entry is added or removed.
onLog
Type (habit: Habit, log: HabitLog, date: string) => void
–
Called after an entry is logged, from the log button, the double-step chip or a custom amount.
onOpenChange
Type (habitId: string | null) => void
–
Called when a goal is opened, or with null when going back to all.
defaultDay
Type number
–
Index of the day selected on mount. Defaults to the last day with entries.
className
Type string
–
Classes for the card.