Grid Cards

A grid of cards with an optional title and a list of items (title, description).

Loading block…

Implementation

npx shadcn@latest add @flx/grid-cards

Usage

grid-cards-example.tsx
import { GridCards, type GridCardsProps } from './grid-cards'

export function GridCardsExample() {
  const values = {
    title: 'What we offer',
    items: [
      {
        title: 'Modern Design',
        description:
          'Beautiful and contemporary UI components that make your projects stand out.',
        icon: 'Palette',
      },
      {
        title: 'Developer Experience',
        description:
          'Built with developers in mind. Easy to use, well documented, and highly customizable.',
        icon: 'Code',
      },
      {
        title: 'Community Driven',
        description:
          'Join thousands of developers contributing to make UI development better for everyone.',
        icon: 'Users',
      },
      {
        title: 'Fast Performance',
        description: 'Optimized for speed and efficiency right out of the box.',
        icon: 'Zap',
      },
    ],
  } satisfies GridCardsProps

  return <GridCards title={values.title} items={values.items} />
}