Rewrite frontend with shadcn/ui

[jonastemplestein]

Summary

• Replace Tailwind CDN with build-time Tailwind v4 + shadcn/ui components
• Mobile responsive: sidebar auto-collapses to Sheet on narrow viewports
• Consistent dark theme via shadcn CSS variable tokens
• shadcn components: Sidebar, ScrollArea, Button, Input, Collapsible, Sheet, Tooltip, Skeleton, Separator

Test deployment

https://artifact-viewer-shadcn.iterate-dev-stg.workers.dev/

Screenshots

• Desktop: full 4-pane layout with shadcn Sidebar, file tree, editor, history
• Mobile: sidebar collapses to hamburger, slides in as Sheet

🤖 Generated with Claude Code

---

---

Note

Low Risk
Adds a shadcn/ui components.json config file only; no runtime code paths change, so risk is minimal and limited to tooling/config expectations.

Overview
Introduces components.json to configure shadcn/ui generation (style preset, Tailwind CSS entry at src/styles/app.css, and path aliases for ~/components, ~/components/ui, ~/lib, and ~/hooks).

No application code changes are included in this diff; this is a tooling/config addition for consistent component scaffolding.

^{Reviewed by Cursor Bugbot for commit cbc858c. Bugbot is set up for automated code reviews on this repo. Configure here.}

[cloudflare-workers-and-pages]

Deploying with    Cloudflare Workers

The latest updates on your project. Learn more about integrating Git with Workers.

Status	Name	Latest Commit	Updated (UTC)
❌ Deployment failed View logs	cf-artifact-viewer	cbc858c	Apr 21 2026, 10:57 PM

[devin-ai-integration]

Devin Review found 1 potential issue.

View 5 additional findings in Devin Review.

[devin-ai-integration]

🔴 asChild prop does nothing in Base UI's SidebarMenuButton — Link renders nested inside a button instead of replacing it

SidebarMenuButton is built on Base UI's useRender hook (src/components/ui/sidebar.tsx:513), which uses a render prop for element composition — not the asChild pattern from Radix UI. Passing asChild here means it falls through to ...props and gets spread as an unrecognized HTML attribute on the underlying <button> element. The <Link> child is rendered inside the button rather than replacing it, producing invalid HTML (<button> containing <a>) and potentially broken navigation/active-state styling.

Expected usage with Base UI's render prop

<SidebarMenuButton
  render={<Link to="/$artifact" params={{ artifact: r.name }} search={{}} activeProps={{ className: "bg-sidebar-accent" }} />}
  isActive={false}
>
  {hasEdits ? "* " : ""}{r.name}
</SidebarMenuButton>

Prompt for agents

In src/routes/__root.tsx at line 72-76, `SidebarMenuButton` is called with `asChild` which is a Radix UI concept. This component is built on Base UI which uses a `render` prop instead for element composition (see src/components/ui/sidebar.tsx:499-528 where `useRender` is used with a `render` prop). The `asChild` prop is ignored and falls through to the DOM as an invalid attribute, causing the `<Link>` to be rendered as a child inside a `<button>` rather than replacing it. This produces invalid HTML (button containing anchor) and may break navigation. Replace `asChild` with the `render` prop pattern: pass the `<Link>` element via `render` and move the text content to be children of `SidebarMenuButton`.

---

Was this helpful? React with 👍 or 👎 to provide feedback.