Feature Components

Clean, responsive feature sections for product highlights and value props. Previews use Tailwind only; Vue & React code matches 1:1.

1) Minimal Feature Grid

Icon + title + copy in a simple 3-column grid. Perfect for quick value props.

Blazing Fast

Optimized markup & utility classes keep your pages lightweight.

Type-Safe Ready

Drop into any stack—works great with Vue, React, or vanilla.

Pixel Perfect

Consistent spacing, color and typography built-in.

<div class="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
  <div class="rounded-xl border border-black/10 p-6 bg-white">
    <div class="w-10 h-10 rounded-lg bg-violet/10 text-violet flex items-center justify-center mb-4">
      <svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/></svg>
    </div>
    <h3 class="font-semibold text-lg">Blazing Fast</h3>
    <p class="mt-2 text-gray-600">Optimized markup & utility classes keep your pages lightweight.</p>
  </div>
  <div class="rounded-xl border border-black/10 p-6 bg-white">...</div>
  <div class="rounded-xl border border-black/10 p-6 bg-white">...</div>
</div>
<template>
  <div class="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
    <div v-for="f in features" :key="f.title" class="rounded-xl border border-black/10 p-6 bg-white">
      <div class="w-10 h-10 rounded-lg bg-violet/10 text-violet flex items-center justify-center mb-4">
        <component :is="f.icon" class="w-5 h-5" />
      </div>
      <h3 class="font-semibold text-lg">{{ f.title }}</h3>
      <p class="mt-2 text-gray-600">{{ f.text }}</p>
    </div>
  </div>
</template>

<script setup>
import { BoltIcon, ShieldCheckIcon, SparklesIcon } from '@heroicons/vue/24/outline'
const features = [
  { title:'Blazing Fast', text:'Optimized markup & utility classes keep your pages lightweight.', icon:BoltIcon },
  { title:'Type-Safe Ready', text:'Works great with Vue, React, or vanilla.', icon:ShieldCheckIcon },
  { title:'Pixel Perfect', text:'Consistent spacing, color and typography built-in.', icon:SparklesIcon },
]
</script>
import { BoltIcon, ShieldCheckIcon, SparklesIcon } from '@heroicons/react/24/outline'
export default function MinimalFeatures(){
  const items = [
    { title:'Blazing Fast', text:'Optimized markup & utility classes keep your pages lightweight.', Icon:BoltIcon },
    { title:'Type-Safe Ready', text:'Works great with Vue, React, or vanilla.', Icon:ShieldCheckIcon },
    { title:'Pixel Perfect', text:'Consistent spacing, color and typography built-in.', Icon:SparklesIcon },
  ]
  return (<div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
    {items.map(({title,text,Icon})=>(
      <div key={title} className="rounded-xl border border-black/10 p-6 bg-white">
        <div className="w-10 h-10 rounded-lg bg-violet/10 text-violet flex items-center justify-center mb-4"><Icon className="w-5 h-5"/></div>
        <h3 className="font-semibold text-lg">{title}</h3>
        <p className="mt-2 text-gray-600">{text}</p>
      </div>
    ))}
  </div>)
}

2) Feature with Image

A media layout with a visual on the left and bullet points on the right.

Illustrative Placeholder
New

Modern DX out of the box

Ship faster with prebuilt UX patterns, sensible defaults, and zero config styling.

  • Ready in minutes — drop into Laravel, Next.js, or Nuxt.
  • Accessible by default — keyboard & screen reader friendly.
  • Themable — change colors with Tailwind tokens.
Get Started Docs 
<div class="grid md:grid-cols-2 gap-8 items-center">
  <div class="rounded-xl overflow-hidden border border-black/10 bg-gray-100">
    <div class="aspect-[4/3]">...inline SVG placeholder...</div>
  </div>
  <div>
    <span class="inline-flex items-center gap-2 text-xs font-semibold uppercase tracking-wider text-violet">New</span>
    <h3 class="mt-2 text-2xl font-bold">Modern DX out of the box</h3>
    <p class="mt-2 text-gray-600">Ship faster with prebuilt UX patterns...</p>
    <ul class="mt-4 space-y-2">
      <li class="flex items-start gap-3">...</li>
      <li class="flex items-start gap-3">...</li>
      <li class="flex items-start gap-3">...</li>
    </ul>
    <div class="mt-6 flex gap-3">
      <a href="#" class="px-4 py-2 bg-violet text-white font-semibold rounded-lg border border-black/10">Get Started</a>
      <a href="#" class="px-4 py-2 bg-white text-gray-900 font-semibold rounded-lg border border-black/10 hover:bg-gray-50">Docs</a>
    </div>
  </div>
