Skip to content
Block

Features Section

A features overview with heading, call to action, and an auto-playing image carousel.

What is the role in clean energy transitions?

Modern bioenergy is an important source of renewable energy. Its contribution to final energy demand across all sectors is currently five times higher than wind and solar PV combined, even when the traditional use of biomass is excluded.

Organic Material
Organic Material
Bio Energy
Bio Energy
Hydrogen Fuel
Hydrogen Fuel
Solar Innovation
Solar Innovation
Wind Power
Wind Power

Installation

The CLI installs the block with the shadcn button and carousel plus embla-carousel-autoplay.

terminal
npx shadcn@latest add https://ui.thilina.dev/r/features-section.json

Usage

app/page.tsx
import { FeaturesSection } from "@/components/blocks/features-section";

export default function Page() {
  return <FeaturesSection />;
}

Swap the CAROUSEL_CONTENT array at the bottom of the file for your own titles and images:

components/blocks/features-section.tsx
const CAROUSEL_CONTENT = [
  { title: "Solar Power", image: "/images/solar.jpg" },
  { title: "Wind Turbines", image: "/images/wind.jpg" },
];

The autoplay delay lives in the Autoplay({ delay: 4000 }) plugin options.

Accessibility

Carousel images carry their titles as alt text, and the embla carousel supports pointer, wheel, and keyboard interaction through the shadcn carousel primitives.

Command Palette

Search for a command to run...