shadcn.io is not affiliated with official shadcn/ui
Practice Depth Grid About Block for React
An expertise section for a data consultancy, with six practice cells in shared hairlines, each listing bench time, projects and tools, plus five depth marks, and a first cell twice as tall.
Installation
Overview
A practice grid for React with Base UI, written for Keelmark, a fictional data consultancy. A centred header states the project total, which is the sum of the cells, then six domains in shared hairlines inside a framed grid. Each cell is a definition list of years and projects, the tools they reach for as badges, and a row of five depth marks with the depth in text. The first cell is twice as tall and carries the practice in a sentence. The last cell spans the row. Below a large screen the cells stack in one column. It's built from Badge and Guides, with a CSS entrance and your theme's tokens for every colour. For an about page that should show how deep a practice goes. The domains and the counts are example data.
FAQ
How do I change the practices?
Edit DOMAINS at the top of the file. Each has a name, years, projects, a level from 1 to 5, tools, and a span of lead, cell or foot. Only the lead has a summary. The header's project total is the sum of projects, and the practice count is the length of the array.
How does the first cell become twice as tall?
On a large screen the grid is four columns. The lead spans two columns and two rows, the next four cells fill the space beside it, and the foot spans the whole row. Below that breakpoint every span is off and the cells stack in one column, so a phone never opens a hole in the hairlines.
What do the five marks mean?
They repeat the level. Filled marks run up to that number and the rest stay faint. The same number is written beside them as "Depth N of 5", which is what a screen reader gets. The marks themselves are decorative.
How is a cell read by a screen reader?
Each practice is an h3. Years and projects are a definition list. The tools are a list labelled "Typical tools". The depth sentence follows. The lead's summary is a paragraph under its title.
Related
- Pro
Sortable Skills Matrix About
Team and officesA framed matrix of seven skills by five departments for a learning platform, each cell four dots, sortable by skill or department, with computed department averages in the footer row.
- Pro
Filterable Bill of Materials Tech Stack
Security and platformA bill of materials for a build tool: a filter field and a framed, scrolling table of 24 technologies grouped by layer, each with a monospace version and what it is used for, with an empty state.
- Pro
Discipline Tabs Craft About
Principles and processTabs for four disciplines of a design-to-code tool: each panel lists three principles with a before and after sample and the figure that changed.
- Pro
Spec Sheet Infrastructure About
Security and platformA layer spec sheet for a managed-hosting company: a list of four infrastructure layers as single-choice toggles, and a framed sheet of specs for the chosen layer.
- Pro
Repo Cards Open Source About
Press and recognitionThree repository cards for a developer toolkit, drawn like repo headers: owner and name, a description, a language letter, rolling star counts, forks, contributor initials and latest release, with a used-by line.
- Pro
Duration Table Methodology
Principles and processA methodology section for an engineering consultancy: a to-scale bar of five phases across six weeks, over a framed table with each phase's work, tools as badges and duration.