shadcn.io is not affiliated with official shadcn/ui
No Time Entries Empty State Block for React
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 React with Base 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.
Related
- Pro
No Sprints Empty State
Projects and tasksAn agile planner with no sprint yet: a slider for one to four weeks, a start day and a capacity, an end date worked out from them, a footbridge drawing with a span for each week, and one Start sprint button.
- Pro
No Availability Empty State
Calendar and timeA booking page with no open hours yet: a week drawn as seven day columns you tick, two selects for the opening and closing time, sums worked out from them, and one Open these hours button.
- Pro
No Projects Empty State
Projects and tasksA projects table with nothing in it yet: a dashed, editable first row where you type a name and press Enter, three drawn ghost rows fading into the card, and a message band with one Create project button.
- Pro
Spend by Project Billing
Plan and usageSpend management for a usage-billed product: this period's spend per project, a budget bar with a tick at the alert threshold, the trend against last period, inline budget editing and the account's hard cap.
- Pro
No Events Empty State
Calendar and timeA calendar window with no events yet: a rail of calendars, October 2026 as a month grid where you pick a day, a form that takes its title and start, and an agenda with a pushpin that fills in.
- Pro
No Tasks Empty State
Projects and tasksAn empty three-column task board: dashed slots in To do, Doing and Done, an Add task in each column that opens an inline field, a select on each card to move it, and a message band with a drawn field of slots and one button.