shadcn.io is not affiliated with official shadcn/ui
No Time Entries Empty State Block for Vue
A timesheet with nothing logged yet: a form for the day, project, hours, minutes and a note, a drawing of five isometric day bars that rise as time is logged, and a table that fills in with one Log time button.
Installation
Overview
Show the week as a week that is about to fill, with this no time entries empty state for Vue with Ark UI. A header sits over one framed panel for Stintly, a timesheet app. The panel's first cell is the form that logs time by hand: native selects for the day and the project, two number inputs for the hours and minutes and an Input for the note; there is no running timer. Its second cell draws the five working days as isometric bars standing on dashed footprints, over a row of each day's total. The Shine Button, the only colored control, adds a row to the table under the form, adds its minutes to the day, raises that day's bar (a full bar is eight hours) and brings the total up, every sum worked out from the entries. The table keeps room for three entries so the frame never changes height. The frame's bands are ruled by Guides, and the whole block uses CSS transitions only. For the first hours logged in any timesheet, tracker or billing tool.
FAQ
What happens when I press Log time, and what stays in the page?
The entry goes into the page's state: a row appears in the table with its day, project, note and time, the day's bar rises and the total and the day totals change. Nothing is saved or sent: reload and the week is empty again, and Start over empties it without a reload. To wire it for real, send the entry to your API where the code says so and add the row from the response.
Where do the totals and the bar heights come from?
They are worked out from the entries, never typed: a day's total is the sum of the minutes logged on it, the total is the sum of every entry, and a bar's height is the day's minutes against eight hours (a day over eight hours stays a full bar, and its total in the row under the drawing keeps counting).
What do the hours and minutes accept?
Whole numbers: hours from 0 to 12 and minutes from 0 to 59. Anything else is set to the nearest allowed number when you leave the field, and the status line says so. Logging 0 hours and 0 minutes is refused with "Enter some time first" and focus goes to the hours. The number fields commit on leaving the field, and on Enter, so what you typed is always what is logged.
Why is there no timer?
A running timer is a live clock, and this block keeps every date fixed: "today" is Friday 9 October 2026 and nothing ticks. A timesheet empty state is the first manual entry; a timer button belongs beside it in your app and would add the same row when stopped.
Is it usable with a keyboard and a screen reader?
Tab walks the day, the project, the hours, the minutes, the note, Log time and Start over (quiet until something has changed). The drawing is hidden from assistive technology; the same facts are in the row of day totals and the table, and the polite status line says what was logged ("Logged 1h 30m on Fri 9 Oct in this demo.").
How does it look on a phone?
The fields pair up (day and project, hours and minutes) so Log time stays on the first screen, and the drawing, the day totals and the table follow under the form. The table is two columns plus the time, with the note under the project, so it never scrolls sideways at 320 px.