Feature

Showcase product features with a header and custom content layout.

The Feature component provides a simple, flexible way to showcase features with a consistent header design. It renders a header with an icon, title, and subtitle, then displays whatever children you provide.

Basic Usage

The component accepts a header configuration and renders any children below it.

import { Feature } from "/snippets/tsdocs/Feature.jsx"

<Feature
  icon="pocket-knife"
  title="My Tool"
  subtitle="A brief description of this amazing tool."
>
  <p>Any content you want goes here.</p>
  <p>You have complete control over the layout.</p>
</Feature>

Basic Feature Example

My Tool

A brief description of this amazing tool.

This feature provides a flexible container for showcasing your product capabilities.

You can include any content: text, lists, cards, or custom components.

Properties

icon · string

Icon name for the feature header (e.g., “pocket-knife”, “rocket”). Uses Mintlify’s Icon component. Optional.

title · string · required

The title of the feature. It will be rendered inside a <code> tag.

subtitle · string · required

A short description that appears below the main title.

children · ReactNode

Any React content to display below the header. This gives you complete flexibility in how you structure your feature content.

Using with Cards

The Feature component works great with Mintlify’s Card components for creating highlight grids.

<Feature
  icon="pocket-knife"
  title="hyper gen"
  subtitle="Code generation engine for the age of AI."
>
  <p>
    Beyond anything you can do with Yeoman and similar tools, hyper templates
    support <strong>prompt placeholders</strong> that integrate rule-based
    generation with AI-driven generation.
  </p>

  <CardGroup cols={4}>
    <Card title="Starter Kits" icon="box">
      Project Starter Kits that set your agent up for success.
    </Card>
    <Card title="Code Templates" icon="code">
      Tailor made templates for consistent AI-generated code.
    </Card>
    <Card title="Starter Kits" icon="box">
      Project Starter Kits that set your agent up for success.
    </Card>
    <Card title="Code Templates" icon="code">
      Tailor made templates for consistent AI-generated code.
    </Card>
  </CardGroup>

  <p>
    Beyond anything you can do with Yeoman and similar tools, hyper templates
    support <strong>prompt placeholders</strong> that integrate rule-based
    generation with AI-driven generation.
  </p>
</Feature>

Feature with Card Grid

hyper gen

Code generation engine for the age of AI.

Beyond anything you can do with Yeoman and similar tools, hyper templates support prompt placeholders that integrate rule-based generation with AI-driven generation.

Starter Kits

Project Starter Kits that set your agent up for success.

Code Templates

Tailor made templates for consistent AI-generated code.

Starter Kits

Project Starter Kits that set your agent up for success.

Code Templates

Tailor made templates for consistent AI-generated code.

Beyond anything you can do with Yeoman and similar tools, hyper templates support prompt placeholders that integrate rule-based generation with AI-driven generation.

Advanced Example

Create complex layouts by composing the Feature component with any Mintlify components.

<Feature
  icon="pocket-knife"
  title="hyper tools"
  subtitle="Swiss army knife for your Agent."
>
  <p>
    Takes care of setting up and configuring all the tools for your project.
    Here's a non-exhaustive list of tools you can configure:
  </p>

  <CardGroup cols={2}>
    <Card title="AI" icon="bot">
      <ul>
        <li>MCP servers</li>
        <li>Agent Definitions</li>
        <li>Claude Code commands</li>
      </ul>
    </Card>
    <Card title="Security" icon="shield-check">
      <ul>
        <li>Dependency Scanners</li>
        <li>Secret Scanners</li>
        <li>SAST tools</li>
      </ul>
    </Card>
    <Card title="Code" icon="scan-text">
      <ul>
        <li>Linters</li>
        <li>Formatter</li>
        <li>Type Checkers</li>
        <li>Tests & Coverage</li>
        <li>CI/CD Pipelines</li>
      </ul>
    </Card>
    <Card title="Architecture" icon="send-to-back">
      <ul>
        <li>Complexity Scanners</li>
        <li>PyTestArch, TSArch, etc</li>
        <li>Plan-adherence Monitor Agent</li>
        <li>ADR Tools</li>
      </ul>
    </Card>
  </CardGroup>
</Feature>

Advanced Feature Layout

hyper tools

Swiss army knife for your Agent.

Takes care of setting up and configuring all the tools for your project. Here’s a non-exhaustive list of tools you can configure:

AI

• MCP servers
• Agent Definitions
• Claude Code commands

Security

• Dependency Scanners
• Secret Scanners
• SAST tools

Code

• Linters
• Formatter
• Type Checkers
• Tests & Coverage
• CI/CD Pipelines

Architecture

• Complexity Scanners
• PyTestArch, TSArch, etc
• Plan-adherence Monitor Agent
• ADR Tools

Best Practices

Use Consistent Icons

Use icons from a single library and style to maintain visual consistency across your features.

Keep Titles Concise

Feature titles should be short and memorable - ideally 1-3 words that quickly communicate the value.

Compose with Cards

Leverage Mintlify’s Card and CardGroup components within Feature children for professional layouts.

Structure Your Content

Start with a brief introduction paragraph, then present details using cards, lists, or other structured content.

Styling

The Feature component uses minimal, semantic CSS classes:

• .feature-article - Main container with dark background
• .feature-header - Header section wrapper
• .feature-title - Title with icon
• .feature-subtitle - Subtitle text
• .feature-content - Content wrapper for children

The component automatically adapts to light and dark modes. You can override styles in your docs/style.css.

Troubleshooting

Component not found

Ensure the Feature.jsx file exists in docs/snippets/tsdocs/ and your import path is correct: /snippets/tsdocs/Feature.jsx

Styling looks wrong

The Feature component relies on tsdocs-styles.css. Verify:

1. The CSS file is properly imported in your Mintlify configuration
2. Custom styles in docs/style.css aren’t overriding defaults unintentionally

Cards not displaying in grid

Make sure you’re using Mintlify’s CardGroup component to wrap your Card components, and set the cols prop to control the grid layout.

Related Components

Card

Build highlight cards within your features.

CardGroup

Create responsive grids for your cards.

Preview

Showcase live component examples.