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-cardsUsage
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} />
}