What is it, links, features, and stacks

Rewinds is a Remix starter kit with Tailwind family of libraries. It is a demo project template you can freely use for any purpose. On GitHub, you can directly use this template as your own repo. Made by M Haidar Hanif (@mhaidarhanif) from Catamyst.

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.

For recommended and alternative stack selections, they are mostly listed and detailed in the Catamyst Stack documentation.

Try clicking the images below to change the theme

Screenshot Home LightScreenshot Home Dark



  • TypeScript for type-safety
  • Remix as the React framework
  • Tailwind CSS as the styling framework
  • Headless UI, Radix UI, Reach UI, and more for accessible unstyled components
  • Vechai UI as the base components, with theme switcher and session cookie persistence
  • NProgress navigation loading bar indicator
  • ENV setup for frontend library such as chat and analytics

Main Stacks

The list of the main libraries and tools. Used as dependencies.

  • TypeScriptStrongly typed programming language that builds on JavaScript, giving you better tooling at any scale.
  • Node.jsJavaScript runtime built on Chrome's V8 JavaScript engine.
  • RemixFull stack web framework that lets you focus on the user interface and work back through web standards to deliver a fast, slick, and resilient user experience.
  • Tailwind CSS v3Utility-first CSS framework
    • @tailwindcss/typography
    • @tailwindcss/forms
    • @tailwindcss/line-clamp
  • PostCSS v8Tool for transforming CSS with JavaScript
  • React Icons v1SVG React icons of popular icon packs using ES6 imports. Such as Font Awesome, Heroicons, Material Design icons, and more.
  • Heroicons v1Beautiful hand-crafted SVG icons
  • Headless UI v1Completely unstyled, fully accessible UI components, designed to integrate beautifully with Tailwind CSS.
  • Radix UI v0Unstyled, accessible components for building high‑quality design systems and web apps in React.
    • Tailwind CSS RadixTailwind CSS utilities and variants for styling Radix state
    • @radix-ui/react-icons
  • Reach UI v0Accessible foundation of your React-based design system.
  • Vechai UI v0React Tailwind CSS components
  • DownshiftPrimitives to build simple, flexible, WAI-ARIA compliant React autocomplete, combobox, or select dropdown components.
  • React Aria v3Library of React Hooks that provides accessible UI primitives for your design system
  • Ariakit (v2)Toolkit for building accessible web apps with React
    • ReakitToolkit for building accessible UIs
  • React Hook FormPerformant, flexible and extensible forms with easy-to-use validation.
  • React LazyloadLazyload your components, images, or anything matters the performance.
  • TanStackHeadless, type-safe, powerful utilities for complex workflows like Data Management, Data Visualization, Charts, Tables, and UI Components.
  • Google FontsMaking the web more beautiful, fast, and open through great typography.
    • fontbit.ioSimple and privacy-friendly Google Fonts proxy.
  • MarkdocPowerful, flexible, Markdown-based authoring framework.
  • Prism.jsLightweight, extensible syntax highlighter, built with modern web standards in mind.
  • PrettierOpinionated Code Formatter
    • prettier-plugin-tailwindcssA Prettier plugin for Tailwind CSS v3.0+ that automatically sorts classes based on our recommended class order.
    • Pre-commit Hook with PrettierYou can use Prettier with a pre-commit tool. This can re-format your files that are marked as `staged` via `git add` before you commit.
  • ESLint v8Find and fix problems in your JavaScript code. Plugable JavaScript/TypeScript linter.
  • Stylelint v14Mighty, modern linter that helps you avoid errors and enforce conventions in your styles.
  • commitlintLint commit messages.
  • Husky Git hooksModern native git hooks made easy
  • lint-stagedRun linters against staged git files and don't let 💩 slip into your code base!

Reference Stacks

The list of the references for UI and component styling. Not used as dependencies, only for inspirations or the code itself can just be copied.

If you need more resources, check out awesome-tailwindcss