---
title: "RankedList"
description: "An ordered ranking with position, optional thumbnail, link, price and category. The top three are highlighted without relying on colour alone."
kind: block
id: C-044
category: storefront
registry: "ranked-list"
docs: "https://koten.codehive.com.co/blocks/storefront/ranked-list"
markdown: "https://koten.codehive.com.co/md/blocks/storefront/ranked-list.md"
install: "npx shadcn@latest add https://koten.codehive.com.co/r/ranked-list.json"
language: en
---

# RankedList · ランキング

> Block C-044 in the Koten UI catalog.

An ordered ranking with position, optional thumbnail, link, price and category. The top three are highlighted without relying on colour alone.

> Japanese labels in this page are documentation metadata. Keep the consumer UI in the product's language and do not add Japanese decoration unless the user asks (R-031).

## Install

Install `koten-theme` first when the project does not have Koten tokens yet. Use the runner of your project.

```bash
# Node
npx shadcn@latest add https://koten.codehive.com.co/r/ranked-list.json

# Bun
bunx shadcn@latest add https://koten.codehive.com.co/r/ranked-list.json
```

## Files

- `@/components/patterns/ranked-list.tsx`
- `@/lib/koten/cn.ts`
- `@/lib/koten/format.ts`
- `@/lib/koten/intl.ts`
- `@/lib/koten/labels.ts`
- `@/lib/koten/provider.tsx`

## Composition

This block composes Koten primitives. Read the source files above before changing its anatomy.

## Examples

### Best sellers

The <ol> carries the order; the visible number is decorative and the link repeats it for screen readers.

```tsx
<RankedList
  label="Best sellers"
  items={[
    {
      id: "r1",
      rank: 1,
      title: "HIKARI K-1",
      href: "/products/k-1",
      price: "¥58,300",
      meta: "Cameras",
      image: { src: "/images/k-1.jpg", alt: "HIKARI K-1 camera" },
    },
    {
      id: "r2",
      rank: 2,
      title: "HIKARI 35mm f/2.8",
      href: "/products/35mm",
      price: "¥32,400",
      meta: "Lenses",
    },
  ]}
/>
```

## Props

| Prop | Type | Default | Notes |
| --- | --- | --- | --- |
| `items` | `readonly RankedListItem[]` | `—` | Each item defines rank, title, href, price and, optionally, meta and image. |
| `label` | `string` | `—` | Accessible name of the ordered list. |

## Accessibility

- The real order lives in the <ol>; the painted number is aria-hidden and repeated inside the link with sr-only text.
- Thumbnails are optional and always carry descriptive alt text; when they add nothing, leave them out.
- Price and category are text, not an image or a background colour.

## Sources

- Catalog page: https://koten.codehive.com.co/blocks/storefront/ranked-list
- Markdown: https://koten.codehive.com.co/md/blocks/storefront/ranked-list.md
- Repository: https://github.com/codehive-colombia/koten