Feature 197

Features 524

About

A versatile block with an Accordion that can switch between multiple features. Each feature has a heading, text and an image.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Feature 197 to your project and fits it to your theme.

Code

How Feature 197 is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { Feature197 } from "@/components/blocks/accordion-feature-section"

const demoData = {
  features: [
    {
      id: 1,
      title: "Ready-to-Use UI Blocks",
      image: "https://cdn.21st.dev/assets/mirror/9f/9fb9487617e0903ab5bb8012f11530f61a39e4f1f19f169a87a367887fdaeecb.svg",
      description:
        "Browse through our extensive collection of pre-built UI blocks designed with shadcn/ui. Each block is carefully crafted to be responsive, accessible, and easily customizable. Simply copy and paste the code into your project.",
    },
    {
      id: 2,
      title: "Tailwind CSS & TypeScript",
      image: "https://cdn.21st.dev/assets/mirror/f0/f0899c6c439a70c9602ca80add37c87c8398b7dc9566778a5894584a412749c4.svg",
      description:
        "Built with Tailwind CSS for rapid styling and TypeScript for type safety. Our blocks leverage the full power of Tailwind's utility classes while maintaining clean, type-safe code that integrates seamlessly with your Next.js projects.",
    },
    {
      id: 3,
      title: "Dark Mode & Customization",
      image: "https://cdn.21st.dev/assets/mirror/39/398f380a0fecf974486fd34a731a8f683c0428d5f22de5ae639554da566c84dc.svg",
      description:
        "Every block supports dark mode out of the box and can be customized to match your brand. Modify colors, spacing, and typography using Tailwind's configuration. The shadcn/ui theming system makes it easy to maintain consistency across your site.",
    },
    {
      id: 4,
      title: "Accessibility First",
      image: "https://cdn.21st.dev/assets/mirror/5c/5c07e8730eabe2cc7f3eed9d9e70f1dc3d86a3094d35357e2245d99955c1b3bf.svg",
      description:
        "All blocks are built with accessibility in mind, following WCAG guidelines. They include proper ARIA labels, keyboard navigation support, and semantic HTML structure. Ensure your website is usable by everyone without extra effort.",
    },
    {
      id: 5,
      title: "Modern Development Stack",
      image: "https://cdn.21st.dev/assets/mirror/53/5388850c3823e119e6847f900fe0fa06d2510f9bca7ed7cd3be58cda0516c82d.svg",
      description:
        "Built for modern web development with React 18, Next.js 14, and the latest shadcn/ui components. Take advantage of React Server Components, TypeScript strict mode, and other cutting-edge features while maintaining excellent performance.",
    },
  ],
};

function Feature197Demo() {
  return <Feature197 {...demoData} />;
}

export { Feature197Demo };