About

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

Links

Features

  • 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.

  • TypeScript — Strongly typed programming language that builds on JavaScript, giving you better tooling at any scale.
  • Node.js — JavaScript runtime built on Chrome's V8 JavaScript engine.
  • Remix — Full 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 v3 — Utility-first CSS framework
    • @tailwindcss/typography
    • @tailwindcss/forms
    • @tailwindcss/line-clamp
  • PostCSS v8 — Tool for transforming CSS with JavaScript
  • React Icons v1 — SVG React icons of popular icon packs using ES6 imports. Such as Font Awesome, Heroicons, Material Design icons, and more.
  • Heroicons v1 — Beautiful hand-crafted SVG icons
  • Headless UI v1 — Completely unstyled, fully accessible UI components, designed to integrate beautifully with Tailwind CSS.
  • Radix UI v0 — Unstyled, accessible components for building high‑quality design systems and web apps in React.
    • Tailwind CSS Radix — Tailwind CSS utilities and variants for styling Radix state
    • @radix-ui/react-icons
  • Reach UI v0 — Accessible foundation of your React-based design system.
  • Vechai UI v0 — React Tailwind CSS components
  • Downshift — Primitives to build simple, flexible, WAI-ARIA compliant React autocomplete, combobox, or select dropdown components.
  • React Aria v3 — Library of React Hooks that provides accessible UI primitives for your design system
  • Ariakit (v2) — Toolkit for building accessible web apps with React
    • Reakit — Toolkit for building accessible UIs
  • React Hook Form — Performant, flexible and extensible forms with easy-to-use validation.
  • React Lazyload — Lazyload your components, images, or anything matters the performance.
  • TanStack — Headless, type-safe, powerful utilities for complex workflows like Data Management, Data Visualization, Charts, Tables, and UI Components.
  • Google Fonts — Making the web more beautiful, fast, and open through great typography.
    • fontbit.io — Simple and privacy-friendly Google Fonts proxy.
  • Markdoc — Powerful, flexible, Markdown-based authoring framework.
  • Prism.js — Lightweight, extensible syntax highlighter, built with modern web standards in mind.
  • Prettier — Opinionated Code Formatter
    • prettier-plugin-tailwindcss — A Prettier plugin for Tailwind CSS v3.0+ that automatically sorts classes based on our recommended class order.
    • Pre-commit Hook with Prettier — You 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 v8 — Find and fix problems in your JavaScript code. Plugable JavaScript/TypeScript linter.
  • Stylelint v14 — Mighty, modern linter that helps you avoid errors and enforce conventions in your styles.
  • commitlint — Lint commit messages.
  • Husky Git hooks — Modern native git hooks made easy
  • lint-staged — Run 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