Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Pilot Flight Log Profile Block for Radix UI

A pilot profile as a logbook: eight flights in a sortable table with a totals row, an aircraft menu that narrows the book, certificates as badges and one stacked bar of the hours by category with a legend of hours and shares.

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.
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

Keep a pilot's hours where a recruiter can read them, with this flight log profile for React with Radix UI. A compact header holds the title and a Native Select that narrows the book to one aircraft type, and the hairline frame under it opens on the pilot: initials, name, role and place, with the certificates as outline Badges. The logbook is a native Table of eight flights with a date, a route, the aircraft, the hours, the conditions and the role. Every head is a button that sorts by its column, in the order it starts with, and sets aria-sort; pressing it again reverses it and a third press puts the entries back in logbook order. A totals row adds up the flights shown, and the book always has eight ruled lines, the unused ones blank, so filtering never changes the panel's height. Under the table one stacked bar splits the same hours into single-engine and multi-engine by day, night and instrument, with a legend of hours and whole-percent shares that add up to 100. It's built from Table, Native Select, Badge, Avatar and Guides, with a CSS entrance only. The pilot, aircraft and airfields are invented. For an airline recruiting page, a flight school or any logbook.

FAQ

How do I fill it with my own flights?

Edit FLIGHTS and AIRCRAFT. A flight has a date, the two airfields, the aircraft, the hours in tenths (14 is 1.4 hours, so every total is exact), the conditions (day, night or instrument) and the role (command or dual). An aircraft has a name and its number of engines. The totals, the four slices of the bar, the shares and the status line are all worked out from the flights shown, so nothing is typed twice. Keep FLIGHTS in the order of the logbook, newest first: it is what a third press on a head returns to.

How does sorting work?

Each head is a button. A column starts in the order that suits it (dates newest first, hours most first, names A to Z), a second press reverses it and a third puts the book back in logbook order. The sorted head carries aria-sort, the others say none, ties fall back to the newest date, and a polite line says what the order is, such as 8 of 8 flights, by hours, most first. On a phone the aircraft and conditions columns fold under the route, so their heads are not shown: sort them on a larger screen.

What does the stacked bar count?

Every flight lands in exactly one slice, so the slices add up to the total: instrument and night flights keep their own slice whatever the aircraft, and day flights split by the number of engines. The legend gives each slice's hours and its share of the total, rounded by the largest remainder so the shares add up to exactly 100. The bar changes with the aircraft menu, because it is drawn from the same flights as the table.

Is anything verified?

No. The pilot, the aircraft, the airfields and every number are invented, and nothing is checked against a real logbook or an authority. The menu and the sorting only change what the page shows. To make it real, load the flights from your own logbook store and say who signed each entry.

Is the table accessible?

It is a native table with a hidden caption, column heads, the date as each row's header and a totals row in the foot. The blank lines are marked as presentational, so a screen reader skips them. Conditions are written out with an icon, role is a word, and the hours keep their order in a right-to-left layout. The wrapper is a labelled region that can be scrolled with the keyboard.

How does it look on a phone?

The table drops the aircraft and conditions columns and writes them under the route, in a second line, so the four that remain fit without sideways scrolling. The stacked bar is the same on every width, and its legend goes two by two.