shadcn.io is not affiliated with official shadcn/ui
Carpenter Wood Explorer Profile Block for Vue
A carpenter profile as a wood explorer: a species choice over a drawn hardness scale, a drawn grain sample with its finish and price per board foot, and the pieces she built in that species with their hours added up.
Installation
Overview
Let a maker's materials tell her story, with this wood explorer profile for Vue with Ark UI. A compact header holds the title and one sentence, and the hairline frame under it opens on the carpenter: initials, name, role and place. A band under it holds a Toggle Group of four species, walnut, oak, maple and ash. Choosing one redraws the hardness scale: all four species are bars in pounds-force, each beside a small drawn sample of its grain, the chosen one in full weight and the others lighter, with a line worked out from the numbers, such as "Oak is 35% harder than walnut". Under it a larger drawn board sits beside a Data List of the grain, the finish and the price per board foot, and a ruled list shows the pieces she has built in that species with their hours and year, the hours added up in the heading. The list always has three ruled lines, so the panel never changes height when a species has fewer pieces. Species are told apart by their drawn grain and their names, never by a colour. The foot says what is showing and has one outline "Get a quote" button that stays in the page. It's built from Toggle Group, Data List, Badge, Button, Avatar and Guides, with inline SVG for the grain and a CSS entrance only. The carpenter, her pieces and the prices are invented. For a makers' directory, a workshop site or any profile built around its materials.
FAQ
How do I fill it with my species and pieces?
Edit SPECIES (name, grain, finish, hardness in pounds-force and the price per board foot in cents) and PIECES (title, kind, year, hours and the species id it belongs to). The bars are a share of SCALE_END, the line under them, the hours in the list heading and the count are all worked out from the data, so nothing is typed twice. Keep at most three pieces per species, or add a line to LINES.
Where do the hardness numbers come from?
They are typed in the example as Janka-style figures: the force in pounds-force that presses a steel ball half its width into the wood. Use your supplier's published figures for your own species. The percentage in the line under the scale is worked out from them against the softest species, so it changes with the data.
Can I use real photographs of the boards?
Yes. The grain samples are drawn from a few strokes of the theme's greys so the block ships with no image files and follows the theme in light and dark. In your own app swap the Grain component for an image of each board at the same shape, and keep the names and the facts list beside it.
What does Get a quote do?
In the demo it only says in the status line that a quote was noted for the species on show and that nothing was sent. Wire it to a request form or a link to your own contact page, passing the species, and keep the status line for the result.
Is it accessible?
The species buttons are one group named Species, with a pressed state, and keep their order in a right-to-left layout. The hardness scale is a real list: each row says the species, whether it is chosen and the number, so the bars add nothing a screen reader would miss and are hidden from it. The drawn grain is a picture and is hidden too. The status line is a polite live region present from the start.
Related
- Architect Performance Targets ProfileCredentials and proof
- Mechanic Certification Runway ProfileCredentials and proof
- Electrician Services Estimate ProfileQuotes and services
- Portfolio Showcase ProfileVisual portfolios
- Graphic Designer Annotated Poster ProfileVisual portfolios
- Plumber Reviews by Service Area ProfileCredentials and proof