shadcn.io is not affiliated with official shadcn/ui
Restaurant POS Sidebar Block for Radix UI
A restaurant point of sale in a fixed-height window whose sidebar is a grid of eight tables with state glyphs and covers, a Set status menu in the top bar, and the chosen table's order and total on the page.
Installation
Overview
Run a dining room from the sidebar with this restaurant POS sidebar for React with Radix UI. A window framed by a hairline with a plus mark on each corner holds a Sidebar for Coverwick, a restaurant point of sale, whose body is a two-by-four grid of eight tables. Each cell shows the table number, a glyph and a word for its state, Free, Seated or Paying, and its covers, and a line under the grid says how many tables are in use. The top bar has a Set status Dropdown Menu with Seat, Paying and Clear, and the page shows the chosen table's order as a real table with a total worked out from its lines, or an empty state while the table is free. Built from Sidebar, Dropdown Menu, Badge, Empty and Guides, with a CSS entrance only. For point of sale, table management and any sidebar that is a board of states.
FAQ
How is a table's state shown?
By a glyph and a word together, never colour alone: an open circle and Free, two people and Seated, a receipt and Paying. The chosen table is drawn with a heavier outline and has aria-pressed. Each cell's accessible name reads, for example, Table 4, Seated, 3 covers.
What do Seat, Paying and Clear do?
Seat starts the table's tab, Paying marks it ready to pay, and Clear frees it. Choosing the state the table is already in, or Paying on a free table, changes nothing and the status line says why. The in-use count and the cell update at once, and focus returns to the Set status button.
Where does the total come from?
From the order's lines: each has a quantity and a price in pence, and the total is the sum of quantity times price, formatted as pounds. It reads Total so far while the table is seated and Total to pay once it is paying. Service is not included, and the page says so.
What happens when the sidebar folds to icons?
Folded, the grid is replaced by eight icons that show each table's state glyph, with tooltips such as Table 4, Seated, 3 covers. Choosing one opens the table on the page. The provider is set with persist={false} and shortcut={false}, so the block writes no cookie and leaves Ctrl and Command with B to the page it sits on.
What stays in the page, and how do I connect it?
Everything. The tables and their orders are typed at the top of the file and nothing is sent to a kitchen or charged. Replace the typed orders with your orders API and call it in the setKind handler. The rail links are SidebarMenuButtons with asChild around an a element.
How does it work on a phone?
Below the medium breakpoint the sidebar is a sheet that the menu button in the top bar opens from the start edge, the right in a right-to-left layout. Choosing a table closes the sheet. The Set status button stays in the top bar. The status line under the page says what happened, and the sheet carries its own copy of it while it is open.