This project is a boilerplate for Next and TypeScript projects. This template was built with Vite, TypeScript and Stitches.

Related tags

Learning resource nextjs storybook design-tokens stitches typesci radix-ui
Overview

Awesome Template Stitches — NextJS, TypeScript, Stitches and Design Tokens

Summary

About this template

This project is a template for NextJS with TypeScript projects. This template was built with create-next-app, typescript, stitches, @radix-ui and storybook.

Avaliale scripts

At first, in the project directory, you need run:

// installing the dependencies
yarn

Other scripts available

// run project on http://127.0.0.1:5173/
yarn dev

Run the app in the development mode by opening http://localhost:3000/ to view it in the browser. The page will reload if you make edits.

// build project
yarn build
// preview project
yarn start
// runs the linter in all src/ files
yarn lint
// generate components quickly. e.g. to generate a <Button /> component, run:
yarn generate button
// run storybook on http://localhost:6006/
yarn storybook

see in production here

Learn how to install yarn through the official documentation.

Main technologies used

  • NextJS
  • TypeScript
  • Stitches
  • Radix UI Colors
  • Storybook
  • ESLint
  • Prettier
  • Husky
  • Commitlint
  • Lint-staged
  • Light / Dark theme
  • Automated component creation

radix ui colors

An open-source color system for designing beautiful, accessible websites and apps.

stitches

CSS-in-JS with near-zero runtime, SSR, multi-variant support, and a best-in-class developer experience.

storybook

Storybook is a frontend workshop for building UI components and pages in isolation.

typescript

TypeScript is JavaScript with syntax for types.

About me

I'm Diego Silva, Senior Frontend Developer at Neon Bank with focus on improving the Developer Experience and Community Manager at @99juniors.

#followMyWork

twitter linkedin linktree youtube twitch community

You might also like...

A starter template that uses Phaser 3, TypeScript, Electron and Rollup and Vite for bundling.

A starter template that uses Phaser 3, TypeScript, Electron and Rollup and Vite for bundling.

Phaser TypeScript Electron starter template This is a 🕹️ Phaser 3 starter with ⌨️ TypeScript and ⚛️ Electron, 📦 Rollup and Vite. 🔥 🔥 HOT RELOAD ON

Nov 25, 2022

A Versatile, Extensible Dapp Boilerplate built with Rainbowkit, Next.js, and Chakra-ui.

A Versatile, Extensible Dapp Boilerplate built with Rainbowkit, Next.js, and Chakra-ui.

rainplate • A Versatile, Extensible Dapp Boilerplate built with Rainbowkit, Next.js, and Chakra-ui. Getting Started Click use this template to create

Nov 22, 2022

Boilerplate starter template for a new TON blockchain project - FunC contracts, JS tests, compilation and deployment scripts

TON Starter Template - Contracts Starter template for a new TON project - FunC contracts, JS tests, compilation and deployment scripts Overview This p

Dec 17, 2022

A contact app built with Solid.js, Vite, Hope UI and Typescript.

Solid Contacts Solid Contacts is a contact app to learn more about concepts like Solid.js (router / store / resources / reactivity), Vite and Hope UI.

Sep 21, 2022

Project template repo for generative art projects on the fx(hash) platform

Project template repo for generative art projects on the fx(hash) platform

