├── public └── .gitignore ├── .eslintrc.json ├── postcss.config.js ├── lib └── utils.ts ├── app ├── extended │ └── page.tsx ├── minimal │ └── page.tsx ├── layout.tsx ├── page.tsx └── globals.css ├── next.config.ts ├── components ├── theme-provider.tsx ├── ui │ ├── textarea.tsx │ ├── label.tsx │ ├── input.tsx │ ├── progress.tsx │ ├── switch.tsx │ ├── button.tsx │ ├── card.tsx │ └── multi-step-form.tsx ├── minimal-form.tsx └── extended-form.tsx ├── components.json ├── .gitignore ├── .prettierrc ├── tsconfig.json ├── package.json ├── tailwind.config.ts ├── README.md └── pnpm-lock.yaml /public/.gitignore: -------------------------------------------------------------------------------- 1 | * 2 | !.gitignore -------------------------------------------------------------------------------- /.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": ["next/core-web-vitals", "next/typescript"] 3 | } 4 | -------------------------------------------------------------------------------- /postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: { 3 | tailwindcss: {}, 4 | autoprefixer: {}, 5 | }, 6 | }; 7 | -------------------------------------------------------------------------------- /lib/utils.ts: -------------------------------------------------------------------------------- 1 | import { type ClassValue, clsx } from 'clsx' 2 | import { twMerge } from 'tailwind-merge' 3 | 4 | export function cn(...inputs: ClassValue[]) { 5 | return twMerge(clsx(inputs)) 6 | } 7 | -------------------------------------------------------------------------------- /app/extended/page.tsx: -------------------------------------------------------------------------------- 1 | import ExtendedForm from '@/components/extended-form' 2 | 3 | export default function Home() { 4 | return ( 5 |
6 | 7 |
8 | ) 9 | } 10 | -------------------------------------------------------------------------------- /app/minimal/page.tsx: -------------------------------------------------------------------------------- 1 | import MinimalForm from '@/components/minimal-form' 2 | 3 | export default function Home() { 4 | return ( 5 |
6 | 7 |
8 | ) 9 | } 10 | -------------------------------------------------------------------------------- /next.config.ts: -------------------------------------------------------------------------------- 1 | import type { NextConfig } from 'next' 2 | 3 | const nextConfig: NextConfig = {} 4 | 5 | module.exports = { 6 | images: { 7 | remotePatterns: [ 8 | { 9 | protocol: 'https', 10 | hostname: 'images.unsplash.com', 11 | }, 12 | ], 13 | }, 14 | } 15 | 16 | export default nextConfig 17 | -------------------------------------------------------------------------------- /components/theme-provider.tsx: -------------------------------------------------------------------------------- 1 | 'use client' 2 | 3 | import { 4 | ThemeProvider as NextThemesProvider, 5 | ThemeProviderProps, 6 | } from 'next-themes' 7 | import * as React from 'react' 8 | 9 | export function ThemeProvider({ children, ...props }: ThemeProviderProps) { 10 | return {children} 11 | } 12 | -------------------------------------------------------------------------------- /components.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://ui.shadcn.com/schema.json", 3 | "style": "default", 4 | "rsc": true, 5 | "tsx": true, 6 | "tailwind": { 7 | "config": "tailwind.config.ts", 8 | "css": "app/globals.css", 9 | "baseColor": "neutral", 10 | "cssVariables": true, 11 | "prefix": "" 12 | }, 13 | "aliases": { 14 | "components": "@/components", 15 | "utils": "@/lib/utils", 16 | "ui": "@/components/ui", 17 | "lib": "@/lib", 18 | "hooks": "@/hooks" 19 | }, 20 | "iconLibrary": "lucide" 21 | } -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # next.js 12 | /.next/ 13 | /out/ 14 | 15 | # production 16 | /build 17 | 18 | # misc 19 | .DS_Store 20 | *.pem 21 | 22 | # debug 23 | npm-debug.log* 24 | yarn-debug.log* 25 | yarn-error.log* 26 | 27 | # local env files 28 | .env*.local 29 | .env 30 | 31 | # vercel 32 | .vercel 33 | 34 | # typescript 35 | *.tsbuildinfo 36 | next-env.d.ts 37 | 38 | .vercel 39 | .env*.local 40 | -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://json.schemastore.org/prettierrc", 3 | "arrowParens": "always", 4 | "bracketSpacing": true, 5 | "plugins": ["@trivago/prettier-plugin-sort-imports"], 6 | "importOrder": [ 7 | "", 8 | "^@/lib/(.*)$", 9 | "^@/components/(.*)$", 10 | "^@/app/(.*)$", 11 | "^./(.*)$" 12 | ], 13 | "importOrderSeparation": true, 14 | "importOrderSortSpecifiers": true, 15 | "trailingComma": "es5", 16 | "tabWidth": 2, 17 | "semi": false, 18 | "printWidth": 80, 19 | "singleQuote": true, 20 | "proseWrap": "always" 21 | } -------------------------------------------------------------------------------- /components/ui/textarea.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react' 2 | 3 | import { cn } from '@/lib/utils' 4 | 5 | const Textarea = React.forwardRef< 6 | HTMLTextAreaElement, 7 | React.ComponentProps<'textarea'> 8 | >(({ className, ...props }, ref) => { 9 | return ( 10 |