Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/tommyjepsen/twblocks

Website blocks to copy/paste - based on shadcn & Radix using Tailwind and NextJS
https://github.com/tommyjepsen/twblocks

blocks nextjs react shadcn-ui tailwindcss typescript

Last synced: 15 days ago
JSON representation

Website blocks to copy/paste - based on shadcn & Radix using Tailwind and NextJS

Host: GitHub
URL: https://github.com/tommyjepsen/twblocks
Owner: tommyjepsen
License: mit
Created: 2024-04-06T10:50:28.000Z (8 months ago)
Default Branch: main
Last Pushed: 2024-04-09T18:44:25.000Z (8 months ago)
Last Synced: 2024-04-10T00:49:17.026Z (8 months ago)
Topics: blocks, nextjs, react, shadcn-ui, tailwindcss, typescript
Language: TypeScript
Homepage: https://twblocks.com
Size: 7.44 MB
Stars: 29
Watchers: 1
Forks: 3
Open Issues: 0
Metadata Files:
- Readme: README.md
- License: LICENSE

Awesome Lists containing this project

awesome-shadcn-ui - twblocks - Website blocks to copy/paste - based on shadcn & Radix using Tailwind and NextJS (Libs and Components)

README

        # TWBlocks

Free open-source website blocks you can easily copy & paste into your react projects.