fx(hash) x thi.ng project template About This template repo provides a compact, ready-to-go scaffolding for generative art projects aimed at the fx(ha

Dec 21, 2022

open-sourced boilerplate NFT projects (Shopify, Opensea, Patreon, etc)

👋 Quickly start any NFT projects A collection of boilerplates for full-stack dapps that showcase some of the use case for NFTs. Think of web3 native,

Jan 12, 2022

Out-of-the-box MPA plugin for Vite, with html template engine and virtual files support.

vite-plugin-virtual-mpa Out-of-the-box MPA plugin for Vite, with html template engine and virtual files support, generate multiple files using only on

Dec 16, 2022

⚡⚙️ Fast prototyping with template engines and integrated frontend tools. Vituum is a small wrapper around Vite.

⚡⚙️ Fast prototyping with template engines and integrated frontend tools. Vituum is a small wrapper around Vite.

⚡ ⚙️ Vituum Still in early development. Fast prototyping with template engines and integrated frontend tools ⚡ Vite integrated 🚀️ Fast prototyping 🛠

Jan 3, 2023

js template for the vite.js with redux

js template for the vite.js with redux

viterjs-template JavaScript + React + Redux + Mui + Axios + ESLint + Prettier Getting Started Clone the repo npx degit emre-cil/viterjs-template my-ap

Dec 19, 2022
Comments
  • Stitches can generate it's own types, no need for duplication

    Stitches can generate it's own types, no need for duplication

    Stitches has implemented different ways to infer the types such as Stitches.VariantProps<>. The issue with this is that you lose auto-infer of params for storybook. There is a workaround using this snippet: https://gist.github.com/f1lander/db2a9a95a4442e1e98217001ab724d3f

    https://github.com/diegosilvatech/awesome-template-stitches/blob/9086dc1c2d414e77cb219746a53df88c9730a4d3/src/components/button/Button.tsx#L3-L16

    opened by andrewdoro 1
Owner
Diego Silva
Community Manager at @99juniors | An amazing community for people new to tech.
Diego Silva
GitHub https://awesome-template-stitches.vercel.app/
A starter project that includes theme switching functionality with Stitches CSS-in-JS and Remix SSR.

Welcome to Remix! Remix Docs Development From your terminal: npm run dev This starts your app in development mode, rebuilding assets on file changes.

Ross Moody 13 Dec 22, 2022
Grupprojekt för kurserna 'Javascript med Ramverk' och 'Agil Utveckling'

JavaScript-med-Ramverk-Laboration-3 Grupprojektet för kurserna Javascript med Ramverk och Agil Utveckling. Utvecklingsguide För information om hur utv

Svante Jonsson IT-Högskolan 3 May 18, 2022
Hemsida för personer i Sverige som kan och vill erbjuda boende till människor på flykt

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

null 4 May 3, 2022
Kurs-repo för kursen Webbserver och Databaser

Webbserver och databaser This repository is meant for CME students to access exercises and codealongs that happen throughout the course. I hope you wi

null 14 Jan 3, 2023
Simple NextJS Project Template to write less boilerplate code when starting a new Next JS Project

Simple NextJS Project Template to write less boilerplate code when starting a new Next JS Project

Juan David Ramirez Mendoza 1 Feb 12, 2022
💻 A simple Create Next App template to start your projects with Next.js, TypeScript, ESLint, Prettier and other tools.

⚡ Next Typescript Template ⚡ A simple Create Next App template to start your projects with Next.js, TypeScript, ESLint, Prettier and other tools. Quic

João Gabriel 13 Nov 23, 2022
A boilerplate for ExpressJs projects configured with ESLint, Prettier & Airbnb Setup. The boilerplate utilises RESTful architecture and uses Mongodb.

ExpressJs-Boilerplate An ExpressJs boilerplate configured with ESLint, Prettier & Airbnb Setup. The boilerplate utilises RESTful architecture and uses

Hammas bin Farrukh 4 Mar 8, 2023
Chrome Extension Boilerplate with SolidJS + Vite + TypeScript + Manifest V3 + HMR

mv3-solid-chrome-extension-template chrome-extension development template with firebase Support Chrome Extension Manifest V3 SolidJS Typescript HMR Fi

munron 6 Dec 13, 2022
A template for your Next.js projects including Typescript, Eslint, Prettier, Jest, Cypress and Docker.

Next.js Template Quickly start a new Next.js project A template for your Next.js projects including Typescript, Eslint, Prettier, Jest, Cypress and Do

Lorenzo Carneli 2 Oct 7, 2022
Transpile TypeScript to Espruino flavor of JavaScript for ESP8266/ESP32 microcontrollers template project. Writing safe, maintainable, and testable code is the projects goal.

ESP-TypeScript Transpile TypeScript to Espruino flavor of JavaScript for ESP8266/ESP32 microcontrollers template project. Writing safe, maintainable,

Spencer Kittleson 152 Dec 20, 2022