How to use Sane Kit
Sane Kit is a lean boilerplate to help you launch projects without the overhead. It's built on Next.js and Sanity, includes pre-styled sections via TWBlocks, and is wired for fast iteration and clarity. This guide walks you through how to get it running locally and customizing it to suit your needs.
1. Prerequisites
Make sure you have the following installed:
- Node.js (v18+ recommended)
- npm or yarn
- Sanity CLI (
npm install -g sanity) - A Sanity.io account
2. Initialize the Template
Run the following command in your terminal to start with Sane Kit:
Replace your-username with your GitHub username or wherever the template is hosted.
3. Start Development Servers
Navigate into your new project folder and run:
This spins up both:
- Next.js App at http://localhost:3000
- Sanity Studio at http://localhost:3333
4. Import Sample Content (Optional)
Want to skip ahead and see how things look populated?
This adds a few example pages, posts, and testimonials for preview.
5. Explore the Structure
Sane Kit is organized into two apps:
/nextjs-app: your frontend, built with the App Router and styled using Tailwind/studio: your Sanity Studio for managing content
The frontend dynamically renders content from your Sanity dataset via GROQ queries. It includes prebuilt components for:
- Hero sections
- Pricing tables
- Testimonials
- Contact/CTA blocks
- Blog posts and more
These are mostly powered by TWBlocks, which made building reusable UI fast and frictionless.
6. Customize It
The whole point of Sane Kit is to not overthink it. Tweak the blocks, update the schema, or swap in your own layout. The content model is designed for flexibility and easy expansion.
7. Deploy It
You can deploy the frontend with Vercel and the Studio with sanity deploy. Here’s a typical flow:
Then connect your frontend repo to Vercel and set the environment variables accordingly.
8. What You Get
- A clean, customizable starter with dynamic routing
- Built-in SEO and metadata support
- Drag-and-drop editing with the Presentation tool
- Realtime previews and instant publishing
- Fully typed schemas in
studio/src/schemaTypes
Sane Kit is not trying to be everything—it’s just trying to get you somewhere faster. Clone it, cut what you don’t need, and launch before your brain tells you not to.