vercel

Open Source

next-forge

# ▲ / next-forge **Production-grade Turborepo template for Next.js apps.** <div> <img src="https://img.shields.io/npm/dy/next-forge" alt="" /> <img src="https://img.shields.io/npm/v/next-forge" alt="" /> <img src="https://img.shields.io/github/license/vercel/next-forge" alt="" /> </div> ## Overview [next-forge](https://github.com/vercel/next-forge) is a production-grade [Turborepo](https://turborepo.com) template for [Next.js](https://nextjs.org/) apps. It's designed to be a comprehensive starting point for building SaaS applications, providing a solid, opinionated foundation with minimal configuration required. Built on a decade of experience building web applications, next-forge balances speed and quality to help you ship thoroughly-built products faster. ### Philosophy next-forge is built around five core principles: - **Fast** — Quick to build, run, deploy, and iterate on - **Cheap** — Free to start with services that scale with you - **Opinionated** — Integrated tooling designed to work together - **Modern** — Latest stable features with healthy community support - **Safe** — End-to-end type safety and robust security posture ## Demo Experience next-forge in action: - [Web](https://demo.next-forge.com) — Marketing website - [App](https://app.demo.next-forge.com) — Main application - [Storybook](https://storybook.demo.next-forge.com) — Component library - [API](https://api.demo.next-forge.com/health) — API health check ## Features next-forge comes with batteries included: ### Apps - **Web** — Marketing site built with Tailwind CSS and TWBlocks - **App** — Main application with authentication and database integration - **API** — RESTful API with health checks and monitoring - **Docs** — Documentation site powered by Mintlify - **Email** — Email templates with React Email - **Storybook** — Component development environment ### Packages - **Authentication** — Powered by [Clerk](https://clerk.com) - **Database** — Type-safe ORM with migrations - **Design System** — Comprehensive component library with dark mode - **Payments** — Subscription management via [Stripe](https://stripe.com) - **Email** — Transactional emails via [Resend](https://resend.com) - **Analytics** — Web ([Google Analytics](https://developers.google.com/analytics)) and product ([Posthog](https://posthog.com)) - **Observability** — Error tracking ([Sentry](https://sentry.io)), logging, and uptime monitoring ([BetterStack](https://betterstack.com)) - **Security** — Application security ([Arcjet](https://arcjet.com)), rate limiting, and secure headers - **CMS** — Type-safe content management for blogs and documentation - **SEO** — Metadata management, sitemaps, and JSON-LD - **AI** — AI integration utilities - **Webhooks** — Inbound and outbound webhook handling - **Collaboration** — Real-time features with avatars and live cursors - **Feature Flags** — Feature flag management - **Cron** — Scheduled job management - **Storage** — File upload and management - **Internationalization** — Multi-language support - **Notifications** — In-app notification system ## Getting Started ### Prerequisites - Node.js 20+ - [Bun](https://bun.sh) (or npm/yarn/pnpm) - [Stripe CLI](https://docs.stripe.com/stripe-cli) for local webhook testing ### Installation Create a new next-forge project: ```sh npx next-forge@latest init ``` ### Setup 1. Configure your environment variables 2. Set up required service accounts (Clerk, Stripe, Resend, etc.) 3. Run the development server For detailed setup instructions, read the [documentation](https://www.next-forge.com/docs). ## Structure next-forge uses a monorepo structure managed by Turborepo: ``` next-forge/ ├── apps/ # Deployable applications │ ├── web/ # Marketing website (port 3001) │ ├── app/ # Main application (port 3000) │ ├── api/ # API server │ ├── docs/ # Documentation │ ├── email/ # Email templates │ └── storybook/ # Component library └── packages/ # Shared packages ├── design-system/ ├── database/ ├── auth/ └── ... ``` Each app is self-contained and independently deployable. Packages are shared across apps for consistency and maintainability. ## Documentation Full documentation is available at [next-forge.com/docs](https://www.next-forge.com/docs), including: - Detailed setup guides - Package documentation - Migration guides for swapping providers - Deployment instructions - Examples and recipes ## Contributing We welcome contributions! See the [contributing guide](https://github.com/vercel/next-forge/blob/main/.github/CONTRIBUTING.md) for details. ## Contributors <a href="https://github.com/vercel/next-forge/graphs/contributors"> <img src="https://contrib.rocks/image?repo=vercel/next-forge" /> </a> Made with [contrib.rocks](https://contrib.rocks). ## License MIT

