Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Profile blocks

Pro

Engineer Patents Claim Tree Profile Block for React

An engineer profile as a patent claim tree: a menu of three patents, each claim indented under the claim it depends on, the picked claim read in full with its dependency path, its dependents and the co-inventors, and a download of the claims as text.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

Read a patent the way its claims depend on one another, with this engineer patents profile for React with Base UI. A compact header holds the title and one sentence, and the hairline frame under it opens on the engineer: initials, name, role and city, and a badge that counts the patents and the claims of the one you chose ("8 claims, 2 independent"), worked out from the data. A Native Select picks one of three patents, and a button downloads its claims as a text file. The claims stand in a list as a tree: independent claims at the top level, each dependent claim indented under the one it depends on with a small elbow, and the list keeps room for the longest patent so nothing moves when you switch. Press a claim and the end cell reads it in full, with its dependency path ("Claim 7, under 6, under 5"), the claims that depend on it, the patent number, status and filing date, and the co-inventors as initials. It's built from Native Select, Button, Badge, Avatar and Guides with CSS only. The engineer, the patents and the numbers are invented, and nothing here is legal advice. For an IP-portfolio tool, a company inventors page or any profile with patents.

FAQ

How do I fill it with my own patents?

Edit PATENTS in the Ark file: each patent has a title, a number, a status, a filing date, its co-inventors and its claims. A claim is a number, its text and the claim it depends on (dep, with 0 for an independent claim). List the claims in tree order, with each claim after the one it depends on. The depth, the dependency path, the dependents and the counts in the header are worked out from dep.

How is the tree built, and is it a tree for assistive technology?

It is a plain list of buttons, indented by the depth worked out from dep, not a tree widget, so every claim is one Tab stop and nothing needs arrow-key rules to learn. Each button reads "Claim 6, depends on claim 5." before the claim text, and the picked claim is pressed. A catalog Tree View would suit a deeper tree with folding; claims rarely nest more than three levels.

What does Download claims do?

It writes the patent's title, number and every claim as plain text in your browser and downloads it as a .txt file; nothing is uploaded. The status line names the file. In a real app you would export from your own system and include the figures and the description, which the sample leaves out.

What happens to the page when I pick another patent?

The claim list is replaced and claim 1 is picked; the list keeps the height of the longest patent and the claim text keeps room for several lines, so the panel does not jump. The status line says which patent is showing and how many claims it has.

Is it accessible, and what about right-to-left?

The menu is a native select with a label, the claims are buttons with pressed states, and the elbows are decoration. Numbers, claim text and names are isolated so mixed text keeps its order in a right-to-left layout, and the indent and the elbows mirror to the start side. The picked claim is shown by a solid fill and by the pressed state, not by colour. The status line is a polite live region present from the start.

What stays local, and how do I wire it to real data?

Everything is typed sample data, the numbers are invented, and nothing is legal advice. Picking a claim or a patent only changes the page and the status line. To wire it up, load patents and claims from your portfolio system into PATENTS, keep the depth helpers, and link each patent number to its record.

All 100 profile blocks