const { execSync } = require('node:child_process');

const commitMessage = execSync('git log -1 --pretty=%B').toString().trim();

if (commitMessage.includes('[skip ci]')) {
  process.stdout.write('Skipping build due to [skip ci] in commit message.\n');
  process.exit(0); // this causes Vercel to skip the build
}

process.exit(1); // continue with build

export { default as Tabs } from './Tabs';
export { default as TabItem } from './TabItem';
export { default as Alert } from './Alert';
export { default as CodeGroup } from './CodeGroup';


Visualize and edit your database in a UI.

Studio

zopio docs

What is `zopio` and how do I get started?

Overview

Guiding principles for the development of `zopio`.

Philosophy

Learn how `zopio` apps and packages are structured.

Structure

Built-in helpers to help you keep your project up to date.

Updates

Frequently asked questions about `zopio`.

How to configure your development environment for `zopio`.

Prerequisites

Installation

How to handle environment variables in `zopio`.

Environment Variables

CLI Overview

Plugins

Manage translations and locales with the Zopio CLI

Internationalization

Common issues and solutions for the Zopio CLI

Troubleshooting

Add multi-language support to your application

How to set up internationalization in your application

Setup Guide

Working with translations in server components

Server Components

Working with translations in client components

Client Components

Adding Languages

Advanced Usage

Common issues and solutions for internationalization

Deploying to Vercel

Deploying to Netlify

How the main application works in `zopio`.

How the website application works in zopio.

How the "API" application works in `zopio`.

Email

How the documentation is configured in `zopio`.

Documentation

Storybook

Collaboration

Create serverless functions that run on specific intervals.

Cron Jobs

How the database and ORM are configured in `zopio`.

Database

Transactional Emails

Control access to features in your application.

Feature Flags

Formatting

How to add multiple languages to your application.

Notifications

How `zopio` handles payments and billing.

Payments

Storage

Testing

zopio uses the Vercel Toolbar to allow you to override feature flags in development.

Toolbar

Let's use `zopio` to create a simple AI chatbot.

Create an AI Chatbot

Learn how to build a comprehensive analytics application using `zopio` and the analytics package.

Build an Analytics Application

Learn how to create a real-time chat application using `zopio` and the collaboration package.

Build a Real-time Chat Application

Learn how to build a subscription-based SaaS application using `zopio` and the payments package.

Build a Subscription SaaS Application

How to change the authentication provider to Auth.js.

Switch to Auth.js

How to change the authentication provider to Better Auth.

Switch to Better Auth

Switch to Content Collections

Switch to Drizzle

How to change the database provider to PlanetScale.

Switch to PlanetScale

How to change the database provider to Prisma Postgres.

Switch to Prisma Postgres

How to change the database provider to Supabase.

Switch to Supabase

How to change the database provider to EdgeDB.

Switch to EdgeDB

How to change the database provider to Turso.

Switch to Turso

How to change the documentation provider to Fumadocs.

Switch to Fumadocs

How to change the feature flag provider to Hypertune.

Switch to Hypertune

How to change the default linter to ESLint.

Switch to ESLint

How to change the default payment processor to Lemon Squeezy.

Switch to Lemon Squeezy

How to change the default payment processor to Paddle.

Switch to Paddle

How to change the default storage provider to uploadthing.

Switch to uploadthing

A powerful, lightweight fuzzy-search library, with zero dependencies.

Fuse.js

A library for animating React components with ease.

Motion

A powerful library for managing URL search parameters in your application. It provides a simple and efficient way to handle state management through URL search parameters.

NUQS

A powerful JavaScript library for creating and modifying PDF documents in any JavaScript environment.

PDF-Lib

A React component library for displaying PDF documents in your web applications with a simple and intuitive API.

React PDF

A simple React component that makes titles more readable

React Wrap Balancer

A headless, framework-agnostic rich text editor for modern web applications, built on top of ProseMirror.

Tiptap

A JavaScript package that creates friendly words to use in your app, handy for generating project names.

Friendlier Words

A powerful library for managing and securing your Next.js Server Actions.

Next Safe Action

How to add link tracking to your app with Dub.

How to add business intelligence and analytics to your app with Metabase.

Metabase

The web interface for Temporal, a durable execution system that makes it easy to build and operate resilient applications at scale.

Temporal UI

A small, fast, and scalable bearbones state-management solution for React applications. It provides a simple and efficient way to manage state in your application.

Zustand

Free and open-source RPA (Robotic Process Automation) tool by AI Singapore for automating repetitive tasks on websites, desktop applications, and command-line interfaces.

TagUI

Open-source secrets management platform for securely storing and syncing API keys, database credentials, and configuration across your team and infrastructure.

Infisical

Getting Started

Apps

Packages

Recipes

Migrations

Addons

init

Generate new Zopio modules and components

generate

config

Manage internationalization for your `zopio` project

i18n

jobs

Generate CRUD operations for your `zopio` project

crud

Generate JSON schema and TypeScript interface for a model

crud-schema

Generate React components for CRUD operations

crud-ui

Generate permissions configuration and middleware for a model

crud-permissions

crud-validation

crud-testing

Generate complete CRUD functionality for models

crud-unified

Configure and manage data providers for your application

data-provider

Captures pageviews, pageleave and custom events.

Web Analytics

Product Analytics

We use Clerk to handle authentication, user and organization management.

Authentication

Manage and use API keys for secure programmatic access to your application's resources.

API Keys

Implement fine-grained authorization with the auth-rbac package.

Role-Based Auth

Implement fine-grained attribute-based authorization with the auth-abac package.

Attribute-Based Auth

Simplify authorization by combining RBAC and ABAC with the auth-runner package.

Authorization Runner

React hooks for authorization in `zopio` applications

Authorization Hooks

Track and monitor authorization attempts with the auth-log package.

Authorization Logging

Components that come with the CMS package.

Components

How the title, description, and Open Graph images are configured in the CMS.

Metadata

Core data management and provider packages for the `zopio` framework

Core types, interfaces, and utilities for data operations

Base Package

Available data providers and how to use them

Provider System

React components and hooks for working with data

UI Components

Enhanced CRUD operations with support for permissions, auditing, and plugins

Core CRUD functionality built on top of data providers

CRUD Engine

CRUD Hooks

CRUD UI

Permissions System

Plugin System

Audit System

Colors

zopio offers a default component library by shadcn/ui

How to use dark mode in the design system.

Dark Mode

A single global provider to wrap your application

Provider

Typography

How we've configured uptime monitoring in `zopio`.

Uptime Monitoring

Logging

How we've configured error capture in `zopio`.