Category List

Features 821

About

An interactive and theme-adaptive list component used to display and navigate through different categories or features. Each item provides visual feedback on hover, revealing more details and an icon, making it ideal for guiding users through key sections of an application.

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

Code

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

Usage.tsx

import React from 'react';
import { CategoryList, Category } from '@/components/ui/category-list';
import { LayoutGrid, Bot, Code, Palette, ArrowRight } from 'lucide-react';

const sampleCategories: Category[] = [
  {
    id: 1,
    title: 'Featured Project',
    subtitle: 'Dive deep into our main showcase.',
    onClick: () => alert('Navigating to Featured Project...'),
    icon: <ArrowRight className="w-8 h-8" />,
    featured: true, // This item will have a larger title
  },
  {
    id: 2,
    title: 'AI & Automation',
    subtitle: 'Explore intelligent systems and workflows.',
    onClick: () => alert('Navigating to AI...'),
    icon: <Bot className="w-8 h-8" />,
  },
  {
    id: 3,
    title: 'UI/UX Design',
    subtitle: 'Discover user-centric design patterns.',
    onClick: () => alert('Navigating to Design...'),
    icon: <Palette className="w-8 h-8" />,
  },
  {
    id: 4,
    title: 'Development Kits',
    subtitle: 'Get started with our pre-built components.',
    onClick: () => alert('Navigating to Dev Kits...'),
    icon: <Code className="w-8 h-8" />,
  },
];


const CategoryListDemo = () => {
  return (
    <div className="w-full min-h-screen bg-background">
      <CategoryList
        title="Explore Our"
        subtitle="Core Features"
        categories={sampleCategories}
        headerIcon={<LayoutGrid className="w-8 h-8" />}
      />
    </div>
  );
};

export default CategoryListDemo;