shadcn.io is not affiliated with official shadcn/ui
Filterable Patents Portfolio About Block for React
A framed table of seven patent filings for a lab-notebook tool with a status filter whose buttons carry their counts, category badges and filing years, never a calendar year.
Installation
Overview
A patent portfolio for React with Base UI, written for Notebench, a fictional lab-notebook tool. A start header carries a status filter at its end: All, Granted and Pending as one choice that can't be switched off, each button showing its count. Under it a framed table lists seven filings: a reference in the PAT-0142 style, what the invention does in a phrase, its category as an outlined badge, its status with a filled dot for granted and an open one for pending, and the year of Notebench it was filed in ("Year 4", never a calendar year). Choosing a status filters the rows, and the frame keeps its full height with a count line at its foot, so nothing below it moves. The reference column stays put while the table scrolls sideways on a phone. It's built from a native table, Toggle Group, Badge and Guides, with your theme's tokens for every colour. For an about page or a legal page. The references and inventions are invented.
FAQ
How do I change the filings and the statuses?
Edit PATENTS at the top: each has an id (the reference), a title, a category, a status of granted or pending and the filed year of the product. The counts in the buttons are computed from the list. The references are invented and match no real patent.
How does the filter work, and how is it announced?
It is a single choice, so one status is always on. The table shows only the matching rows, and a quiet line at the foot of the frame reads the result politely, such as "Showing 4 of 7 filings, granted only". The frame keeps the height of the full list, so the page below never shifts.
Is the status only a colour?
No. Granted and Pending are written out beside a filled or an open dot, and the dot is decoration. There is no status colour: the page's tokens carry everything.
Why is the table plain HTML?
It needs a caption, a row header per filing and a pinned column, which a real table gives on every base. The code is the same on every base; only the Toggle Group differs.
Related
- Pro
Tabbed Plaque Shelf Awards About
Press and recognitionA recognition shelf for a grant platform in two tabs: six plaques with a drawn laurel, the prize, who gave it and the year won, or six certifications with a stamped ring and when each renews.
- Pro
Citable Publications About
Press and recognitionA bibliography for a research platform: eight publications as a numbered list in citation form, a type filter, and a Cite button on each row that copies the reference.
- Pro
Paper Viewer About
Press and recognitionA paper viewer for a lab data platform: a vertical list of five papers at the start and the chosen paper drawn as a framed page at the end, with its venue, title, authors, abstract and one key figure.
- 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
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
Status Grouped Compliance Badges About
Security and platformA compliance list for a vendor-risk tool grouped by status, In force and In progress, each row a generic programme with its scope, last audit and next step, with a ghost link to request the report.