New data table toolbar and density

The design system your agent builds with

Accessible components with snappy motion, Solar icons and Thai-ready type. Paste one prompt and your agent builds Ecsight pages from code you own.

BadgeSecondaryOutline
Recent orders
Status badges stay readable without colour.
CustomerStatusAmount
Siam Retail Co.
ORD-24081
Delivered฿12,450
Bangkok Foods
ORD-24082
Shipping฿3,890
Chiang Mai Crafts
ORD-24083
Unpaid฿860
Phuket Supply
ORD-24084
Cancelled฿2,140
Notifications
Switches apply immediately.

Email me when an order fails to ship.

A Monday summary of revenue and orders.

Denser rows for long lists.

Revenue
฿1,489,000
+12.4% vs previous period
October 2569
Buddhist era by default, weeks start on Sunday.
Paste into your agent
One prompt sets up the registry, rules and foundation.
Set up Ecsight UI in this project.

1. Read https://ui.1ecsight.com/design.md and follow it for all UI work in this project.
2. If components.json doesn't exist, run `npx shadcn@latest init` first.
3. Add the registry to components.json:
   "registries": { "@ecsight": "https://ui.1ecsight.com/r/{name}.json" }
4. Install the foundation: `npx shadcn@latest add @ecsight/foundation`
5. In the root layout, set <html lang="th" suppressHydrationWarning> and wrap the app in <Providers> from "@/components/providers".
6. Add this rule to the project's agent rules file (CLAUDE.md, AGENTS.md or .cursor/rules):
   For all UI work, follow https://ui.1ecsight.com/design.md. Install components only from the @ecsight registry (`npx shadcn@latest add @ecsight/<name>`) — never hand-roll components, other icon sets, or native browser controls.
7. Run the app, confirm it builds, then tell me what you changed.
⌘K
  • Siam Retail Co.
  • Bangkok Foods
  • Chiang Mai Crafts
  • Phuket Supply
  • Khon Kaen Logistics
Orders3,421+8.1%
New customers482-3.2%
Importing orders
4 teammates are watching this import.
KSNPATWJ
orders-2569-10.csv72%
Spring tokens
Motion explains state changes. It is never decoration.

Snappy 500/32Press, toggle, pop-in

Gentle 300/30Large surfaces, layout

Bouncy 600/22Checkmarks, icon swaps