</div>
<template>
  <div class="grid md:grid-cols-2 gap-8 items-center">
    <div class="rounded-xl overflow-hidden border border-black/10 bg-gray-100">
      <div class="aspect-[4/3]"> <!-- place your <img> here --> </div>
    </div>
    <div>
      <span class="inline-flex items-center gap-2 text-xs font-semibold uppercase tracking-wider text-violet">New</span>
      <h3 class="mt-2 text-2xl font-bold">Modern DX out of the box</h3>
      <p class="mt-2 text-gray-600">Ship faster with prebuilt UX patterns...</p>
      <ul class="mt-4 space-y-2">
        <li v-for="(b,i) in bullets" :key="i" class="flex items-start gap-3">
          <svg class="w-5 h-5 mt-0.5 text-green-600" viewBox="0 0 24 24" fill="none" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m5 13 4 4L19 7"/></svg>
          <span>{{ b }}</span>
        </li>
      </ul>
      <div class="mt-6 flex gap-3">
        <RouterLink to="/get-started" class="px-4 py-2 bg-violet text-white font-semibold rounded-lg border border-black/10">Get Started</RouterLink>
        <RouterLink to="/docs" class="px-4 py-2 bg-white text-gray-900 font-semibold rounded-lg border border-black/10 hover:bg-gray-50">Docs</RouterLink>
      </div>
    </div>
  </div>
</template>

<script setup>
const bullets = [
  'Ready in minutes — drop into Laravel, Next.js, or Nuxt.',
  'Accessible by default — keyboard & screen reader friendly.',
  'Themable — change colors with Tailwind tokens.'
]
</script>
export default function FeatureWithImage(){
  const bullets = [
    'Ready in minutes — drop into Laravel, Next.js, or Nuxt.',
    'Accessible by default — keyboard & screen reader friendly.',
    'Themable — change colors with Tailwind tokens.',
  ]
  return (<div className="grid md:grid-cols-2 gap-8 items-center">
    <div className="rounded-xl overflow-hidden border border-black/10 bg-gray-100">
      <div className="aspect-[4/3]"><!-- place your <img /> here --></div>
    </div>
    <div>
      <span className="inline-flex items-center gap-2 text-xs font-semibold uppercase tracking-wider text-violet">New</span>
      <h3 className="mt-2 text-2xl font-bold">Modern DX out of the box</h3>
      <p className="mt-2 text-gray-600">Ship faster with prebuilt UX patterns, sensible defaults, and zero config styling.</p>
      <ul className="mt-4 space-y-2">
        {bullets.map((b,i)=>(
          <li key={i} className="flex items-start gap-3">
            <svg className="w-5 h-5 mt-0.5 text-green-600" viewBox="0 0 24 24" fill="none" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="m5 13 4 4L19 7"/></svg>
            <span>{b}</span>
          </li>
        ))}
      </ul>
      <div className="mt-6 flex gap-3">
        <a href="#" className="px-4 py-2 bg-violet text-white font-semibold rounded-lg border border-black/10 hover:brightness-95">Get Started</a>
        <a href="#" className="px-4 py-2 bg-white text-gray-900 font-semibold rounded-lg border border-black/10 hover:bg-gray-50">Docs</a>
      </div>
    </div>
  </div>)
}

3) Premium Gradient Cards

Luxe gradient panels with icon badges, subtle glass layers, and CTAs.

Instant Setup

Plug-and-play sections with opinionated defaults and clean code.

Learn more

CLI Friendly

Drop into your Vite pipeline and ship production builds.

Learn more

Production Ready

Accessible, responsive, and tested across evergreen browsers.

Learn more 
<div class="grid gap-6 md:grid-cols-3">
  <article class="relative rounded-2xl p-6 overflow-hidden ring-1 ring-black/5 text-white bg-gradient-to-br from-indigo-500 via-violet-500 to-fuchsia-500">
    <div class="absolute inset-0 bg-white/10 backdrop-blur-sm"></div>
    <div class="relative">
      <div class="w-12 h-12 rounded-xl bg-white/20 flex items-center justify-center mb-4">...icon...</div>
      <h3 class="text-xl font-bold">Instant Setup</h3>
      <p class="mt-2 text-white/90">Plug-and-play sections with opinionated defaults and clean code.</p>
      <a href="#" class="mt-4 inline-flex items-center gap-2 liquid-glass-tertiary">Learn more →</a>
    </div>
  </article>
  <!-- Repeat with different gradients/content -->