I strongly recommend you install shadcn in your project before starting to use these blocks. You can find the installation guide here [shadcn installation](https://ui.shadcn.com/docs/installation) ✌️

You can use shadcn [Themes](https://ui.shadcn.com/themes) to customize the styling.

It works for both dark- and light mode. You can find installation guide to how to toggle and enable the different modes here on shadcn [Dark mode](https://ui.shadcn.com/docs/dark-mode).

## Blocks

Go to /blocks to find the block you need and simply copy/paste it into your project. Then see which dependencies it has to shadcn-ui, and install them.

Here is a list of available blocks:



  •  Headers

  •  Heroes

  •  Cases

  •  Feature

  •  CTAs

  •  Stats

  •  Pricing

  •  FAQs

  •  Blogs

  •  Contacts

  •  Footers



---

| Type         | Version Light                                                                               | Version Dark                                                                                         |

| ------------ | ------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------- |

| **Headers**  | ![Header1](https://github.com/tommyjepsen/twblocks/blob/main/public/header1.png?raw=true)   | ![Header1](https://github.com/tommyjepsen/twblocks/blob/main/public/darkmode-header1.png?raw=true)   |

| **Heroes**   | ![Hero1](https://github.com/tommyjepsen/twblocks/blob/main/public/hero1.png?raw=true)       | ![Hero1](https://github.com/tommyjepsen/twblocks/blob/main/public/darkmode-hero1.png?raw=true)       |

| **Heroes**   | ![Hero2](https://github.com/tommyjepsen/twblocks/blob/main/public/hero2.png?raw=true)       | ![Hero2](https://github.com/tommyjepsen/twblocks/blob/main/public/darkmode-hero2.png?raw=true)       |

| **Heroes**   | ![Hero3](https://github.com/tommyjepsen/twblocks/blob/main/public/hero3.png?raw=true)       | ![Hero3](https://github.com/tommyjepsen/twblocks/blob/main/public/darkmode-hero3.png?raw=true)       |

| **Heroes**   | ![Hero4](https://github.com/tommyjepsen/twblocks/blob/main/public/hero4.png?raw=true)       | ![Hero4](https://github.com/tommyjepsen/twblocks/blob/main/public/darkmode-hero4.png?raw=true)       |

| **Heroes**   | ![Hero5](https://github.com/tommyjepsen/twblocks/blob/main/public/hero5.png?raw=true)       | ![Hero4](https://github.com/tommyjepsen/twblocks/blob/main/public/darkmode-hero5.png?raw=true)       |

| **Cases**    | ![Case1](https://github.com/tommyjepsen/twblocks/blob/main/public/case1.png?raw=true)       | ![Case1](https://github.com/tommyjepsen/twblocks/blob/main/public/darkmode-case1.png?raw=true)       |

| **Cases**    | ![Case2](https://github.com/tommyjepsen/twblocks/blob/main/public/case2.png?raw=true)       | ![Case2](https://github.com/tommyjepsen/twblocks/blob/main/public/darkmode-case2.png?raw=true)       |

| **Features** | ![Feature1](https://github.com/tommyjepsen/twblocks/blob/main/public/feature1.png?raw=true) | ![Feature1](https://github.com/tommyjepsen/twblocks/blob/main/public/darkmode-feature1.png?raw=true) |

| **Features** | ![Feature2](https://github.com/tommyjepsen/twblocks/blob/main/public/feature2.png?raw=true) | ![Feature2](https://github.com/tommyjepsen/twblocks/blob/main/public/darkmode-feature2.png?raw=true) |

| **Features** | ![Feature3](https://github.com/tommyjepsen/twblocks/blob/main/public/feature3.png?raw=true) | ![Feature3](https://github.com/tommyjepsen/twblocks/blob/main/public/darkmode-feature3.png?raw=true) |

| **Features** | ![Feature4](https://github.com/tommyjepsen/twblocks/blob/main/public/feature4.png?raw=true) | ![Feature4](https://github.com/tommyjepsen/twblocks/blob/main/public/darkmode-feature4.png?raw=true) |

| **Features** | ![Feature5](https://github.com/tommyjepsen/twblocks/blob/main/public/feature5.png?raw=true) | ![Feature5](https://github.com/tommyjepsen/twblocks/blob/main/public/darkmode-feature5.png?raw=true) |

| **Features** | ![Feature6](https://github.com/tommyjepsen/twblocks/blob/main/public/feature6.png?raw=true) | ![Feature6](https://github.com/tommyjepsen/twblocks/blob/main/public/darkmode-feature6.png?raw=true) |

| **Features** | ![Feature7](https://github.com/tommyjepsen/twblocks/blob/main/public/feature7.png?raw=true) | ![Feature7](https://github.com/tommyjepsen/twblocks/blob/main/public/darkmode-feature7.png?raw=true) |

| **Features** | ![Feature8](https://github.com/tommyjepsen/twblocks/blob/main/public/feature8.png?raw=true) | ![Feature8](https://github.com/tommyjepsen/twblocks/blob/main/public/darkmode-feature8.png?raw=true) |

| **Features** | ![Feature9](https://github.com/tommyjepsen/twblocks/blob/main/public/feature9.png?raw=true) | ![Feature8](https://github.com/tommyjepsen/twblocks/blob/main/public/darkmode-feature9.png?raw=true) |

| **CTAs**     | ![CTA1](https://github.com/tommyjepsen/twblocks/blob/main/public/cta1.png?raw=true)         | ![CTA1](https://github.com/tommyjepsen/twblocks/blob/main/public/darkmode-cta1.png?raw=true)         |

| **CTAs**     | ![CTA2](https://github.com/tommyjepsen/twblocks/blob/main/public/cta2.png?raw=true)         | ![CTA2](https://github.com/tommyjepsen/twblocks/blob/main/public/darkmode-cta2.png?raw=true)         |

| **Stats**    | ![Stats1](https://github.com/tommyjepsen/twblocks/blob/main/public/stats1.png?raw=true)     | ![Stats1](https://github.com/tommyjepsen/twblocks/blob/main/public/darkmode-stats1.png?raw=true)     |

| **Stats**    | ![Stats2](https://github.com/tommyjepsen/twblocks/blob/main/public/stats2.png?raw=true)     | ![Stats2](https://github.com/tommyjepsen/twblocks/blob/main/public/darkmode-stats2.png?raw=true)     |

| **Pricing**  | ![Pricing1](https://github.com/tommyjepsen/twblocks/blob/main/public/pricing1.png?raw=true) | ![Pricing1](https://github.com/tommyjepsen/twblocks/blob/main/public/darkmode-pricing1.png?raw=true) |

| **Pricing**  | ![Pricing2](https://github.com/tommyjepsen/twblocks/blob/main/public/pricing2.png?raw=true) | ![Pricing2](https://github.com/tommyjepsen/twblocks/blob/main/public/darkmode-pricing2.png?raw=true) |

| **FAQs**     | ![FAQ1](https://github.com/tommyjepsen/twblocks/blob/main/public/faq1.png?raw=true)         | ![FAQ1](https://github.com/tommyjepsen/twblocks/blob/main/public/darkmode-faq1.png?raw=true)         |

| **FAQs**     | ![FAQ2](https://github.com/tommyjepsen/twblocks/blob/main/public/faq2.png?raw=true)         | ![FAQ2](https://github.com/tommyjepsen/twblocks/blob/main/public/darkmode-faq2.png?raw=true)         |

| **Blogs**    | ![Blog1](https://github.com/tommyjepsen/twblocks/blob/main/public/blog1.png?raw=true)       | ![Blog1](https://github.com/tommyjepsen/twblocks/blob/main/public/darkmode-blog1.png?raw=true)       |

| **Blogs**    | ![Blog2](https://github.com/tommyjepsen/twblocks/blob/main/public/blog2.png?raw=true)       | ![Blog2](https://github.com/tommyjepsen/twblocks/blob/main/public/darkmode-blog2.png?raw=true)       |

| **Contacts** | ![Contact1](https://github.com/tommyjepsen/twblocks/blob/main/public/contact1.png?raw=true) | ![Contact1](https://github.com/tommyjepsen/twblocks/blob/main/public/darkmode-contact1.png?raw=true) |

| **Footers**  | ![Footer1](https://github.com/tommyjepsen/twblocks/blob/main/public/footer1.png?raw=true)   | ![Footer1](https://github.com/tommyjepsen/twblocks/blob/main/public/darkmode-footer1.png?raw=true)   |