More Premium Hugo Themes Premium Tailwind Themes

TWBlocks

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

TWBlocks

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

Author Avatar Theme by tommyjepsen
Github Stars Github Stars: 695
Last Commit Last Commit: Jan 6, 2025 -
First Commit Created: Aug 27, 2024 -
default image

Overview

TWBlocksFree is an open-source collection of website blocks designed for React projects. Users can easily copy and paste these blocks into their projects for quick integration. The theme supports both dark and light modes, and it is recommended to install shadcn before using the blocks for customization purposes.

Features

  • Customizable Themes: Users can customize the styling of the blocks using shadcn themes.
  • Light and Dark Mode Support: The blocks are compatible with both light and dark modes.
  • Variety of Blocks: TWBlocksFree offers a range of blocks including headers, heroes, cases, features, CTAs, stats, pricing, FAQs, blogs, contacts, and footers.

Installation

To install TWBlocksFree and start using the blocks in your React project, follow these steps:

  1. Install shadcn in your project.

    npm install shadcn
    
  2. Copy and paste the desired block from the /blocks directory of TWBlocksFree into your project.

  3. Check for any dependencies the block may have on shadcn-ui and install them.

    npm install shadcn-ui
    
  4. Toggle between light and dark modes by following the installation guide provided on shadcn’s website.

Summary

TWBlocksFree is a convenient resource for React developers looking to enhance their projects with pre-designed website blocks. By leveraging the open-source nature of the blocks and the customization options provided by shadcn, users can easily create visually appealing websites with minimal effort. Consider integrating TWBlocksFree into your next React project for a quick and efficient development process.