Introducing Rewinds

Rewinds is a frontend-focused Remix starter kit with Tailwind CSS family of libraries. It is a demo project template you can freely use for any purpose.

MH
M Haidar Hanif

The goal is to have several examples and demos to combine the best Tailwind-related ecosystem such as Tailwind CSS v3, Headless UI, Radix UI, Reach UI, Vechai UI, and more. We also encourage the accessibility guidelines. So keep in mind this is not intended towards simplicity, rather to collect as much as design practices as it can. Focusing more on the styling only instead of the integration with backend, database, and testing.

⚠️ The repo is ongoing active development so thing might quickly change at the moment.

Links

What's inside

More into what we can do or what you get. The complete features are listed in the about page. While the complete examples are listed in the examples page.

  1. Remix as the web framework
  2. React as the UI library
  3. TypeScript as the programming language
  4. Tailwind CSS using Vechai UI as the base components
  5. Multiple themes switcher and persist theme with a session cookie
  6. Commonly used pages/routes with contents
  7. Ready to use components that highly customizable
  8. Form submission with either Remix Form or React Hook Form
  9. Data fetching with REST API or GraphQL
  10. Nested routes use cases
  11. Only focus on the frontend styling and project structure, without particular in testing and database
    1. Just a bit of backend integration through Remix loader
    2. For the full stack integration with database and testing, check out the official Remix Stacks instead: https://remix.run/stacks
  12. Designed for large-scale and long term development
⚠ Make sure to not using React v18 yet as there's an issue with Tailwind CSS and Vechai UI.

Development

Clone repo

Click Use this template button.

git clone https://github.com/mhaidarhanif/rewinds rewinds-project
npx degit https://github.com/mhaidarhanif/rewinds rewinds-project