Templates

Published May 29, 2025 by kuvi41
Code Snippets
Templates

📄 20+ Basic Templates for Single Pages (Web & App)

Save hours of design and dev time with these reusable templates. Whether you’re building for React, Next.js, React Native, Android, or Node.js, these are great starting points for any app.

🔐 Login Page

  • Web (React/Next.js): Simple form with email, password, and forgot password link.
  • Mobile (React Native/Android): Full-screen form with biometric login option.
  • Keywords: formik, yup, react-hook-form, material UI

📝 Signup / Registration

  • Web: Multi-step or single screen, with password strength meter.
  • App: Mobile-friendly input fields, with real-time validation.
  • Keywords: react-native-paper, validation, secureTextEntry

🙍 Profile Page

  • Web: Avatar, editable form fields, and change password section.
  • App: Tab-based profile with logout and settings.
  • Keywords:  Avatar, react-native-elements, Tailwind CSS

🛍️ Product / Item Detail

  • Web: Gallery slider, price, description, Add to Cart.
  • App: Scrollable with fixed CTA at bottom.
  • Keywords: swiper, carousel, react-navigation-stack

🧾 Checkout / Payment

  • Web: 3-step checkout with cart, address, payment.
  • App: One-screen checkout with Razorpay or Stripe integration.
  • Keywords: stripe-react-native, react-payment-inputs

📨 Contact Us

  • Web: Form with email, subject, message and reCAPTCHA.
  • App: Short form with auto-submit to email or Firebase.
  • Keywords: emailjs, netlify-forms, react-native-email

📊 Dashboard / Analytics

  • Web: KPI cards + charts (bar, pie, line) — responsive layout.
  • App: Collapsible sections with performance indicators.
  • Keywords: recharts, victory-native, chart.js

❓ FAQ / Help Page

  • Web: Accordion-based Q&A list.
  • App: Expandable list with icons.
  • Keywords: react-accessible-accordion, SectionList

🔧 Settings Page

  • Web: Tabs for Profile, Password, Notifications.
  • App: Switch toggles and modals for user preferences.
  • Keywords: react-tabs, react-native-settings-ui

🚫 404 Not Found

  • Web: Branded error message with navigation links.
  • App: Toast message and back navigation.
  • Keywords: useLocation, react-navigation goBack()

📄 Static Content (Terms, About, Privacy)

  • Web: Markdown-rendered pages using MDX or CMS.
  • App: Scrollable HTML viewer with link support.
  • Keywords: react-markdown, react-native-render-html

🔄 Splash / Loading Screen

  • Web: Centered logo + spinner.
  • App: Animated splash with Lottie.
  • Keywords: react-loader-spinner, lottie-react-native

💬 Chat / Support Page

  • Web: Live chat box, message bubbles with timestamps.
  • App: Scrollable message list with input field and emoji picker.
  • Keywords: react-chat-widget, react-native-gifted-chat

📍 Location / Map Page

  • Web: Google Maps with marker and info window.
  • App: GPS + Maps view using native map SDKs.
  • Keywords: @react-google-maps/api, react-native-maps

📸 Gallery / Media Viewer

  • Web: Lightbox gallery with zoom support.
  • App: Full-screen swipeable image viewer.
  • Keywords: react-image-gallery, react-native-image-viewing

Want ready-to-copy template code? Just ask and I’ll share GitHub-ready boilerplates for each use case.