</div>
<template>
  <div class="grid gap-6 md:grid-cols-3">
    <article v-for="c in cards" :key="c.title" :class="['relative rounded-2xl p-6 overflow-hidden ring-1 ring-black/5 text-white', c.gradient]">
      <div class="absolute inset-0 bg-white/10 backdrop-blur-sm" />
      <div class="relative">
        <div class="w-12 h-12 rounded-xl bg-white/20 flex items-center justify-center mb-4">
          <component :is="c.icon" class="w-6 h-6" />
        </div>
        <h3 class="text-xl font-bold">{{ c.title }}</h3>
        <p class="mt-2 text-white/90">{{ c.text }}</p>
        <a :href="c.href" class="mt-4 inline-flex items-center gap-2 liquid-glass-tertiary">Learn more</a>
      </div>
    </article>
  </div>
</template>

<script setup>
import { CursorArrowRaysIcon, CommandLineIcon, ShieldCheckIcon } from '@heroicons/vue/24/outline'
const cards = [
  { title:'Instant Setup', text:'Plug-and-play sections with opinionated defaults and clean code.', icon:CursorArrowRaysIcon, href:'#', gradient:'bg-gradient-to-br from-indigo-500 via-violet-500 to-fuchsia-500' },
  { title:'CLI Friendly', text:'Drop into your Vite pipeline and ship production builds.', icon:CommandLineIcon, href:'#', gradient:'bg-gradient-to-br from-emerald-500 to-cyan-500' },
  { title:'Production Ready', text:'Accessible, responsive, and tested across evergreen browsers.', icon:ShieldCheckIcon, href:'#', gradient:'bg-gradient-to-br from-orange-500 via-rose-500 to-pink-500' },
]
</script>
import { CursorArrowRaysIcon, CommandLineIcon, ShieldCheckIcon } from '@heroicons/react/24/outline'
export default function PremiumGradientCards(){
  const cards = [
    { title:'Instant Setup', text:'Plug-and-play sections with opinionated defaults and clean code.', Icon:CursorArrowRaysIcon, href:'#', gradient:'bg-gradient-to-br from-indigo-500 via-violet-500 to-fuchsia-500' },
    { title:'CLI Friendly', text:'Drop into your Vite pipeline and ship production builds.', Icon:CommandLineIcon, href:'#', gradient:'bg-gradient-to-br from-emerald-500 to-cyan-500' },
    { title:'Production Ready', text:'Accessible, responsive, and tested across evergreen browsers.', Icon:ShieldCheckIcon, href:'#', gradient:'bg-gradient-to-br from-orange-500 via-rose-500 to-pink-500' },
  ]
  return (<div className="grid gap-6 md:grid-cols-3">
    {cards.map(({title,text,Icon,href,gradient})=>(
      <article key={title} className={`relative rounded-2xl p-6 overflow-hidden ring-1 ring-black/5 text-white ${gradient}`}>
        <div className="absolute inset-0 bg-white/10 backdrop-blur-sm"/>
        <div className="relative">
          <div className="w-12 h-12 rounded-xl bg-white/20 flex items-center justify-center mb-4"><Icon className="w-6 h-6"/></div>
          <h3 className="text-xl font-bold">{title}</h3>
          <p className="mt-2 text-white/90">{text}</p>
          <a href={href} className="mt-4 inline-flex items-center gap-2 liquid-glass-tertiary">Learn more</a>
        </div>
      </article>
    ))}
  </div>)
}

4) Numbered Steps Feature

Three-step onboarding with numbered badges and concise copy.

1

Install

Add the package to your project via NPM or your framework’s starter.

2

Configure

Set your brand colors, spacing scale, and typography tokens.

3

Ship

Drop in prebuilt sections and launch with confidence.

Get Started Docs 
<div class="grid gap-8 md:grid-cols-3">
  <div class="rounded-2xl border border-black/10 p-6">
    <div class="w-10 h-10 rounded-full bg-gradient-to-br from-violet to-indigo text-white flex items-center justify-center font-bold">1</div>
    <h3 class="mt-4 font-semibold text-lg">Install</h3>
    <p class="mt-2 text-gray-600">Add the package to your project via NPM or your framework’s starter.</p>
  </div>
  <div class="rounded-2xl border border-black/10 p-6">... Step 2 ...</div>
  <div class="rounded-2xl border border-black/10 p-6">... Step 3 ...</div>
</div>
<div class="mt-8 flex justify-center gap-3">
  <a href="#" class="px-4 py-2 bg-violet text-white font-semibold rounded-lg border border-black/10">Get Started</a>
  <a href="#" class="px-4 py-2 bg-white text-gray-900 font-semibold rounded-lg border border-black/10 hover:bg-gray-50">Docs</a>
