shadcn theme preview
The Shibin Dotco brand, mapped onto shadcn primitives.
Palette 1 (earthy) for semantic colors, one derivative cream (#F1EFE9) for muted surfaces, hybrid radius (pill primaries, 10px base, 16px cards). This page renders every decision made so far, so you can react to them in situ before we ship the registry.
01 · Tokens
Color map
Surfaces & text
Primary & semantic
02 · Buttons
Buttons
Primary CTAs use the brand pill (border-radius: 999px). Utility + icon buttons use 6px for density in toolbars and table rows.
Utility & ghost
03 · Form
Inputs, selects, toggles
Focus ring uses the primary indigo. Inputs use the 10px base radius; feels conventional without losing the warm palette.
04 · Status
Badges & alerts
Earthy semantic palette applied to small status affordances. All four hues read cleanly at 11.5px against cream.
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
16px corners, 1px border, tabular numerics. Delta text uses semantic colors for fast parsing.
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
Head row uses the muted cream. Row hover lifts to #F1EFE9. Semantic badges 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. Every decision — pill CTAs, earthy semantics, muted hover, 1px borders, 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 the components we didn’t customize. They inherit the theme tokens directly and already look on-brand. Nothing here ships as a wrapper; your agent gets them for free from the shadcn registry.
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
16px corners. Single soft shadow at 6% to lift it from the page without breaking the brand’s "no heavy shadow" rule.
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.