vibecodng.com

Free MCP betaIndex and tools live

Measured entry

shadcn-block-sidebar-12

sidebarminimal-flat

A shadcn registry block for a calendar dashboard sidebar, with an inline date picker, collapsible calendar lists, a user menu, a sticky breadcrumb header, and placeholder content. It ships as editable React source rather than a standalone package and depends on shadcn UI primitives, Radix UI, Lucide icons, React Day Picker, date-fns, and the shared class-name utility.

Specimen
Harness screenshot of shadcn-block-sidebar-12 at 375 pixels wide
Harness screenshot at 375 pixels wide. No horizontal overflow recorded.
Harness screenshot of shadcn-block-sidebar-12 at 768 pixels wide
Harness screenshot at 768 pixels wide. No horizontal overflow recorded.
Harness screenshot of shadcn-block-sidebar-12 at 1440 pixels wide
Harness screenshot at 1440 pixels wide. No horizontal overflow recorded.

Measured

Every value below was written by the harness on the run that produced the frames above. None of it is derived from the prose.

Harness measurements recorded for shadcn-block-sidebar-12
BuildOK
MountOK
Console errors2
Uncaught page errors0
Horizontal overflowclean at 375, 768, 1440
Axe critical0
Axe serious1
Axe moderate2
Axe minor0
Gzip marginal92.0 KB (157.4 KB build, 65.4 KB baseline)
Bare modeFAIL
Provider requiredNO
Demo usednone

What the harness recorded

CONSOLE

Failed to load resource: the server responded with a status of 404 (Not Found)

CONSOLE

Failed to load resource: the server responded with a status of 404 (Not Found)

BARE BUILD

✗ Build failed in 22.59s
error during build:
[vite:load-fallback] Could not load <sandbox>/src/lib/utils (imported by src/components/ui/breadcrumb.tsx): ENOENT: no such file or directory, open '<sandbox>/src/lib/utils'

Verdict

A credible starting shell for calendar products already built on shadcn, but not production-ready unchanged. Fix the contrast and landmark structure, wire real data and actions, and replace the missing sample asset. It needs a shadcn-style setup to build and mount.

Use it if

  • You are building a calendar-focused dashboard and want account controls, date selection, and calendar filters in one sidebar.
  • Your app already uses shadcn conventions and you are comfortable replacing the sample user, calendar data, and placeholder content.
  • You need a responsive sidebar shell that mounts across phone, tablet, and desktop layouts without horizontal overflow.

Skip it if

  • You need a general navigation sidebar without the weight and interaction model of an embedded calendar.
  • You require an accessibility-clean starting point, since the tested output has a contrast issue and conflicting main landmarks.
  • You want a drop-in package for a plain React project with no shadcn aliases, theme tokens, or shared UI primitives.
  • Your release cannot tolerate unresolved asset requests until the sample avatar path is replaced or removed.

Install

Installation record for shadcn-block-sidebar-12
Declared dependenciesradix-ui, class-variance-authority, lucide-react, react-day-picker@latest, date-fns
Missing on installreact-day-picker@latest
Bare installfails once the shadcn-style helpers are removed, so it needs that setup
Providerno provider required in the harness

In a non-shadcn project, add the source alias and shared class-name utility, Tailwind theme tokens and global styles, the sidebar, breadcrumb, separator, collapsible, calendar, dropdown, and avatar primitives, plus Radix UI, class-variance-authority, Lucide React, React Day Picker, and date-fns. Also supply the sidebar provider and replace the sample avatar asset.

Source and credit

This page is a review, not a copy. The component source lives with its author and this site does not republish it. Read the license before you use anything.

Author repository

github.com/shadcn-ui/ui
License
MIT
Record published
2026-08-13

Alternatives

Other published entries for the sidebar pattern, ordered by what they measured: mounts first, then clean axe scans, then bare-mode passes, then the smaller bundle.