Developer Tools Frontend Templates

7.1K Github Stars

Read more

Open Source

platforms

# Next.js Multi-Tenant Example A production-ready example of a multi-tenant application built with Next.js 15, featuring custom subdomains for each tenant. ## Features - ✅ Custom subdomain routing with Next.js middleware - ✅ Tenant-specific content and pages - ✅ Shared components and layouts across tenants - ✅ Redis for tenant data storage - ✅ Admin interface for managing tenants - ✅ Emoji support for tenant branding - ✅ Support for local development with subdomains - ✅ Compatible with Vercel preview deployments ## Tech Stack - [Next.js 15](https://nextjs.org/) with App Router - [React 19](https://react.dev/) - [Upstash Redis](https://upstash.com/) for data storage - [Tailwind 4](https://tailwindcss.com/) for styling - [shadcn/ui](https://ui.shadcn.com/) for the design system ## Getting Started ### Prerequisites - Node.js 18.17.0 or later - pnpm (recommended) or npm/yarn - Upstash Redis account (for production) ### Installation 1. Clone the repository: ```bash git clone https://github.com/vercel/platforms.git cd platforms ``` 2. Install dependencies: ```bash pnpm install ``` 3. Set up environment variables: Create a `.env.local` file in the root directory with: ``` KV_REST_API_URL=your_redis_url KV_REST_API_TOKEN=your_redis_token ``` 4. Start the development server: ```bash pnpm dev ``` 5. Access the application: - Main site: http://localhost:3000 - Admin panel: http://localhost:3000/admin - Tenants: http://[tenant-name].localhost:3000 ## Multi-Tenant Architecture This application demonstrates a subdomain-based multi-tenant architecture where: - Each tenant gets their own subdomain (`tenant.yourdomain.com`) - The middleware handles routing requests to the correct tenant - Tenant data is stored in Redis using a `subdomain:{name}` key pattern - The main domain hosts the landing page and admin interface - Subdomains are dynamically mapped to tenant-specific content The middleware (`middleware.ts`) intelligently detects subdomains across various environments (local development, production, and Vercel preview deployments). ## Deployment This application is designed to be deployed on Vercel. To deploy: 1. Push your repository to GitHub 2. Connect your repository to Vercel 3. Configure environment variables 4. Deploy For custom domains, make sure to: 1. Add your root domain to Vercel 2. Set up a wildcard DNS record (`*.yourdomain.com`) on Vercel

Project Management Frontend Templates

6.7K Github Stars

Read more

Open Source

nextjs-postgres-nextauth-tailwindcss-template

