Remix starter kit with Tailwind CSS family of libraries: Headless UI, Radix UI, VechaiUI, daisyUI, and more

Last update: Dec 18, 2022

Overview

Remix Tailwind Starter Kit

Remix starter kit with Tailwind CSS v3 family of libraries.

Example demo to combine the best Tailwind-related ecosystem such as Tailwind CSS, Headless UI, Radix UI, VechaiUI, Flowbite, daisyUI, and more.

Preview: remix-tailwind-starter-kit.vercel.app

Stack

Core
- React v17
- Remix v1
- TypeScript v4
Frontend
- Tailwind CSS v3
- PostCSS v8
- Heroicons v1
- Headless UI v1 — Unstyled accessible UI components
- Radix UI v0 — Unstyled accessible UI components
- VechaiUI v0 — React Tailwind CSS components
  - Fully featured React component
- Flowbite v1 — Tailwind CSS components
  - Only to get the class names
- daisyUI v2 — Tailwind CSS components
  - Unused if using VechaiUI
Config
- ESLint v8
- Prettier v2
- Vercel

Development

To run your Remix app locally, make sure your project's local dependencies are installed:

npm install

Afterwards, start the Remix development server like so:

npm run dev

Open up http://localhost:3000 and you should be ready to go!

If you're used to using the vercel dev command provided by Vercel CLI instead, you can also use that, but it's not needed.

Deployment

After having run the create-remix command and selected "Vercel" as a deployment target, you only need to import your Git repository into Vercel, and it will be deployed.

If you'd like to avoid using a Git repository, you can also deploy the directory by running Vercel CLI:

npm i -g vercel
vercel

It is generally recommended to use a Git repository, because future commits will then automatically be deployed by Vercel, through its Git Integration.

Comments

build(deps): bump loader-utils from 2.0.2 to 2.0.3
Bumps loader-utils from 2.0.2 to 2.0.3.

Release notes

Sourced from loader-utils's releases.

v2.0.3

2.0.3 (2022-10-20)

Bug Fixes

security: prototype pollution exploit (#217) (a93cf6f)

Changelog

Sourced from loader-utils's changelog.

2.0.3 (2022-10-20)

Bug Fixes

security: prototype pollution exploit (#217) (a93cf6f)

Commits

7162619 chore(release): 2.0.3

a93cf6f fix(security): prototype polution exploit (#217)

90c7c4b chore(release): 2.0.2

8c2d24e fix: base64 generation and unicode characters (#197)

See full diff in compare view

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

Dependabot commands and options

You can trigger Dependabot actions by commenting on this PR:

@dependabot rebase will rebase this PR

@dependabot recreate will recreate this PR, overwriting any edits that have been made to it

@dependabot merge will merge this PR after your CI passes on it

@dependabot squash and merge will squash and merge this PR after your CI passes on it

@dependabot cancel merge will cancel a previously requested merge and block automerging

@dependabot reopen will reopen this PR if it is closed

@dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually

@dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)

@dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)

@dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)

@dependabot use these labels will set the current labels as the default for future PRs for this repo and language

@dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language

@dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language

@dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

You can disable automated security fix PRs for this repo from the Security Alerts page.

dependencies
opened by dependabot[bot] 2
Implement advanced code block for syntax highlight with Markdoc and Prism.js
Separate Markdoc client and server functions

New code blocks component

Prism.js in a separata Fence component in Markdoc lib

Render code block from either Markdown or GraphCMS raw AST

enhancement
opened by mhaidarhanif 1
[ImgBot] Optimize images

Beep boop. Your images are optimized!

Your image file size has been reduced by 37% 🎉

Details

| File | Before | After | Percent reduction | |:--|:--|:--|:--| | /public/assets/screenshots/home-dark.png | 127.29kb | 80.64kb | 36.65% | | /public/assets/screenshots/home-light.png | 125.68kb | 79.95kb | 36.38% | | | | | | | Total : | 252.97kb | 160.59kb | 36.52% |

📝 docs | :octocat: repo | 🙋🏾 issues | 🏪 marketplace

~Imgbot - Part of Optimole family

opened by imgbot[bot] 1
Let's try Rewinds

Improve documentation

Link

Add a link to the page which needs improvement (if relevant)

Describe the problem

Is the documentation missing? Or is it confusing? Why is it confusing?

Describe the improvement

A clear and concise description of the improvement.

Additional context

Add any other context or screenshots that help clarify your question.
documentation

opened by mhaidarhanif 0
build(deps): bump decode-uri-component from 0.2.0 to 0.2.2
Bumps decode-uri-component from 0.2.0 to 0.2.2.

Release notes

Sourced from decode-uri-component's releases.

v0.2.2

Prevent overwriting previously decoded tokens 980e0bf

https://github.com/SamVerschueren/decode-uri-component/compare/v0.2.1...v0.2.2

v0.2.1

Switch to GitHub workflows 76abc93

Fix issue where decode throws - fixes #6 746ca5d

Update license (#1) 486d7e2

Tidelift tasks a650457

Meta tweaks 66e1c28

https://github.com/SamVerschueren/decode-uri-component/compare/v0.2.0...v0.2.1

Commits

a0eea46 0.2.2

980e0bf Prevent overwriting previously decoded tokens

3c8a373 0.2.1

76abc93 Switch to GitHub workflows

746ca5d Fix issue where decode throws - fixes #6

486d7e2 Update license (#1)

a650457 Tidelift tasks

66e1c28 Meta tweaks

See full diff in compare view

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

Dependabot commands and options

You can trigger Dependabot actions by commenting on this PR:

@dependabot rebase will rebase this PR

@dependabot recreate will recreate this PR, overwriting any edits that have been made to it

@dependabot merge will merge this PR after your CI passes on it

@dependabot squash and merge will squash and merge this PR after your CI passes on it

@dependabot cancel merge will cancel a previously requested merge and block automerging

@dependabot reopen will reopen this PR if it is closed

@dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually

@dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)

@dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)

@dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)

