# Beste UI

> Beautiful, accessible blocks, pieces and components for shadcn/ui and Tailwind CSS, built for React and Next.js. Install one with the shadcn CLI and the code is yours to edit: no runtime dependency, nothing to upgrade.

Markdown rendition of https://ui.beste.co/block/feature269. Every page on the site has one: add `.md` to any address, or send `Accept: text/markdown`.

Last updated: 2026-08-12

Whole catalog for LLMs: https://ui.beste.co/llms.txt. Registry index: https://ui.beste.co/r/registry.json

---
1. /
2. [Blocks](/blocks)
3. /
4. [Feature](/blocks/feature)
5. /
6. Tool Directory Cards

# Tool Directory Cards[PRO](/pricing)

A two-column directory of free tools, each card a linked row with a tinted icon tile, a name and one line on what it does, closed by a seal button to the full list.

ViewCodeDocs

Base UI

![](https://oud.pics/sm/l/npm.svg)`npx shadcn add https://ui.beste.co/r-base/feature269`

## Feature269: Tool Directory Cards

A two-column directory of free tools, each card a linked row with a tinted icon tile, a name and one line on what it does, closed by a seal button to the full list.

Upgrade to Pro

Pro blocks install through the shadcn CLI with your license key and ship their full source. Docs and live previews stay open to everyone, so you can read every block's details first.

[Upgrade NowUpgrade Now](/pricing)

### Installation

Swap `YOUR_EMAIL` and `YOUR_KEY` for the email and license key on your account. Find your license key on your [account page](/account).

**Radix flavor**

bashCopy

```
npx shadcn add "https://ui.beste.co/r/feature269?email=YOUR_EMAIL&license_key=YOUR_KEY"
```

**Base UI flavor**

bashCopy

```
npx shadcn add "https://ui.beste.co/r-base/feature269?email=YOUR_EMAIL&license_key=YOUR_KEY"
```

This installs the block to `components/beste/block/feature269.tsx`, the `badge6` component used for the eyebrow and the `button1` seal button under the grid.

### Quick start

The installed file exports `feature269Demo` alongside the block: the exact props behind the preview above. Spread it to get a working tool directory in one line.

tsxCopy

```
import { Feature269, feature269Demo } from "@/components/beste/block/feature269";

export default function ToolsPage() {
  return <Feature269 {...feature269Demo} />;
}
```

Then replace the demo with your own props. Written out, a trimmed setup looks like this:

tsxCopy

```
import { Contrast, Type } from "lucide-react";
import { Feature269 } from "@/components/beste/block/feature269";

export default function ToolsPage() {
  return (
    <Feature269
      eyebrow="Free tools"
      heading="Small tools we built for our own work"
      description="Every one of these started as a script someone got tired of rewriting."
      tools={[
        {
          icon: Contrast,
          title: "Contrast checker",
          description: "Test a pair of colours against the accessibility thresholds.",
          href: "/tools/contrast",
        },
        {
          icon: Type,
          title: "Type scale builder",
          description: "Pick a base size and a ratio, then copy the scale out.",
          href: "/tools/type-scale",
        },
      ]}
      button={{ label: "See every tool", href: "/tools" }}
    />
  );
}
```

### Props

| Prop        | Type         | Default | Description                           |
| ----------- | ------------ | ------- | ------------------------------------- |
| eyebrow     | string       | –       | Badge6 label above the hairline rule  |
| heading     | string       | –       | Section heading under the rule        |
| description | string       | –       | Supporting paragraph                  |
| tools       | ToolItem\[\] | \[\]    | Linked cards, two to a row on desktop |
| button      | ActionButton | –       | Seal button to the full list          |
| className   | string       | –       | Extra classes for the outer section   |

tsCopy

```
type ToolItem = {
  icon: LucideIcon;
  title: string;
  description: string;
  href: string;
};

type ActionButton = {
  label: string;
  href: string;
};
```

### Behavior notes

* The icon is passed as a Lucide component rather than a name string, so it is bundled with your page and there is no icon lookup at runtime.
* Icon tiles are a neutral `bg-muted/50` with the glyph in the accent colour, so a directory of twelve tools stays monochrome instead of turning into a colour chart.
* Each card is one `Link`, and its border darkens while the title moves to the accent colour through a named `group/feature269`.
* The card body is built from `span` elements rather than block tags, which keeps the whole card a valid link.
* The grid is one column below `md` and two above it, with the seal button centered underneath.

## More Feature blocks

[View all Feature](/blocks/feature)

[](/block/feature123)

PRO

feature123

### Tool Cards with Tag Badges

Responsive grid of linked tool cards with descriptions and tag badges. Excellent for developer tools showcase, API documentation, or SDK listings.

[](/block/feature147)

PRO

feature147

### Tech Stack Tool Grid

Responsive grid of tool cards with icons, descriptions, and linked tiles. Excellent for tech stack showcase, integrated tools, or component library.

[](/block/feature75)

PRO

feature75

### Product Cards with Badge Tags

2-column grid of linked product cards with multiple badge tags and learn-more arrows. Perfect for showcasing product suites, solution offerings, or categorized tools.

[](/block/feature63)

FREE

feature63

### Use Case Image Cards

3-column grid of image cards with text overlay, hover zoom effect, and arrow indicators. Perfect for showcasing team use cases, industry solutions, or department-specific features.

[](/block/feature196)

PRO

feature196

### Module Cards Grid With Hover Lift

Three-column grid of clickable feature cards. Each card has a top-left icon, top-right diagonal arrow, title, and description. Cards lift on hover with a configurable accent color (emerald, primary, foreground, rose, blue, amber, violet, sky, orange, teal). Two-tone heading splits a primary phrase from a colored highlight.

[](/block/feature112)

FREE

feature112

### Tabbed Feature Cards

Tab-based interface showing 3 cards per tab, with button toggles at top. Excellent for segmented features by department, plan, or use case.

## Ship the interface, keep the code.

New blocks, pieces and components every week. Install one with a command and it is yours to edit. No runtime dependency, no upgrade path to fight.

[Browse the libraryBrowse the library](/blocks)[See pricingSee pricing](/pricing)

### Library

* [Blocks](/blocks)
* [Pages](/pages)
* [Pieces](/pieces)
* [Components](/components)
* [Search](/search)

### Learn

* [Docs](/docs)
* [AI & MCP](/docs/mcp)
* [Blog](/blog)
* [Free tools](/tools)
* [What's new?](/changelog)
* [Website Builder](https://beste.co)

### More

* [Pricing](/pricing)
* [Referrals](/referrals)
* [License](/license)
* [GitHub](https://github.com/beste-co/beste-ui)

### Shadcn Blocks

* [Shadcn Hero Blocks](/blocks/hero)
* [Shadcn Feature Blocks](/blocks/feature)
* [Shadcn Pricing Blocks](/blocks/pricing)
* [Shadcn CTA Blocks](/blocks/cta)
* [Shadcn FAQ Blocks](/blocks/faq)
* [Shadcn About Blocks](/blocks/about)
* [Shadcn Stats Blocks](/blocks/stats)
* [Shadcn Footer Blocks](/blocks/footer)
* [Shadcn Navigation Blocks](/blocks/navigation)
* [Shadcn Auth Blocks](/blocks/auth)
* [Shadcn Ecommerce Blocks](/blocks/ecommerce)
* [Shadcn Portfolio Blocks](/blocks/portfolio)
* [Shadcn Showcase Blocks](/blocks/showcase)
* [Shadcn Careers Blocks](/blocks/careers)
* [Shadcn Onboarding Blocks](/blocks/onboarding)
* [Shadcn Coming Soon Blocks](/blocks/coming-soon)
* [Shadcn Post Blocks](/blocks/post)
* [Shadcn Legal Blocks](/blocks/legal)
* [Shadcn Workflow Blocks](/blocks/workflow)
* [Shadcn News Blocks](/blocks/news)

© 2026, [Beste](https://beste.co). All rights reserved.