shadcn.io is not affiliated with official shadcn/ui
Split Spreadsheet Grid Hero Block for React
A split hero for a finance spreadsheet: copy and a Shine Button at the start, and a wide sheet at the end that runs off the panel's rail and foot, with a formula bar, a total row, a tinted range and a teammate's cursor.
Installation
Overview
A split-layout hero with a spreadsheet beside the copy, for React with Base UI, shown for Quarterdeck, a spreadsheet for finance teams. At the start sit an announcement pill, the headline, one sentence, a ShineButton link, an outline Button link and three ticks. At the end, past a solid divider, a window wider than its panel runs off the panel's end rail and its foot under a fading mask: a formula bar with the selected cell's address and its =SUM formula, lettered columns A to F, a labels row, a total row and sixteen accounts with four quarters and a year. The summed column is tinted, the total cell is outlined, and a teammate's cursor with her name sits on one cell. Every total is worked out from the data. On phones the panel shows the window's top corner under a ruled line. It's built from Announcement, Status, Shine Button, Button, Frame and Guides with Lucide icons and Tailwind CSS, and the window settles in with a CSS transition that stays still under reduced motion. For spreadsheet and data-grid products, budgeting and financial modelling tools, inventory trackers and any cell-based editor.
FAQ
How do I change the figures in the sheet?
Edit ROWS at the top of the file: each row has an account for column A and four quarters for columns B to E. Everything else follows from them: the Year column, the totals in row 2, the row numbers, and the formula and cell address in the formula bar (=SUM(C3:C18) and C2 with sixteen rows). Change HEADINGS to rename the columns, and SELECTED_COLUMN to select another quarter's total.
Does the formula really add up?
Yes. The selected cell is column C's total, and its value is the sum of the tinted range below it, computed from the data, so the formula bar, the cell and the sheet always agree. Numbers are formatted with toLocaleString("en-US"), so the server and the browser show the same digits and separators.
Why does the sheet stay left to right in a right-to-left page?
A spreadsheet's columns run A, B, C from the start and its numbers read left to right in any language, so the sheet is set to dir="ltr" and keeps its layout in a right-to-left page. The copy beside it follows the page's direction as usual.
How does the sheet run off the edge?
The window is 44rem wide and sits a little in from the panel's start edge, so its end overflows the panel and is clipped by it: the panel's inner box has overflow-hidden and the divider's Guides sit on an outer box, so the + marks aren't clipped. A mask fades the last third of the panel's height. Change w-[44rem] to show more or fewer columns.
How does a screen reader read this hero?
It reads the announcement link, the h1, the paragraph, the two links and the three ticks. The sheet is an illustration, so it's hidden from screen readers and out of the tab order, and it isn't built as a table or a grid widget. If you turn it into a real editable sheet, use a grid with role="grid", gridcell and row and column indexes, and let the arrow keys move between cells.
How does the hero fit on a phone?
The two columns stack below the lg breakpoint, with the sheet under the copy in a 20rem panel, then 26rem from sm. The window is the same width as on a desktop, so the panel shows its start corner: the formula bar and the first columns, cut off at the edge and the foot. The actions stay on the first screen.
Related
- Pro
Split Layout Database Schema Hero
Diagrams and mapsA split hero for a database tool: the headline, a Shine Button and three ticks beside a wide schema editor that runs flush to the page's end rail, with a model sidebar and a diagram whose foreign keys link to the rows they reference.
- Pro
Split Layout Form Builder Hero
Product windowsA reverse split hero for a form builder: a builder window with a palette and a canvas of fields in a hairline frame with + marks, then a divider, the headline, three checks and a Shine Button.
- Pro
Showcase CRM Pipeline Hero
Product windowsA showcase hero for a CRM: the headline at the start with a Shine Button at the end, and a four-stage deal pipeline below, in a band between the rails that fades out below the fold.
- Pro
Split Kanban Board Hero
Product windowsA reverse split hero for a sprint planner: a wide board window that runs flush to the start rail and fades at its foot, with a card mid-drag over a drop slot, then a divider and the copy with a Shine Button.
- Pro
Dashboard Preview Hero
Product windowsA showcase hero with a headline, a Shine Button, an outline button and a trust line above a wide browser window in a hairline frame, a greyscale sketch of an analytics dashboard that runs on below the fold.
- Pro
Split Stat Overlay Hero
Stats and live dataA split hero for a live revenue dashboard: the headline, a checklist and a Shine Button beside a dashboard sketch in a hairline frame, with three stat cards (revenue, users, churn) floating over its edges.