@dependabot use these labels will set the current labels as the default for future PRs for this repo and language

@dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language

@dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language

@dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

You can disable automated security fix PRs for this repo from the Security Alerts page.

dependencies
opened by dependabot[bot] 1
build(deps): bump loader-utils from 2.0.2 to 2.0.4
Bumps loader-utils from 2.0.2 to 2.0.4.

Release notes

Sourced from loader-utils's releases.

v2.0.4

2.0.4 (2022-11-11)

Bug Fixes

ReDoS problem (#225) (ac09944)

v2.0.3

2.0.3 (2022-10-20)

Bug Fixes

security: prototype pollution exploit (#217) (a93cf6f)

Changelog

Sourced from loader-utils's changelog.

2.0.4 (2022-11-11)

Bug Fixes

ReDoS problem (#225) (ac09944)

2.0.3 (2022-10-20)

Bug Fixes

security: prototype pollution exploit (#217) (a93cf6f)

Commits

6688b50 chore(release): 2.0.4

ac09944 fix: ReDoS problem (#225)

7162619 chore(release): 2.0.3

a93cf6f fix(security): prototype polution exploit (#217)

90c7c4b chore(release): 2.0.2

8c2d24e fix: base64 generation and unicode characters (#197)

See full diff in compare view

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

Dependabot commands and options

You can trigger Dependabot actions by commenting on this PR:

@dependabot rebase will rebase this PR

@dependabot recreate will recreate this PR, overwriting any edits that have been made to it

@dependabot merge will merge this PR after your CI passes on it

@dependabot squash and merge will squash and merge this PR after your CI passes on it

@dependabot cancel merge will cancel a previously requested merge and block automerging

@dependabot reopen will reopen this PR if it is closed

@dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually

@dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)

@dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)

@dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)

@dependabot use these labels will set the current labels as the default for future PRs for this repo and language

@dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language

@dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language

@dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

You can disable automated security fix PRs for this repo from the Security Alerts page.

dependencies
opened by dependabot[bot] 1
build(deps): bump got from 11.8.3 to 11.8.5
Bumps got from 11.8.3 to 11.8.5.

Release notes

Sourced from got's releases.

v11.8.5

Backport security fix https://github.com/sindresorhus/got/commit/861ccd9ac2237df762a9e2beed7edd88c60782dc

CVE-2022-33987

https://github.com/sindresorhus/got/compare/v11.8.4...v11.8.5

Commits

5e17bb7 11.8.5

bce8ce7 Backport 861ccd9ac2237df762a9e2beed7edd88c60782dc

8ced192 Fix build

670eb04 11.8.4

20f29fe Backport #1543: Initialize globalResponse in case of ignored HTTPError (#2017)

See full diff in compare view

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

Dependabot commands and options

You can trigger Dependabot actions by commenting on this PR:

@dependabot rebase will rebase this PR

@dependabot recreate will recreate this PR, overwriting any edits that have been made to it

@dependabot merge will merge this PR after your CI passes on it

@dependabot squash and merge will squash and merge this PR after your CI passes on it

@dependabot cancel merge will cancel a previously requested merge and block automerging

@dependabot reopen will reopen this PR if it is closed

@dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually

@dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)

@dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)

@dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)

@dependabot use these labels will set the current labels as the default for future PRs for this repo and language

@dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language

@dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language

@dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

You can disable automated security fix PRs for this repo from the Security Alerts page.

dependencies
opened by dependabot[bot] 1

Owner

M Haidar Hanif

Educator + Developer 😎 Helping people in web development, interface design, software engineering, modern career, and professional life

GitHub https://remix-tailwind-starter-kit.vercel.app

chakra-radix-colors provides radix-ui color palettes, automatic dark mode, and acessible colors to chakra-ui applications

chakra-radix-colors chakra-radix-colors provides radix-ui color palettes, automatic dark mode, and acessible colors to chakra-ui applications. About C

11 Dec 30, 2022

Remix Stack for deploying to Vercel with remix-auth, Planetscale, Radix UI, TailwindCSS, formatting, linting etc. Written in Typescript.

Remix Synthwave Stack Learn more about Remix Stacks. npx create-remix --template ilangorajagopal/synthwave-stack What's in the stack Vercel deploymen

56 Dec 25, 2022

This is a blog built with sveltekit, tailwind and daisyUI, made to be used as my personal blog.

svelte-blogger This is a blog built with sveltekit, tailwind and daisyUI, made to be used as my personal blog. This app also use graphql and use markd

6 Jun 23, 2022

一个运行在浏览器内的提词器，可翻页，可变速，可自定义字体、大小、颜色等多种选项 A teleprompter in web browser, page down, speed up , custom font family/size/color and more.

Introduction 一个运行在浏览器内的提词器，可翻页，可变速，可自定义字体、大小、颜色等多种选项 A teleprompter in web browser, page down, speed up , custom font family/size/color and more. inst

19 Aug 17, 2021

Node-cli-starter - Basic starter kit for building Node CLI applications with TypeScript.

node-cli-starter Minimal starter kit for building Node CLI applications with TypeScript. Getting Started To get started clone repo locally and run npm

7 May 17, 2022

Remix enables you to build fantastic user experiences for the web and feel happy with the code that got you there. In this workshop, we'll look at some more advanced use cases when building Remix applications.

?? Advanced Remix Workshop Remix enables you to build fantastic user experiences for the web and feel happy with the code that got you there. In this

167 Dec 9, 2022

Web UI kit following simply superb.'s design system, based on Tailwind CSS.

ui-kit TailwindCSS powered UI kit following simply superb.'s design system. ➡️ Demo available here Why I am building few applications (iOS / Android /

8 Mar 4, 2022

Get started on Remix with TypeScript and Tailwind CSS in seconds

remix-typescript-tailwind-quickstart Get started on Remix with TypeScript and Tailwind CSS in seconds. This is an example setup of Remix building on t

12 Mar 16, 2022

Ready-to-use Remix + Tailwind CSS routes and components.

remix-blocks What is RemixBlocks? Ready-to-use Remix + Tailwind CSS routes, and UI components, all blocks: Are full-stack routes. Are independent of e

111 Jan 5, 2023

Planning a getaway with family or friends and looking for a trip planner app to help you figure out the logistics?

Never-Wavering-Wayfaring-Wanderlust-Adventure-Planner Planning a getaway with family or friends and looking for a trip planner app to help you figure

3 Jun 15, 2022

A task board is considered to be one of the most successful tools for teamwork. Whether it's for work, a side project or even the next family vacation, we helps your team stay organized.We've got the flexibility and featuresto fit any team's style.

TaskBoard !Important! The project is in its initial stage. In the near future I'll be adding new features and upgrading the old ones to be more optima

2 Oct 11, 2022

A Leaderboard to keep track of your personal records or family's game

Leaderboard A Leaderboard to keep track of your personal records or family's game scores Built With HTML CSS Javascript Live Demo Live demo Mobile Tab

11 Mar 22, 2022

A self-hosted eBooks Library for your family or yourself.

What is BookStairs? BookStairs is an open-source personal EPUB library which was highly inspired by talebook, calibre-web and BookBrowser. It's design

5 Dec 29, 2022

A site displaying Rice University's O-week family tree .

This is a Next.js project bootstrapped with create-next-app. Getting Started First, run the development server: npm run dev # or yarn dev Open http://

7 Dec 5, 2022

A starter project that includes theme switching functionality with Stitches CSS-in-JS and Remix SSR.

Welcome to Remix! Remix Docs Development From your terminal: npm run dev This starts your app in development mode, rebuilding assets on file changes.

13 Dec 22, 2022

🚀 A web extension starter built with React, Typescript, and Tailwind CSS. Build once, and run on multiple browsers: Google Chrome, Mozilla Firefox, Microsoft Edge, Brave, and Opera..

Web Extension Starter A web extension starter, built with React, Typescript, and Tailwind CSS. Build once, and run on multiple browsers: Google Chrome

BCIT Design & Development Club (BCIT-DDC)

28 Dec 28, 2022

Remix starter kit with Tailwind CSS family of libraries: Headless UI, Radix UI, VechaiUI, daisyUI, and more

Related tags

Overview

Remix Tailwind Starter Kit

Stack

Development

Deployment

Comments

build(deps): bump loader-utils from 2.0.2 to 2.0.3

v2.0.3

2.0.3 (2022-10-20)

Bug Fixes

2.0.3 (2022-10-20)

Bug Fixes

Implement advanced code block for syntax highlight with Markdoc and Prism.js

[ImgBot] Optimize images

Beep boop. Your images are optimized!

Let's try Rewinds

Improve documentation

Link

Describe the problem

Describe the improvement

Additional context

build(deps): bump decode-uri-component from 0.2.0 to 0.2.2

v0.2.2

v0.2.1

build(deps): bump loader-utils from 2.0.2 to 2.0.4

v2.0.4

2.0.4 (2022-11-11)

Bug Fixes

v2.0.3

2.0.3 (2022-10-20)

Bug Fixes

2.0.4 (2022-11-11)

Bug Fixes

2.0.3 (2022-10-20)

Bug Fixes

build(deps): bump got from 11.8.3 to 11.8.5

v11.8.5

Owner

M Haidar Hanif

chakra-radix-colors provides radix-ui color palettes, automatic dark mode, and acessible colors to chakra-ui applications

Remix Stack for deploying to Vercel with remix-auth, Planetscale, Radix UI, TailwindCSS, formatting, linting etc. Written in Typescript.

This is a blog built with sveltekit, tailwind and daisyUI, made to be used as my personal blog.

一个运行在浏览器内的提词器，可翻页，可变速，可自定义字体、大小、颜色等多种选项 A teleprompter in web browser, page down, speed up , custom font family/size/color and more.

Node-cli-starter - Basic starter kit for building Node CLI applications with TypeScript.

Remix enables you to build fantastic user experiences for the web and feel happy with the code that got you there. In this workshop, we'll look at some more advanced use cases when building Remix applications.

Web UI kit following simply superb.'s design system, based on Tailwind CSS.

Get started on Remix with TypeScript and Tailwind CSS in seconds

Ready-to-use Remix + Tailwind CSS routes and components.

Planning a getaway with family or friends and looking for a trip planner app to help you figure out the logistics?

A task board is considered to be one of the most successful tools for teamwork. Whether it's for work, a side project or even the next family vacation, we helps your team stay organized.We've got the flexibility and featuresto fit any team's style.

A Leaderboard to keep track of your personal records or family's game

A self-hosted eBooks Library for your family or yourself.

A site displaying Rice University's O-week family tree .

A starter project that includes theme switching functionality with Stitches CSS-in-JS and Remix SSR.

🚀 A web extension starter built with React, Typescript, and Tailwind CSS. Build once, and run on multiple browsers: Google Chrome, Mozilla Firefox, Microsoft Edge, Brave, and Opera..

Starter template for a personal website blog, built with Next.js, MDX, and Tailwind CSS.

Simple starter for SvelteKit with Tailwind CSS already set up and ready to go.

starter kit for interacting with zora api, protocol, and creator toolkit