<div align="center"><strong>Next.js 15 Admin Dashboard Template</strong></div> <div align="center">Built with the Next.js App Router</div> <br /> <div align="center"> <a href="https://next-admin-dash.vercel.app/">Demo</a> <span> · </span> <a href="https://vercel.com/templates/next.js/admin-dashboard-tailwind-postgres-react-nextjs">Clone & Deploy</a> <span> </div> ## Overview This is a starter template using the following stack: - Framework - [Next.js (App Router)](https://nextjs.org) - Language - [TypeScript](https://www.typescriptlang.org) - Auth - [Auth.js](https://authjs.dev) - Database - [Postgres](https://vercel.com/postgres) - Deployment - [Vercel](https://vercel.com/docs/concepts/next.js/overview) - Styling - [Tailwind CSS](https://tailwindcss.com) - Components - [Shadcn UI](https://ui.shadcn.com/) - Analytics - [Vercel Analytics](https://vercel.com/analytics) - Formatting - [Prettier](https://prettier.io) This template uses the new Next.js App Router. This includes support for enhanced layouts, colocation of components, tests, and styles, component-level data fetching, and more. ## Getting Started During the deployment, Vercel will prompt you to create a new Postgres database. This will add the necessary environment variables to your project. Inside the Vercel Postgres dashboard, create a table based on the schema defined in this repository. ```sql CREATE TYPE status AS ENUM ('active', 'inactive', 'archived'); CREATE TABLE products ( id SERIAL PRIMARY KEY, image_url TEXT NOT NULL, name TEXT NOT NULL, status status NOT NULL, price NUMERIC(10, 2) NOT NULL, stock INTEGER NOT NULL, available_at TIMESTAMP NOT NULL ); ``` Then, uncomment `app/api/seed.ts` and hit `http://localhost:3000/api/seed` to seed the database with products. Next, copy the `.env.example` file to `.env` and update the values. Follow the instructions in the `.env.example` file to set up your GitHub OAuth application. ```bash npm i -g vercel vercel link vercel env pull ``` Finally, run the following commands to start the development server: ```bash pnpm install pnpm dev ``` You should now be able to access the application at http://localhost:3000.

Web Components & Widgets Data Labeling

1.6K Github Stars

Read more

Open Source

nextjs-postgres-auth-starter

Next.js + Tailwind + Typescript + Drizzle + NextAuth + PostgreSQL starter template.

Web Development Frontend Templates

1K Github Stars

Read more

Open Source

next.js

<div align="center"> <a href="https://nextjs.org"> <picture> <source media="(prefers-color-scheme: dark)" srcset="https://assets.vercel.com/image/upload/v1662130559/nextjs/Icon_dark_background.png"> <img alt="Next.js logo" src="https://assets.vercel.com/image/upload/v1662130559/nextjs/Icon_light_background.png" height="128"> </picture> </a> <h1>Next.js</h1> <a href="https://vercel.com"><img alt="Vercel logo" src="https://img.shields.io/badge/MADE%20BY%20Vercel-000000.svg?style=for-the-badge&logo=Vercel&labelColor=000"></a> <a href="https://www.npmjs.com/package/next"><img alt="NPM version" src="https://img.shields.io/npm/v/next.svg?style=for-the-badge&labelColor=000000"></a> <a href="https://github.com/vercel/next.js/blob/canary/license.md"><img alt="License" src="https://img.shields.io/npm/l/next.svg?style=for-the-badge&labelColor=000000"></a> <a href="https://github.com/vercel/next.js/discussions"><img alt="Join the community on GitHub" src="https://img.shields.io/badge/Join%20the%20community-blueviolet.svg?style=for-the-badge&logo=Next.js&labelColor=000000&logoWidth=20"></a> </div> ## Getting Started Used by some of the world's largest companies, Next.js enables you to create full-stack web applications by extending the latest React features, and integrating powerful Rust-based JavaScript tooling for the fastest builds. - Visit our [Learn Next.js](https://nextjs.org/learn) course to get started with Next.js. - Visit the [Next.js Showcase](https://nextjs.org/showcase) to see more sites built with Next.js. ## Documentation Visit [https://nextjs.org/docs](https://nextjs.org/docs) to view the full documentation. ## Community The Next.js community can be found on [GitHub Discussions](https://github.com/vercel/next.js/discussions) where you can ask questions, voice ideas, and share your projects with other people. To chat with other community members you can join the Next.js [Discord](https://nextjs.org/discord) server. Do note that our [Code of Conduct](https://github.com/vercel/next.js/blob/canary/CODE_OF_CONDUCT.md) applies to all Next.js community channels. Users are **highly encouraged** to read and adhere to it to avoid repercussions. ## Contributing Contributions to Next.js are welcome and highly appreciated. However, before you jump right into it, we would like you to review our [Contribution Guidelines](/contributing.md) to make sure you have a smooth experience contributing to Next.js. ### Good First Issues: We have a list of **[good first issues](https://github.com/vercel/next.js/labels/good%20first%20issue)** that contain bugs that have a relatively limited scope. This is a great place for newcomers and beginners alike to get started, gain experience, and get familiar with our contribution process. --- ## Security If you believe you have found a security vulnerability in Next.js, we encourage you to **_responsibly disclose this and NOT open a public issue_**. To participate in our Open Source Software Bug Bounty program, please email [[email protected]](mailto:[email protected]). We will add you to the program and provide further instructions for submitting your report.

