shadcn.io is not affiliated with official shadcn/ui
Technical Writer Documentation Types Profile Block for Solid
A technical writer profile as four kinds of documentation page: tabs for reference, tutorial, how-to and concept, each a drawn mini page with its outline in a side cell, figures for words and reading time, and a press-to-mark part of the page.
Installation
Overview
Show a writer's range by the shape of the pages, with this technical writer profile for Solid with Ark UI. A compact header holds the title and one sentence, and the hairline frame under it opens on the writer: initials, name, role and place. Tabs choose a kind of page: reference, tutorial, how-to or concept. Each kind is a drawn mini page in a frame, made of bars for headings and text, a table, a code block, a callout and numbered steps, never real text. Under the page a row of three figures gives its words, the minutes it takes to read and the date it was last reviewed. Beside it, in a side cell, the page's outline is the catalog's Toc, a list of links, one per part. Pressing an entry marks that part of the page with a heavy outline and a label, and a polite line says how many of the page's words it holds and what share that is; pressing it again clears the mark. The words are typed for each part, and every total, reading time and share is worked out from them. It's built from Tabs, Toc, Badge, Avatar and Guides, with a CSS entrance only. The writer and her pages are invented. For a documentation portfolio, a writers' directory or any profile that shows the kinds of work.
FAQ
How do I add my own pages?
Edit DOCS. Each kind has a title, the words in its opening, a last-reviewed date in ISO form and its parts: an id, an outline label, the kind of drawing (lines, table, code, callout or steps) and the words it holds. The totals, the reading time (at 200 words a minute) and the share a marked part holds are worked out from those, so nothing is typed twice. To show real pages, replace the drawn Page with an image of the page and keep the outline and the figures.
What does the outline do?
It is the catalog's Toc: a named list of links, one per part, in the page's order. Pressing a link marks its part of the drawn page and the status line under the panel says what the part holds. In a real page the same links scroll to the headings, and the Toc follows the reader as they scroll; here the page is a picture that always shows every part, so the links only mark.
What stays local in the demo?
All of it. The pages are drawings, the words are typed examples and the mark is a choice held in the page. Wire the outline to your own headings by giving each heading an id and linking to it, and read the word counts from your content.
Is it accessible?
The tabs are named by the kind of page and keep the usual arrow-key behaviour. The drawn page is a picture and is hidden from assistive technology; everything it stands for is in the outline, the figures and the polite status line, which says the result of every press. The marked entry carries a current state and a heavier weight, and the part itself gets an outline and a label, so the mark is never only a tone.