create-veta-app
v0.1.2
Published
Scaffold a production-ready Next.js app with the Veta design system pre-wired.
Maintainers
Readme
create-veta-app
Scaffold a production-ready Next.js 15 app pre-wired with the entire Veta design system in seconds.
pnpm create veta-app my-app
# or
npx create-veta-app my-app
# or
yarn create veta-app my-app
# or
bun create veta-app my-appWhat you get
A complete, deployable project with:
| File / Config | Description |
| -------------------- | ------------------------------------------------------------------ |
| app/globals.css | Tailwind v4 + @vetaui/foundations tokens (colors, spacing, motion) |
| app/layout.tsx | Root layout with selected brand preset wired |
| app/page.tsx | Working home page rendering <Button> and <Card> |
| next.config.ts | transpilePackages configured for all selected Veta packages |
| tsconfig.json | Strict TypeScript, moduleResolution: bundler, path alias @/* |
| postcss.config.mjs | @tailwindcss/postcss plugin |
| .gitignore | Sensible defaults |
| docs/FIREBASE.md | Generated when --firebase-setup is used |
Interactive prompts
? Project name › my-veta-app
? Pick a brand preset › Veta default | Linear | Vercel | Stripe | Notion | Apple | Brutal
? Add Veta packages › @vetaui/charts-kit @vetaui/auth-kit @vetaui/payments-kit @vetaui/blog-kit
? Package manager › pnpm | npm | yarn | bun
? Install dependencies? › yes
? Initialize git repo? › yesFlags
create-veta-app my-app --yes # skip all prompts, use defaults
create-veta-app my-app --pm bun # force bun as package manager
create-veta-app my-app --firebase-setup --kits auth,payments,analytics,feedback,notifications,search,storagePackages installed
| Package | Always | Optional |
| ------------------------- | ------ | -------- |
| @vetaui/foundations | ✅ | — |
| @vetaui/atoms | ✅ | — |
| @vetaui/molecules | ✅ | — |
| @vetaui/organisms | ✅ | — |
| @vetaui/charts-kit | — | ✅ |
| @vetaui/auth-kit | — | ✅ |
| @vetaui/payments-kit | — | ✅ |
| @vetaui/blog-kit | — | ✅ |
| @vetaui/analytics-kit | — | ✅ |
| @vetaui/feedback-kit | — | ✅ |
| @vetaui/notifications-kit | — | ✅ |
| @vetaui/search-kit | — | ✅ |
| @vetaui/storage-kit | — | ✅ |
Firebase quick setup
Pass --firebase-setup when you want a Firebase-ready app shell:
create-veta-app acme-web \
--yes \
--kits auth,payments,analytics,feedback,notifications,search,storage \
--firebase-setup \
--with-testsThis generates:
lib/firebase/client.tslib/firebase/collections.ts.env.examplefirestore.rulesfirestore.indexes.jsonstorage.rulesfirebase.jsondocs/FIREBASE.md
The web packages remain provider-agnostic. Today @vetaui/auth-kit has
firebaseAuthStrategy, @vetaui/payments-kit has firestoreChargesStore, and
the generated Firebase setup gives clients the standard collection/rules/index
contract for analytics, feedback, notifications, search, and storage.
Brand presets
Presets are applied at build time via @vetaui/foundations/presets. Each preset overrides the CSS design tokens to match the visual language of popular products:
| Preset | Inspired by |
| --------- | ---------------- |
| default | Veta's own brand |
| linear | Linear.app |
| vercel | Vercel |
| stripe | Stripe |
| notion | Notion |
| apple | Apple HIG |
| brutal | Neo-brutalism |
After scaffolding
cd my-app
pnpm dev # → http://localhost:3000Dark mode: add data-theme="dark" to <html>. Switch presets: change data-preset on <html>.
Development (monorepo)
From the repo root:
pnpm --filter create-veta-app build # compile CLI (tsup)
node packages/create-veta-app/dist/cli.js my-test-app --yesLicense
MIT — Dambert Munoz
