shadcn theme preview
The Shibin Dotco brand, mapped onto shadcn primitives.
A white canvas, graphite controls, neutral muted surfaces, 6px controls, and 8px cards. Semantic colors appear only when their meaning matters. This is a static custom-CSS preview built from the same token values; the registry installs variables only, not these components, compositions, or webfont imports.
01 · Tokens
Color map
Surfaces & text
Primary & semantic
02 · Buttons
Buttons
Buttons use restrained 6px corners. Navigation actions should usually be quiet text links; filled controls are reserved for actions that need to look unmistakably actionable.
Utility & ghost
03 · Form
Inputs, selects, toggles
Focus rings use a neutral gray. Inputs use the 6px control radius and sit directly on the white canvas.
04 · Status
Badges & alerts
Semantic colors are confined to small status affordances where color carries real meaning.
New tool: Product description generator v2
Bulk-rewrite descriptions for up to 500 products at once. Supports tone presets and brand voice.
SEO audit complete for goodstore.co
12 fixable issues found. Top priorities: meta descriptions, alt text on product images, checkout speed.
Monthly AI credits at 82%
3,200 of 4,000 credits used this cycle. Consider upgrading, or save the heavy tools for the next reset.
Sync failed for fieldnotes.studio
Shopify credentials expired. Reconnect the store to resume product and order sync.
Alternatives — pick one and we'll kill the rest
Same four messages, four treatments. Option 1 is what you just saw (the shadcn-default shape). Options 2, 3, 4 are progressively more minimal.
Option 2 — Stripped (1px border, no tint, colored dot) locked
New tool: Product description generator v2
Bulk-rewrite descriptions for up to 500 products at once. Supports tone presets and brand voice.
SEO audit complete for goodstore.co
12 fixable issues found. Top priorities: meta descriptions, alt text, checkout speed.
Monthly AI credits at 82%
3,200 of 4,000 credits used this cycle. Consider upgrading, or save heavy tools for next reset.
Sync failed for fieldnotes.studio
Shopify credentials expired. Reconnect the store to resume product and order sync.
Option 3 — Editorial log (monospace tag, no card, thin dividers)
New dashboard ready
Your April report finished generating. Charts use tabular figures for alignment.
Connected to Shopify
Store data will sync every 15 minutes.
Approaching API limit
You’ve used 82% of the monthly quota. Consider upgrading or throttling non-critical calls.
Sync failed
Shopify credentials expired. Reconnect to resume pulling orders.
Option 4 — Inline sentence (no card, just a colored label word)
New dashboard ready.Your April report finished generating. Charts use tabular figures for alignment.
Connected to Shopify.Store data will sync every 15 minutes.
Approaching API limit.You’ve used 82% of the monthly quota. Consider upgrading or throttling non-critical calls.
Sync failed.Shopify credentials expired. Reconnect to resume pulling orders.
05 · Cards
Metric cards
8px corners, 1px borders, and tabular numerics. Delta text uses semantic colors only when the direction matters.
Tools run this month
1,248
+14% vs last month
Products optimized
840
+62 this week
Stores connected
12
+3 new agencies
06 · Table
Data table
The head row and hover state use neutral #F4F4F5. Semantic badges stay inline with row data.
Tools catalog
AI tools available to Shopify merchants and agencies
| Tool | Category | Status | Runs | Last used |
|---|---|---|---|---|
| Product description generator | Copywriting | Live | 1,248 | 2h ago |
| SEO audit | Analytics | Live | 340 | 5h ago |
| Ad copy variants | Marketing | Beta | 84 | yesterday |
| App recommendation engine | Discovery | Action needed | 22 | 3d ago |
| Review scanner | Analytics | Paused | 0 | — |
07 · In use
Dashboard fragment
The real test: restrained controls, meaning-only semantics, neutral hover, 1px borders, and tabular numbers applied at once.
Shopify AI Hub · workspace
Tools, stores, and usage for this month
Tools run
1,694
+14.2% vs last month
Products optimized
840
+62 this week
Credits used
3,248
82% of monthly quota
Connected stores
12
+3 new
| Store | Last action | Status | Runs (30d) | |
|---|---|---|---|---|
| goodstore.co | SEO audit | Healthy | 248 | |
| fieldnotes.studio | Product descriptions (12) | In review | 84 | |
| legacy-sync.app | App recommendations | Needs reconnect | 22 |
08 · Standard shadcn
The rest of shadcn, on brand
These are static references for standard upstream shadcn primitives. The Shibin registry item supplies token variables only; install each primitive separately and add any reference-specific composition or spacing in your application code. Nothing here ships as a wrapper.
Tabs
Dropdown menu
Tooltip
Avatar
Progress
Skeleton (loading)
Radio group
Accordion
How do AI credits work?
Can I connect multiple Shopify stores?
What happens if I run out of credits?
Breadcrumb
Pagination
Slider
Command palette (⌘K)
Tools
Stores
09 · Dialog
Dialog preview
8px corners. One soft shadow lifts the dialog without making the page feel layered or glossy.
Disconnect goodstore.co?
Shopify AI Hub will stop syncing products, orders, and analytics from this store. All historical data stays intact and can be re-synced later.