React Templates & Themes Logo React Templates & Themes
Rewinds Legacy screenshot

Rewinds Legacy

Author Avatar Theme by Mhaidarhanif
Updated: 8 Apr 2023
94 Stars

The Remix Stack with Tailwind - New repo: https://github.com/mhaidarhanif/rewinds

Github Live Preview

Categories

Remix Tailwind Headless ui Radix ui

Overview:

Rewinds is a Remix starter kit that combines various Tailwind CSS libraries, including Tailwind CSS v3, Headless UI, Radix UI, Reach UI, and Vechai UI. This repo is designed to be flexible and cover a wide range of use cases for different projects. It offers features such as multiple themes, ready-to-use components, form submission options, data fetching with REST API or GraphQL, and nested routes. While it primarily focuses on frontend styling and project structure, it also includes some backend integration through Remix loader for REST API and GraphQL.

Features:

  • Remix as the web framework
  • React as the UI library
  • TypeScript as the programming language
  • Absolute import for easy navigation
  • Auto order import with Prettier and ESLint
  • Tailwind CSS using Vechai UI as the base components
  • Examples that use Headless UI and Radix UI
  • Multiple theme switcher with session cookie persistence
  • Commonly used pages/routes with contents
  • Highly customizable ready-to-use components
  • Form submission with either Remix Form or React Hook Form
  • Data fetching with REST API or GraphQL
  • Nested route usage
  • VS Code recommended settings, extensions, and snippets
  • GitHub template for issues and pull requests

Installation:

To install the Rewinds starter kit, follow these steps:

  1. Clone the project repository: git clone https://github.com/mhaidarhanif/rewinds.git
  2. Install the required dependencies: npm install
  3. Set up the environment variables on Vercel or your chosen deployment target.
  4. Deploy the project using Vercel or your desired method.

Summary:

Rewinds is a Remix starter kit that leverages the Tailwind CSS ecosystem. It offers a comprehensive set of features and components to support flexible and customizable web development. With its integration of various libraries and flexibility in use cases, Rewinds provides a solid foundation for building modern web applications.