UI Skillbook
2

Bar List

A ranked list of labels with a bar behind each, sized against the largest value.

UI SkillbookSiteplane docsSiteplane UI 1.8.1
Works withClaude CodeCodexCursorOpenCodeUniversal
Install

Run npx uiskillbook get siteplane-bar-list and follow the Siteplane Bar List skill it prints for this task.

Paste this into your agent.

Bar List shows top pages, top countries or traffic sources as rows that are easy to compare. It renders fully on the server and glides to new values when the period changes.

Install

bashnpx shadcn@4.18.0 add @siteplane/bar-list

Import it from @/siteplane/components/bar-list. The project needs Siteplane UI's one-time setup first: installation.

When to pick it

  • vs Bar Chart: Pick Bar Chart if any value may fall below zero or readers need an axis to compare against.
  • vs Table: Pick Table when rows need several values or must be clickable.
  • vs Resource List: Pick Resource List when a row should open or select something.

Rules

  • Pass data sorted in the order you want ranked, each item with a unique id, a label and a value, and name the list with label.
  • Add a heading with label and value to name the two columns.
  • Format values with formatValue or set locale; use description for a quieter second line such as a path.
  • Keep a custom color light, because labels are written on top of the bars.
  • Rows ignore clicks, hover and focus, so don't wire actions to them.

Reference

  • Bar List docs, with every prop, part and example (Markdown)
  • Siteplane UI 1.8.1, Charts. Read the installed source under src/siteplane before relying on an API.

Add to your agent

Print this skill from the terminal, or connect the whole catalog over MCP. Setup guides

CLI

npx uiskillbook get siteplane-bar-list

MCP server

https://www.uiskillbook.com/mcp

Questions

Related skills

12 Principles of Animationby raphaelsalaja

Apply Disney's 12 animation principles to web interfaces to make motion feel natural, organic, and human.

MotionExternalGitHub stars: 42

Animation Vocabularyby emilkowalski

Sharpen motion language so animation choices feel deliberate and consistent.

MotionExternalGitHub stars: 51.4K

Antfu Designby antfu

antfu-style design conventions, broadened. UnoCSS-first, class-based semantic tokens with dual light/dark for tooling and devtools UIs, plus design-read, anti-slop, and micro-interaction polish for landing pages and product surfaces. Use when building or refactoring any interface with UnoCSS.

LayoutExternalGitHub stars: 6K

Apple Designby emilkowalski

Apple's approach to interface design and fluid, physical motion, translated for the web. Use when building or reviewing gesture-driven UI, spring animations, drag/swipe/sheet interactions, momentum and interruptible transitions, translucent materials and depth, typography (optical sizing, tracking, leading), reduced-motion, or the design foundations (feedback, spatial consistency, restraint) behind Apple-style interfaces.

MotionExternalGitHub stars: 51.4K

Back to Siteplane UI