HomeDocsComponentsBlocksChartsThemes
Introduction
  • Introduction
  • Installation
  • Themes
  • llms.txt
Components
  • Accordion
  • Alert
  • Alert Dialog
  • Amount
  • Aspect Ratio
  • Audio Player
  • Avatar
  • Avatar Upload
  • Badge
  • Banner
  • Breadcrumb
  • Button
  • Button Group
  • Calendar
  • Card
  • Carousel
  • Chart
  • Checkbox
  • Code Block
  • Collapsible
  • Color Picker
  • Combobox
  • Command
  • Context Menu
  • Copy Button
  • Countdown
  • Data Grid
  • Data Table
  • Date Picker
  • Date Range Picker
  • Description List
  • Device Mockup
  • Dialog
  • Direction
  • Dot Loader
  • Drawer
  • Dropdown Menu
  • Empty
  • Field
  • File Upload
  • Hover Card
  • Input
  • Input Group
  • Input OTP
  • Item
  • Kanban
  • Kbd
  • Label
  • Menubar
  • Meter
  • Multi Select
  • Native Select
  • Navigation Menu
  • Number Field
  • Pagination
  • Password Strength
  • Phone Input
  • Popover
  • Progress
  • Progress Circle
  • Radio Group
  • Rating
  • Resizable
  • Responsive Dialog
  • Rich Text Editor
  • Scroll Area
  • Segmented Control
  • Select
  • Separator
  • Sheet
  • Sidebar
  • Skeleton
  • Slider
  • Sortable
  • Spinner
  • Stat
  • Stepper
  • Switch
  • Table
  • Tabs
  • Tag Input
  • Terminal
  • Textarea
  • Time Field
  • Timeline
  • Toast
  • Toggle
  • Toggle Group
  • Tooltip
  • Tree
  • Typography
  • Video Player
  • Window Mockup
AI
  • Message Scroller
  • Message
  • Bubble
  • Marker
  • Attachment
  • Questionnaire
  • Composer
  • Reasoning
  • Tool Call
  • Approval Card
  • Citations
Blocks
  • Airtable
  • Airtable Kanban
  • ClickUp List
  • ClickUp Kanban
  • Repeatable Group
  • Command Palette
  • Sign In and Sign Up
  • Availability Scheduler
  • AI Chat
  • Action Bar
  • Notion
  • Banking
  • Lineup Builder
  • Sports Score
  • Strava
  • Sheets
  • Notices
  • Settings
  • Billing
Utilities
  • motion
  • sounds
  • scroll-fade
  • shimmer
Another UI. Built on shadcn/ui with Phosphor icons.

Sheets

PreviousNext

A Google Sheets style spreadsheet with formulas, formatting, undo and sheet tabs, built on the Data Grid primitive.

AM
ABCDEFGHIJKLMNOPQRSTUVWXYZ
1InvoiceClientIssuedHoursRateSubtotalGST 5%TotalStatusPaid
2INV-1041Vedder River OutfittersJul 3, 202612$95.00$1,140.00$57.00$1,197.00Paid$1,197.00
3INV-1042Mount Cheam CoffeeJul 9, 20266.5$85.00$552.50$27.63$580.13Paid$580.13
4INV-1043Hope Valley DentalJul 15, 202618$110.00$1,980.00$99.00$2,079.00Paid$2,079.00
5INV-1044Sumas Prairie FarmsJul 22, 20269$95.00$855.00$42.75$897.75Overdue$0.00
6INV-1045Cultus Lake MarinaAug 1, 202622$120.00$2,640.00$132.00$2,772.00Paid$2,772.00
7INV-1046Promontory PhysioAug 12, 20264$85.00$340.00$17.00$357.00Paid$357.00
8INV-1047Yarrow BakeryAug 19, 20267.5$90.00$675.00$33.75$708.75Sent$0.00
9INV-1048Agassiz Bike ShopAug 28, 202614$95.00$1,330.00$66.50$1,396.50Paid$1,396.50
10INV-1049Harrison Kayak ToursSep 5, 202616$110.00$1,760.00$88.00$1,848.00Sent$0.00
11INV-1050Rosedale Vet ClinicSep 18, 202611$125.00$1,375.00$68.75$1,443.75Draft$0.00
12
13Total120$12,647.50$632.38$13,279.88$8,381.63
14Average invoice$1,327.99
15Largest invoice$2,772.00
16Outstanding$4,898.25
17Collected63.1%
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100

Installation#

pnpm dlx shadcn@latest add https://anotherui.dev/r/sheets.json

Features#

  • Grid. The Data Grid primitive: lettered columns, numbered rows, an active cell, range selection by click, shift or drag, keyboard navigation, in-cell editing, copy and paste with other spreadsheets, column resize and a frozen header row.
  • Formulas. Numbers, + - * / ^ and parentheses, cell references like A1, ranges like A1:B5, and SUM, AVERAGE, MIN, MAX, COUNT, COUNTA, ROUND, ABS and IF. Totals recalculate on every edit. Broken references show #REF!, typos show #ERROR!, and dividing by zero shows #DIV/0!. Typing "=SU" offers SUM over the numbers above, with its value.
  • Menus. File, Edit, View, Insert, Format, Data, Tools, Extensions and Help in a Menubar. Undo and redo, cut, copy and paste, insert and delete rows and columns, sort a range, freeze rows and columns, show formulas, hide gridlines and download as CSV. Inserting and deleting rewrites the formulas that point past them.
  • Toolbar. One row that scrolls sideways on a phone: undo, redo, print, paint format, zoom, currency, percent, decimals, number formats, font, font size, bold, italic, strikethrough, text and fill color, borders, merge, alignment, wrap and functions.
  • Formula bar. The name box shows the selection and jumps to a typed cell. The fx field edits the active cell and follows the in-cell editor.
  • Sheet tabs. Add, switch, rename, duplicate, reorder and delete sheets. The selection summary shows the sum, average, min, max or count of the selected cells in the active cell's format, and pops when it changes.
  • Motion and sound. The star swaps icons, the summary uses the transitions.dev number pop, and Cuelume plays on edits, menus, toggles and errors.

Usage#

import { Sheets, SAMPLE_SHEETS } from "@/components/blocks/sheets"
<Sheets initialSheets={SAMPLE_SHEETS} initialTitle="Q3 invoices" />

Cell values are strings, and a value that starts with "=" is a formula. Typing "$1,200" or "15%" stores the number and sets the currency or percent format.

StravaNotices

On This Page

InstallationFeaturesUsage