Soft tiles

Features with soft tiles of animated UI mockups.

Usage

import { FeatureTiles } from '@/components/blocks/features-02'


<FeatureTiles />


// Swap in your own copy
<FeatureTiles
  title={'Plan less.\nShip more.'}
  description="Everything your team needs to stay in step."
  features={[
    { title: 'Focus time', description: 'Protected hours for the work that matters.' },
    { title: 'Smart inbox', description: 'Only what needs you, right when it does.' },
    { title: 'Weekly recap', description: 'A Friday note on what shipped.' },
  ]}
/>

Install

pnpm dlx shadcn@latest add @pastaui-pro/features-02

npx shadcn@latest add @pastaui-pro/features-02

yarn dlx shadcn@latest add @pastaui-pro/features-02

bunx --bun shadcn@latest add @pastaui-pro/features-02

Source

Props

Soft tiles props
Prop	Type	Default	Description
title	string	= 'Get more done\nwith fewer meetings.'	Section heading. Use \n to control the line break.
description	string	= Team planning copy	Short grey line under the heading.
features	FeatureTileItem[]	= Focus time, Smart inbox, Weekly recap	Title and description pairs. Tiles cycle through the focus, inbox and recap mockups and their blue, grey and grey tiles in order.
className	string	= —	Additional classes for the section.