Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Music blocks

Pro

Practice Log Music Block for Ark UI

A practice journal with minutes this week against an editable goal, a streak worked out from the session dates, seven day columns, four skills by share, a form that logs a session for today with Undo last, and the session history.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

Show a musician how the week is going, with this practice log for React with Ark UI. It holds Etudebook, a practice journal, in a hairline frame with a plus mark on each corner, read on a fixed Thursday. A strip of three figures gives the minutes this week with a bar against a goal you can change in a Number Input, the weekly goal itself, and the streak, worked out from the dates of the sessions. Under it, seven day columns show the minutes of each day with today still empty, and four skills (scales, repertoire, sight-reading and theory) show their share of the week. A form with a Select for the skill, a Number Input for the minutes and a note logs a session for today with a Shine Button, and Undo last takes it back. The history lists the sessions newest first in a region of one height. Logging moves the columns, the bar, the streak and the skills together. It's built from Select, Number Input, Input, Shine Button, Button and Guides, with a CSS entrance only. For practice trackers, lesson apps and habit tools.

FAQ

How do I load my own sessions and goal?

Edit START: each session has a date, a skill, the minutes and a note, newest first, and AS_OF is the day the block treats as today. The week is the Monday-to-Sunday span around AS_OF; the totals, the day columns, the skill shares and the streak are all worked out from the sessions, so nothing is typed twice. SKILLS holds the skill names, and SCALE sets how many minutes fill a day column.

How is the streak worked out?

It counts the days in a row that have at least one session, ending today if today has one, and yesterday while today is still empty. In the sample, Monday to Wednesday have sessions and Thursday has none, so the streak is three days and the cell says that logging today makes it four. Day arithmetic uses whole days since 1970, so no time zone can shift a date.

What does Log session check, and what does Undo last do?

Minutes must be a whole number from 5 to 180; anything else is refused with the reason in the status line and nothing is added. A valid session goes to the top of the history under today's date. Undo last removes the newest session you logged here, one at a time, and never touches the sample sessions; with nothing to undo it says so.

What stays local, and how do I save it?

Everything: sessions, the goal and the streak live in the page and reset on a reload, and nothing is sent. To make it real, post the new session from the log handler, store it with its date, and return the week's sessions to the same shape; the goal needs a field on the user. Nothing here reads the clock, so replace AS_OF with the real date after mount.

How do I use it from the keyboard?

Tab runs from the goal field to the form, the Log button and Undo last, then to the session history, which is a named scroll region you can focus and scroll with the arrow keys. The status line announces each result.

How does it look on a phone?

The three figures stack, the seven columns stay in one row, the skills sit under them, and the form fields wrap onto two lines. The history keeps its height and scrolls, so logging never moves the page.

All 100 music blocks