Project Setup

Learn how to set up a new project using Studs Design System.

Creating a New Project

1. Initialize your project

   pnpm create next-app my-studs-app
   cd my-studs-app

2. Install Studs dependencies

   pnpm add @studs/core @studs/react

3. Configure TypeScript Create or update your tsconfig.json:

   {
     "compilerOptions": {
       "target": "ES2020",
       "lib": ["DOM", "DOM.Iterable", "ESNext"],
       "module": "ESNext",
       "skipLibCheck": true,
       "moduleResolution": "bundler",
       "allowImportingTsExtensions": true,
       "resolveJsonModule": true,
       "isolatedModules": true,
       "noEmit": true,
       "jsx": "react-jsx",
       "strict": true,
       "noUnusedLocals": true,
       "noUnusedParameters": true,
       "noFallthroughCasesInSwitch": true
     },
     "include": ["src"],
     "references": [{ "path": "./tsconfig.node.json" }]
   }

Project Structure

my-studs-app/
├── src/
│   ├── components/
│   ├── pages/
│   ├── styles/
│   └── app.tsx
├── package.json
├── tsconfig.json
└── README.md

Configuration

1. Configure Tailwind CSS

   // tailwind.config.js
   module.exports = {
     content: ['./src/**/*.{js,jsx,ts,tsx}'],
     theme: {
       extend: {
         // Your custom theme extensions
       },
     },
     plugins: [],
   }

2. Setup ESLint and Prettier

   pnpm add -D eslint prettier

Next Steps

• Proceed to Turborepo Setup if you're building a monorepo
• Check out our Components documentation to start building your UI