devl.dev

Components, blocks, screens, motion and illustrations I've built, shared for free. Built on coss ui (Base UI + Tailwind v4). Charts are bklit and the Filters category runs on Qnot.

Every item installs with the shadcn CLI (npx shadcn@latest add https://devl.dev/r/<slug>.json), or grab the raw source at https://devl.dev/raw/<slug>.tsx. Agents can read https://devl.dev/llms.txt.

Stack

• Next.js 16 (App Router, Cache Components), React 19, Tailwind v4, coss ui
• motion for animation, shiki for build-time highlighting
• Effect for the server code (src/server)
• Cloudflare Workers via OpenNext: D1 for sponsor bookings, R2 for the cache and sponsor images
• Stripe Checkout for sponsor slots (REST + Web Crypto webhook verification)

Layout

src/registry/items/<slug>/   one folder per item: meta.json, <slug>.tsx, demo.tsx
scripts/registry.mjs         builds the index, highlighted code, raw files, shadcn JSON and llms.txt
src/app/(site)               the catalogue, item pages, advertise flow, admin
src/app/(preview)            full-screen previews (also the item page iframe)
src/server                   Effect services: bookings, payments, inventory, stats
migrations/                  D1 schema

REGISTRY.md is the contract for adding an item and AUDIT.md is the bar it has to clear.

Develop

pnpm install
cp .dev.vars.example .env.local   # next dev reads this
pnpm dev                           # runs the registry generator, then next dev

Without Stripe keys the advertise flow uses a simulated checkout in dev. In production it's switched off until Stripe is configured.

Deploy (Cloudflare)

pnpm cf:migrate:remote   # apply D1 migrations
pnpm cf:deploy           # opennextjs-cloudflare build && deploy

Secrets (wrangler secret put <NAME>): ADMIN_TOKEN, STRIPE_SECRET_KEY, STRIPE_WEBHOOK_SECRET, optionally SITE_URL, and CF_ACCOUNT_ID + CF_ANALYTICS_TOKEN for /admin/stats.

Admin

/admin/* and /api/admin/* sit behind Cloudflare Access: the app "devl admin" signs in with an email one-time PIN and allows only the owner's address. The Worker checks the Cf-Access-Jwt-Assertion header Access adds (src/server/access.ts, using ACCESS_TEAM_DOMAIN and ACCESS_AUD in wrangler.jsonc), so a valid Access sign-in is all it takes. Without one, as in local dev, the pages fall back to the ADMIN_TOKEN sign-in. /sponsor-stats and the sponsor and Stripe APIs stay public. wrangler.jsonc keeps workers_dev and preview_urls off so no URL skips Access. To change who can sign in, edit the app's policy in Zero Trust → Access → Applications. If the team or app is recreated, update the two vars.

Analytics

Cookieless and Cloudflare-native: Web Analytics for page views, and Workers Analytics Engine (worker.ts, dataset devl_events) for installs, raw source fetches, llms.txt, the skill and MCP tool calls. Read them at /admin/stats. ANALYTICS.md covers what's tracked, setup and SQL.

License

devl's own code is MIT. Third-party code keeps its own license: coss ui in src/components/ui/ is AGPL-3.0, and the bklit chart code is MIT. See NOTICE.md.