Acopone Design

Button

components/ui/button.tsx

Pill-shaped. default for the main action, soft for an action on one item, outline for secondary, destructive for delete.

default

outline

secondary

soft

ghost

destructive

link

With icons

Full width (foot of a card or dock)

Long label

Fields

components/ui/input.tsx · kit/fields.tsx

16px or larger on touch screens so iOS never zooms. Labels above, hints below.

Empty

Filled

Shown on the menu and receipts.

Error

Enter a price above 0.

Disabled

Numbers

Nepali

Sizes

Select

Search (button, opens on tap)

Search (prominent)

Choices

kit/segmented.tsx · kit/mobile-dock.tsx · ui/switch.tsx

Segmented

Toggle group

Dock tabs

Switch

Service charge on Disabled

List buttons

Badges

ui/badge.tsx · kit/status.tsx

Status colours come from the brand engine, so they stay distinct from whatever the brand is. Prefer the icon version; use the compact one only where a word alone is unmistakable.

General

NewDraftv0.4.0

Status (icon + word)

PaidPendingFailedNewArchived

Status (compact, no icon)

PaidPendingFailedNewFeatured

Feedback

kit/status.tsx · kit/notice-banner.tsx · ui/sonner.tsx

Alerts sit in the page; toasts confirm something just happened; the notice banner is for a service being down.

Saved

Your changes are live.

Trial ends in 3 days

Keep your data by picking a plan.

Couldn't send the invoice

The email address bounced.

Tip

Press / to search from anywhere.

Notice banner

The database isn't ready yet.

Try again in a minute.

Toasts

Phones hide toasts; apps show them in the bottom bar instead.

Dialogs & sheets

ui/dialog.tsx · ui/drawer.tsx

Dialogs to confirm; bottom sheets (swipe down to close) for short forms on any screen.

Sections & panels

kit/section.tsx · kit/panel.tsx

A section is a heading on the page, then one card. A panel is frosted columns split by hairlines.

Rooms

3 rooms · 24 seats

Ground floor8 seats

First floor12 seats

Rooftop16 seats

Cells layout

Rows flow into 2–3 columns on wide screens.

Momo

Thukpa

Sel roti

Chowmein

Lassi

Tea

Grid layout

IncomeRs 3250

ExpenseRs 6500

HoldRs 9750

AvailableRs 13000

Stat strip

IncomeRs 45,200

ExpenseRs 31,980

PendingRs 5,000

AvailableRs 8,220

Panel

Tables

Order · T-01

Columns stack on phones and sit side by side from lg up.

Table

components/ui/table.tsx

Date	Category	Amount
2081-07-05	Groceries	-1,240
2081-07-04	Salary	+45,000
2081-07-02	A very long category name that needs to truncate	-320

Empty state

kit/empty-state.tsx

What this place is for, and the way to fill it. Optional setup checklist.

No entries this month

Add what you spent or earned. It shows here with English and Nepali dates.

Create a roomGround floor, rooftop…
2Add tablesName and seats for each
3Add your menuDishes, prices, photos