Cairnly
A personal system for habits, study and money
A complete personal app for habits, study, training and money, with a dark and a light theme, and it comes with sample data for a made-up woodworker a hundred days from a trade exam. Good for: a habit tracker, a study or exam planner, a personal dashboard, a coaching or self-improvement product, or any project that needs a polished place to plan and track a day. How it works: on Today every habit is a stone waiting as an outline, and ticking it (or pressing 1 to 8) drops the stone onto a stack, with a flag marking the height where the day counts as full and Undo on the message that pops up; the streak of full days grows when a day is full; and sixteen weeks of days show at a glance, each one opening to be fixed. Includes: Today with the stack, the streak, the next block on a tape of the day and the week's figures; habits as a week board you tick and fill in afterwards, streaks and a habit library; training with a programme, sessions and personal bests; study with subjects, a focus timer that logs itself and mock exams against the pass mark; money with a budget ring, spending and goals; a board of paid jobs you drag from enquiry to paid; a week calendar you drag blocks across; a journal; insights with a chart that switches between measures and date ranges; settings; and help. How to use: run it as it is to explore with the sample data, which is saved in your browser with a reset in Settings, then connect your own data, since there is no backend; the icon bar opens a menu per section and pins open into a full sidebar, Cmd+K searches everything, and it works on every screen from phone to desktop with a bottom tab bar on phones. Built with React, TypeScript and GSAP.
$91.00 — one-time price, free updates
- A React app template
- React and Vite · npm install and it runs
- Build unlimited client sites with it
Built with React, CSS, GSAP.
What is in the zip
- app.css
- css/body.css
- css/calendar.css
- css/commissions.css
- css/habits.css
- css/help.css
- css/insights.css
- css/journal.css
- css/money.css
- css/settings.css
- css/study.css
- css/today.css
- index.html
- src/App.tsx
- src/actions.tsx
- src/env.d.ts
- src/finder.tsx
- src/main.tsx
- src/motion.ts
- src/pages/body.tsx
- src/pages/calendar.tsx
- src/pages/commissions.tsx
- src/pages/habits.tsx
- src/pages/help.tsx
- src/pages/insights.tsx
- src/pages/journal.tsx
- src/pages/money.tsx
- src/pages/settings.tsx
- src/pages/study.tsx
- src/pages/today.tsx
- src/pages/types.ts
- src/router.ts
- src/store.ts
- src/ui/cairn.tsx
- src/ui/charts.tsx
- src/ui/day.tsx
- src/ui/days.tsx
- src/ui/format.ts
- src/ui/icons.tsx
- src/ui/kit.tsx
Version history
- v1.0.0, 2026-11-05 — First release. Cairnly shipped, with the reel recorded from the real page.