FreeComponent · Data display
Changelog Timeline
Vertical changelog timeline for Vue 3 with version badges, dated releases, typed change tags and filter chips. Built with Tailwind CSS, dark mode.
by Vueplay
Vue components for stats, timelines and boards
Not every screen is a table. Stat cards, timelines, activity feeds, description lists and kanban boards each present data in a way that suits a particular question. These Vue 3 components cover those layouts with Tailwind CSS 4.
Data goes in through typed props, and every component supports class-based dark mode. They have no dependencies besides vue and can be installed with npm or copied into your project.
Free
$12Component · Data display
Kanban Board
Vue 3 kanban board with native drag and drop, keyboard moves, WIP limits and inline add card. v-model board state, Tailwind CSS, dark mode.
by Vueplay
FreeComponent · Data display
Stats Cards
Vue 3 KPI stat cards with trend deltas and tiny inline SVG sparklines, no chart library needed. Tailwind CSS, dark mode, typed props.
by Vueplay
FreeComponent · Data display
Team Grid
Vue 3 team section with a responsive grid of member cards: initials avatars, role, short bio, location and social links. Tailwind CSS, dark mode.
by Vueplay
FreeComponent · Data display
Board
A flexible board component built for smooth panning, zooming with a grid layout. It supports both mouse and touch input, making it a great fit for whiteboards, diagram tools, mind maps, and workflow editors. Designed for performance and responsiveness, it delivers a fluid experience on desktop and mobile with intuitive gestures and real-time interaction on a scalable canvas.
Good to know
Building data display that hold up
- Give numbers context
- A stat card is more useful with a comparison, such as a change since last period and the period itself. Show direction with both an icon and text, not color alone.
- Format numbers and dates with Intl
- Use Intl.NumberFormat for compact numbers and currency, and Intl.RelativeTimeFormat for "3 hours ago" style timestamps. Pass a locale prop instead of hard-coding one.
- Use tabular figures for changing numbers
- Add the tabular-nums class to numbers that update or line up in columns, so digits do not shift width as values change.
- Use the right list semantics
- Timelines and feeds are ordered lists, and key-value details belong in a <dl>. Correct markup gives screen reader users the same structure sighted users see.
FAQ
Questions
Do the kanban boards support drag and drop?
Boards use the native HTML drag and drop API with no extra library. For touch-heavy or complex boards you can swap in a dedicated drag and drop library.
How do I install a data display component?
Every item is a plain Vue 3 single-file component with no dependencies besides vue. Install it with npm from its vueplay.com/npm tarball URL, or copy the source straight into your project.