</div>
<template>
  <div>
    <div class="grid gap-8 md:grid-cols-3">
      <div v-for="s in steps" :key="s.n" class="rounded-2xl border border-black/10 p-6">
        <div class="w-10 h-10 rounded-full bg-gradient-to-br from-violet to-indigo text-white flex items-center justify-center font-bold">{{ s.n }}</div>
        <h3 class="mt-4 font-semibold text-lg">{{ s.title }}</h3>
        <p class="mt-2 text-gray-600">{{ s.text }}</p>
      </div>
    </div>
    <div class="mt-8 flex justify-center gap-3">
      <RouterLink to="/get-started" class="px-4 py-2 bg-violet text-white font-semibold rounded-lg border border-black/10">Get Started</RouterLink>
      <RouterLink to="/docs" class="px-4 py-2 bg-white text-gray-900 font-semibold rounded-lg border border-black/10 hover:bg-gray-50">Docs</RouterLink>
    </div>
  </div>
</template>

<script setup>
const steps = [
  { n: 1, title: 'Install',  text: 'Add the package via NPM or your framework’s starter.' },
  { n: 2, title: 'Configure', text: 'Set brand colors, spacing and typography tokens.' },
  { n: 3, title: 'Ship',     text: 'Drop in sections and launch with confidence.' },
]
</script>
export default function NumberedStepsFeature(){
  const steps = [
    { n:1, title:'Install',  text:'Add the package via NPM or your framework’s starter.' },
    { n:2, title:'Configure', text:'Set brand colors, spacing and typography tokens.' },
    { n:3, title:'Ship',     text:'Drop in sections and launch with confidence.' },
  ]
  return (<div>
    <div className="grid gap-8 md:grid-cols-3">
      {steps.map(s => (
        <div key={s.n} className="rounded-2xl border border-black/10 p-6">
          <div className="w-10 h-10 rounded-full bg-gradient-to-br from-violet to-indigo text-white flex items-center justify-center font-bold">{s.n}</div>
          <h3 className="mt-4 font-semibold text-lg">{s.title}</h3>
          <p className="mt-2 text-gray-600">{s.text}</p>
        </div>
      ))}
    </div>
    <div className="mt-8 flex justify-center gap-3">
      <a href="#" className="px-4 py-2 bg-violet text-white font-semibold rounded-lg border border-black/10 hover:brightness-95">Get Started</a>
      <a href="#" className="px-4 py-2 bg-white text-gray-900 font-semibold rounded-lg border border-black/10 hover:bg-gray-50">Docs</a>
    </div>
  </div>)
}

5) Feature Checklist Split

Copy on the left, two-column checklist on the right. Great for benefits.

Benefits

Everything you need to ship

Bundles of patterns that cover most real-world screens. Swap colors, tweak spacing, and go live.

Start free View components
  • Accessible components
  • Dark mode ready
  • Framework agnostic
  • Production tested
  • RTL + i18n friendly
  • TypeScript support
Tip: Extend tokens in tailwind.config.js to theme all sections at once.
<div class="grid lg:grid-cols-2 gap-10 items-start">
  <div>
    <span class="inline-flex items-center gap-2 text-xs font-semibold uppercase tracking-wider text-violet">Benefits</span>
    <h3 class="mt-2 text-3xl font-bold">Everything you need to ship</h3>
    <p class="mt-3 text-gray-600">Bundles of patterns that cover most real-world screens...</p>
    <div class="mt-6 flex gap-3">
      <a href="#" class="px-4 py-2 bg-violet text-white font-semibold rounded-lg border border-black/10">Start free</a>
      <a href="#" class="px-4 py-2 bg-white text-gray-900 font-semibold rounded-lg border border-black/10 hover:bg-gray-50">View components</a>
    </div>
  </div>
  <div class="rounded-2xl border border-black/10 p-6">
    <div class="grid sm:grid-cols-2 gap-4">
      <ul class="space-y-3">
        <li class="flex items-start gap-3"><svg class="w-5 h-5 mt-0.5 text-green-600" viewBox="0 0 24 24" fill="none" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m5 13 4 4L19 7"/></svg>Accessible components</li>
        <li class="flex items-start gap-3">Dark mode ready</li>
        <li class="flex items-start gap-3">Framework agnostic</li>
      </ul>
      <ul class="space-y-3">
        <li class="flex items-start gap-3">Production tested</li>
        <li class="flex items-start gap-3">RTL + i18n friendly</li>
        <li class="flex items-start gap-3">TypeScript support</li>
      </ul>
    </div>
    <div class="mt-6 rounded-lg bg-gray-50 border border-black/10 p-4">
      <div class="text-sm text-gray-700"><strong>Tip:</strong> Extend tokens in <code class="px-1 rounded bg-gray-200">tailwind.config.js</code> to theme all sections at once.</div>
    </div>
  </div>
