# 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:

<div align=center style="font-weight:bold;">
  •  Headers
  •  Heroes
  •  Cases
  •  Feature
  •  CTAs
  •  Stats
  •  Pricing
  •  FAQs
  •  Blogs
  •  Contacts
  •  Footers
</div>

---

| 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)   |
