A documented Next.js starter with dark / light mode and smart inputs.
This home page doubles as your in-app documentation. Explore how theming works, see the available input options, and use this layout as a launchpad for your next product UI.
Theme Playground
Toggle between light and dark to see how background, text, and accent colors adapt automatically.
Predefined input building blocks
The `InputWithIcon` component wraps common patterns you use on most startup forms: label, icon, validation, character counter, and a subtle progress bar that visualizes how much the user has typed.
Flexible types
Use `type` to switch between `text`, `email`, `password`, `number`, or `textarea` while keeping a consistent layout and motion.
Icons & helpers
Pass any React icon via the `icon` prop and customize `iconClassName` to match your brand while adapting to theme changes.
Character management
Use `maxLength`, `minLength`, and `showCharCount` to guide input length with dynamic labels and a progress bar.
Accessibility‑ready
Labels, focus rings, and disabled states are handled for you so you can plug this into real user flows right away.
Input Playground
Try typing in the fieldsHow to use this starter
Use this page as your living documentation. When you are ready, replace the hero content with your real product story, but keep the patterns.
1. Update the layout
Edit src/app/layout.tsx to adjust global wrappers, fonts, and providers.
2. Customize this page
Replace the hero copy and sections inside src/app/page.tsx with your own content while reusing the theme toggle and inputs.
3. Plug in real actions
Hook the playground inputs into real forms, auth flows, or API calls. Replace the CTA button action with your own logic.
Need more pages? Create new routes under src/app/your-page/page.tsx.
Built with Next.js, Tailwind, and framer-motion.