</div>
<template>
  <div class="grid lg:grid-cols-2 gap-10 items-start">
    <div>
      <span class="inline-flex items-center gap-2 text-xs font-semibold uppercase tracking-wider text-violet">Benefits</span>
      <h3 class="mt-2 text-3xl font-bold">Everything you need to ship</h3>
      <p class="mt-3 text-gray-600">Bundles of patterns that cover most real-world screens.</p>
      <div class="mt-6 flex gap-3">
        <RouterLink to="/start" class="px-4 py-2 bg-violet text-white font-semibold rounded-lg border border-black/10">Start free</RouterLink>
        <RouterLink to="/components" class="px-4 py-2 bg-white text-gray-900 font-semibold rounded-lg border border-black/10 hover:bg-gray-50">View components</RouterLink>
      </div>
    </div>
    <div class="rounded-2xl border border-black/10 p-6">
      <div class="grid sm:grid-cols-2 gap-4">
        <ul class="space-y-3">
          <li v-for="item in left" :key="item" class="flex items-start gap-3">
            <svg class="w-5 h-5 mt-0.5 text-green-600" viewBox="0 0 24 24" fill="none" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m5 13 4 4L19 7"/></svg>
            {{ item }}
          </li>
        </ul>
        <ul class="space-y-3">
          <li v-for="item in right" :key="item" class="flex items-start gap-3">
            <svg class="w-5 h-5 mt-0.5 text-green-600" viewBox="0 0 24 24" fill="none" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m5 13 4 4L19 7"/></svg>
            {{ item }}
          </li>
        </ul>
      </div>
      <div class="mt-6 rounded-lg bg-gray-50 border border-black/10 p-4">
        <div class="text-sm text-gray-700"><strong>Tip:</strong> Extend tokens in <code class="px-1 rounded bg-gray-200">tailwind.config.js</code> to theme all sections at once.</div>
      </div>
    </div>
  </div>
</template>

<script setup>
const left  = ['Accessible components', 'Dark mode ready', 'Framework agnostic']
const right = ['Production tested', 'RTL + i18n friendly', 'TypeScript support']
</script>
export default function FeatureChecklistSplit(){
  const left  = ['Accessible components', 'Dark mode ready', 'Framework agnostic']
  const right = ['Production tested', 'RTL + i18n friendly', 'TypeScript support']
  const Check = () => (<svg className="w-5 h-5 mt-0.5 text-green-600" viewBox="0 0 24 24" fill="none" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="m5 13 4 4L19 7"/></svg>)
  return (<div className="grid lg:grid-cols-2 gap-10 items-start">
    <div>
      <span className="inline-flex items-center gap-2 text-xs font-semibold uppercase tracking-wider text-violet">Benefits</span>
      <h3 className="mt-2 text-3xl font-bold">Everything you need to ship</h3>
      <p className="mt-3 text-gray-600">Bundles of patterns that cover most real-world screens. Swap colors, tweak spacing, and go live.</p>
      <div className="mt-6 flex gap-3">
        <a href="#" className="px-4 py-2 bg-violet text-white font-semibold rounded-lg border border-black/10 hover:brightness-95">Start free</a>
        <a href="#" className="px-4 py-2 bg-white text-gray-900 font-semibold rounded-lg border border-black/10 hover:bg-gray-50">View components</a>
      </div>
    </div>
    <div className="rounded-2xl border border-black/10 p-6">
      <div className="grid sm:grid-cols-2 gap-4">
        <ul className="space-y-3">
          {left.map(it => (<li key={it} className="flex items-start gap-3"><Check /> {it}</li>))}
        </ul>
        <ul className="space-y-3">
          {right.map(it => (<li key={it} className="flex items-start gap-3"><Check /> {it}</li>))}
        </ul>
      </div>
      <div className="mt-6 rounded-lg bg-gray-50 border border-black/10 p-4">
        <div className="text-sm text-gray-700"><strong>Tip:</strong> Extend tokens in <code className="px-1 rounded bg-gray-200">tailwind.config.js</code> to theme all sections at once.</div>
      </div>
    </div>
  </div>)
}

Notes

  • Replace the inline SVG placeholder (Example 2) with your own <img> or <picture> as needed.
  • All examples are responsive and accessible by default.
  • Vue/React examples assume @heroicons/vue or @heroicons/react installed.

We use cookies to improve your experience and analytics. You can accept all cookies or reject non-essential ones.

Learn More