Web Development Frontend Templates

139.9K Github Stars

Read more

Open Source

swr

[](https://swr.vercel.app) <p align="center"> <a aria-label="Vercel logo" href="https://vercel.com"> <img src="https://badgen.net/badge/icon/Made%20by%20Vercel?icon=zeit&label&color=black&labelColor=black"> </a> <br/> <a aria-label="NPM version" href="https://www.npmjs.com/package/swr"> <img alt="" src="https://badgen.net/npm/v/swr"> </a> <a aria-label="Package size" href="https://bundlephobia.com/result?p=swr"> <img alt="" src="https://badgen.net/bundlephobia/minzip/swr"> </a> <a aria-label="License" href="https://github.com/vercel/swr/blob/main/LICENSE"> <img alt="" src="https://badgen.net/npm/license/swr"> </a> </p> ## Introduction SWR is a React Hooks library for data fetching. The name “**SWR**” is derived from `stale-while-revalidate`, a cache invalidation strategy popularized by [HTTP RFC 5861](https://tools.ietf.org/html/rfc5861). **SWR** first returns the data from cache (stale), then sends the request (revalidate), and finally comes with the up-to-date data again. With just one hook, you can significantly simplify the data fetching logic in your project. And it also covered in all aspects of speed, correctness, and stability to help you build better experiences: - **Fast**, **lightweight** and **reusable** data fetching - Transport and protocol agnostic - Built-in **cache** and request deduplication - **Real-time** experience - Revalidation on focus - Revalidation on network recovery - Polling - Pagination and scroll position recovery - SSR and SSG - Local mutation (Optimistic UI) - Built-in smart error retry - TypeScript - React Suspense - React Native ...and a lot more. With SWR, components will get **a stream of data updates constantly and automatically**. Thus, the UI will be always **fast** and **reactive**. --- **View full documentation and examples on [swr.vercel.app](https://swr.vercel.app).** <br/> ## Quick Start ```js import useSWR from 'swr' function Profile() { const { data, error, isLoading } = useSWR('/api/user', fetcher) if (error) return <div>failed to load</div> if (isLoading) return <div>loading...</div> return <div>hello {data.name}!</div> } ``` In this example, the React Hook `useSWR` accepts a `key` and a `fetcher` function. The `key` is a unique identifier of the request, normally the URL of the API. And the `fetcher` accepts `key` as its parameter and returns the data asynchronously. `useSWR` also returns 3 values: `data`, `isLoading` and `error`. When the request (fetcher) is not yet finished, `data` will be `undefined` and `isLoading` will be `true`. When we get a response, it sets `data` and `error` based on the result of `fetcher`, `isLoading` to false and rerenders the component. Note that `fetcher` can be any asynchronous function, you can use your favourite data-fetching library to handle that part. --- **View full documentation and examples on [swr.vercel.app](https://swr.vercel.app).** <br/> ## Authors This library is created by the team behind [Next.js](https://nextjs.org), with contributions from our community: - Shu Ding ([@shuding\_](https://x.com/shuding_)) - [Vercel](https://vercel.com) - Jiachi Liu ([@huozhi](https://x.com/huozhi)) - [Vercel](https://vercel.com) - Guillermo Rauch ([@rauchg](https://x.com/rauchg)) - [Vercel](https://vercel.com) - Joe Haddad ([@timer150](https://x.com/timer150)) - [Vercel](https://vercel.com) - Paco Coursey ([@pacocoursey](https://x.com/pacocoursey)) - [Vercel](https://vercel.com) [Contributors](https://github.com/vercel/swr/graphs/contributors) Thanks to Ryan Chen for providing the awesome `swr` npm package name! <br/> ## License The MIT License.

Web Development JavaScript Libraries & Components

32.4K Github Stars

Read more

Open Source

ai

The ultimate list of resources to teach yourself how to use the latest AI tools, frameworks, and ideas.

AI & Machine Learning Education & Learning JavaScript Libraries & Components

230 Github Stars

Read more

Open Source

chatbot

Chatbot is an AI-based conversational application built with Python 2.x, designed to facilitate interactive dialogue through a web browser interface. The software leverages the Flask web framework to serve the application and the AIML library to process natural language inputs and generate corresponding responses. It operates as a local server, requiring users to install dependent packages via pip before launching the main script. Once executed, the chatbot becomes accessible at a specified local host address, allowing users to engage with the virtual assistant directly within their browser. This tool serves as a foundational example for developers interested in building simple chat interfaces or experimenting with artificial intelligence and artificial intelligence markup language integration using legacy Python environments. The project includes setup instructions for cloning the repository, installing dependencies, and running the server, though it is currently marked as deprecated and may not support mode

AI & Machine Learning AI Agents LLM Tools & Chat UIs

415 Github Stars

Read more

Open Source

commerce

Fully integrated ecommerce for Craft CMS.

Web Development CMS Plugins & Extensions E-commerce Platforms

239 Github Stars

Read more

Open Source

next-app-router-playground

# Next.js Playground This playground is used by the DX team to explore, test, and demo new Next.js features. It serves as a starting point for writing documentation and helps us understand features, identify bugs, and provide feedback to the Next.js team. ## Running Locally 1. Install dependencies: ```sh pnpm install ``` 2. Start the dev server: ```sh pnpm dev ``` ## Documentation https://nextjs.org/docs

Developer Tools Frontend Templates

3K Github Stars

Read more

Open Source

kirimase

> [!NOTE] > Note: Only critical bugs are being addressed right now as we are planning a complete rewrite in the very near future! <p align="center"> <picture> <img src="https://github.com/nicoalbanese/gifs_for_demos/blob/main/samurai-helmet.png?raw=true" width="130" alt="Logo for Kirimase"> </picture> </p> <h1 align="center"> Kirimase </h1> <p align="center"> <img src="https://img.shields.io/npm/v/kirimase?style=flat-square" alt="npm_version"> </p> <p align="center">Kirimase is a command-line tool for <strong>building full-stack Next.js apps faster</strong>. It supercharges your development workflow, allowing you to quickly integrate packages and scaffold resources for your application with best practices in mind.</p> <br /> <a href="https://www.youtube.com/watch?v=33jlErS3Wxg" target="_blank"> <p align="center"> <img src="https://github.com/nicoalbanese/gifs_for_demos/blob/main/Screenshot%202023-10-15%20at%2010.36.02.png?raw=true" alt="Kirimase Demo" width="420" /> </p> </a> <a href="https://www.youtube.com/watch?v=33jlErS3Wxg" target="_blank"> <p align="center">Watch the most recent demo here</p> </a> <a href="https://kirimase.dev/the-tutorial" target="_blank"> <p align="center">Check out the official tutorial here</p> </a> ## Features 1. **Initialization and Configuration**: quickly add and set up essential packages to jump-start your Next.js project. 2. **Code Generation**: scaffold models, views, and controllers directly from the CLI. <br /> ## Quick Start Install Kirimase CLI globally: ```bash npm install -g kirimase ``` <br /> If you don't already have a Nextjs app, run create-next-app with your preferred package manager. Then run the following command within the directory of your project: ```bash kirimase init ``` Note: Kirimase is not compatible with the the pages directory. # Commands Run these commands within the directory of your Nextjs app: ### 1. `kirimase add` Initializes and configures the following packages for your Next.js project, categorized into: ### ORM #### Drizzle-ORM - Based on your chosen database type (PostgreSQL, MySQL, SQLite), Kirimase sets up the required files for [Drizzle-ORM](https://github.com/drizzle-team/drizzle-orm), [drizzle-zod](https://github.com/drizzle-team/drizzle-orm/blob/main/drizzle-zod/README.md) for validations and and [drizzle-kit](https://github.com/drizzle-team/drizzle-kit-mirror) to manage migrations. - Scripts are auto-added to `package.json` for immediate use of drizzle-kit. #### Prisma - Kirimase sets up required files for [Prisma](https://github.com/prisma/prisma) with [zod-prisma](https://github.com/CarterGrimmeisen/zod-prisma) for validations. --- ### Authentication #### Auth.js - Generates files for [Auth.js](https://github.com/nextauthjs/next-auth) (Next-Auth), including the latest Drizzle adapter. (For PlanetScale, references are excluded as it doesn't support foreign keys). - Generates a generic sign-in component for immediate use within your Next.js project. - Wraps the root layout with the auth provider and generates utilities for auth checks and redirects in your Next.js routes. #### Clerk - Generates files for [Clerk](https://github.com/clerkinc/javascript) including all necessary config. - Wraps the root layout with the auth provider and generates utilities for auth checks and redirects in your Next.js routes. #### Lucia - Generates files for [Lucia](https://github.com/lucia-auth/lucia) including all necessary config. - Generates UI and API routes for sign-in and sign-up #### Kinde - Generates files for [Kinde](https://github.com/kinde-oss/kinde-auth-nextjs) including all necessary config. - Generates sign in component and route handler --- ### Other #### tRPC - Generates files to configure [tRPC](https://github.com/trpc/trpc) with the app router. - Provides client-side tRPC and scaffolds server-side configuration using the experimental server-invoker pattern. - Wraps the root layout in the tRPC provider. #### Shadcn-UI - Installs and configures [Shadcn-UI](https://github.com/shadcn-ui/ui) including button and toast components. - Inserts the toast-provider (`<Toaster />`) to the root layout for instant toast notifications in your Next.js app. #### Stripe - Installs and configures Stripe within your Next.js project so you can start accepting subscription payments. #### Resend - Installs and configures [Resend](https://resend.com/) Kirimase also adds relevant keys to your `.env` which you'll need to provide values for. <br /> ## 2. `kirimase generate` Akin to `rails scaffold` but for Next.js:   Kirimase generates: #### a) Model: - Generates a drizzle schema with column types based on your SQL flavor and database provider. - Uses drizzle-zod to generate Zod schemas for frontend and backend validation. - Generates queries and mutations for CRUD operations, fully typed and optimized for consumption via a Next.js front-end. #### b) Controller: - Gives you an option to scaffold tRPC, Server Actions and/or API routes. - Uses Zod schemas from models for request validation. - Includes built-in error handling for API routes and auto-adding of tRPC routes to the root router. #### c) Views: - Scaffolds views using Shadcn-UI to enable immediate CRUD operations (including select fields for adding relations and datepickers for dates). - Option to use either React Hook Form with tRPC or plain React (useOptimistic and useValidated Form hooks) ## Run in non-interactive mode As of v0.0.23, you can run `kirimase init` and `kirimase add` entirely via the command line as follows: ```sh kirimase init -sf yes -pm bun --orm prisma -db pg -a next-auth -ap github discord -mp trpc stripe resend -cl shadcn-ui -ie yes ``` | Command | Short Flag | Long Option | Description | Argument | | ------- | ---------- | ----------------- | ---------------------------------------------- | ----------------- | | init | - | - | initialise and configure kirimase | - | | - | -h | --headless | initialise without any ui | `yes` or `no` | | - | -sf | --src-folder | use a src folder | `yes` or `no` | | - | -pm | --package-manager | package manager | `<pm>` | | - | -cl | --component-lib | component library | `<component-lib>` | | - | -o | --orm | orm | `<orm>` | | - | -db | --db | database ("pg", "mysql", "sqlite") | `<db>` | | - | -dbp | --db-provider | database provider - important if using drizzle | `<dbp>` | | - | -a | --auth | auth | `<auth>` | | - | -ap | --auth-providers | auth providers (if using next-auth) | `<providers>` | | - | -mp | --misc-packages | packages ("trpc", "shadcn-ui", "resend") | `<packages>` | | - | -ie | --include-example | include example | `yes` or `no` | ## Contributing Keen on enhancing Kirimase? Contributions, bug reports, and feature requests are always welcome. Feel free to open an issue or submit a pull request. To run locally: ```sh pnpm i pnpm run dev npm install -g . (in a second terminal - this will then make kirimase available across your machine using "kirimase *command*") ``` ## License [MIT](LICENSE)

Frontend Templates Low-Code & No-Code Dev

2.8K Github Stars

Read more

Open Source

nextgram

# NextGram This is a sample Next.js application that takes advantage of the advanced routing capabilities. The photo route can be attached to _two distinct_ components: 1. When navigating within the application, it is rendered as a modal 1. When the page is refreshed, it is rendered as a standalone page ## Demo https://nextgram.vercel.app [](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fvercel%2Fnextgram)

Web Development Frontend Templates

1K Github Stars

Read more

Open Source

next-react-server-components

# Next.js App Router + React Server Components Try the demo live here: [**https://next-news.vercel.app**](https://next-news.vercel.app). ## Introduction This is a demo app of the Hacker News website clone, which shows Next.js App Router with support for [React Server Components](https://nextjs.org/docs/app/building-your-application/rendering/server-components). ### Running Locally 1. `pnpm install` 2. `pnpm dev` Go to `localhost:3000`. ### Deploy You can quickly deploy the demo to Vercel by clicking this link: [](https://vercel.com/templates/next.js/react-server-components) ## License This demo is MIT licensed.

Web Development Frontend Templates

996 Github Stars

Read more

Open Source

sveltekit-commerce

# SvelteKit Commerce <img width="843" alt="sveltekit-commerce" src="https://user-images.githubusercontent.com/9113740/176811983-2bc99cac-e994-4c65-b8b2-5e2f845b3b8e.png"> SvelteKit Commerce is an open-source, customizable ecommerce template built with SvelteKit, Tailwind CSS, and Shopify. ## Deploy Your Own [](https://vercel.com/new/clone?demo-title=SvelteKit%20Commerce&demo-description=An%20all-in-one%20starter%20kit%20for%20high-performance%20e-commerce%20sites%20built%20with%20SvelteKit.&demo-url=https%3A%2F%2Fsveltekit-commerce.vercel.app&demo-image=%2F%2Fimages.ctfassets.net%2Fe5382hct74si%2F3XUMB0FmezRUsbDFLZzqw9%2Fef0f3ad80a5e2e02dca2e2f94a3f174f%2FCleanShot_2022-07-29_at_17.13.28_2x.png&project-name=SvelteKit%20Commerce&repository-name=sveltekit-commerce&repository-url=https%3A%2F%2Fgithub.com%2Fvercel%2Fsveltekit-commerce) This template includes read-only Shopify credentials by default, but you can add the following environment variables to make it your own: - `VITE_SHOPIFY_API_ENDPOINT` - `VITE_SHOPIFY_STOREFRONT_API_TOKEN` ## Running Locally - `pnpm install`: Install dependencies - `pnpm dev`: Start development server - `pnpm build`: Create a production build of the app - `pnpm preview`: Preview the production build

CMS & Blogging Frontend Templates E-commerce Platforms

442 Github Stars

Read more