Hi @glossy tide. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
#Looking for a way to do this kind of charting in Nuxt
upbeat parrotBOT
If you want a flexible, styled “pricing/features comparison” layout without wrestling with raw HTML tables, Nuxt UI Pro’s PricingTable is designed exactly for this use case. It renders a responsive comparison table on desktop and switches to stacked cards on mobile, with configurable tiers and feature sections.
- Component: UPricingTable (Nuxt UI Pro)
- What you pass: an array of tiers and an array of sections/features
- Result: auto-built comparison table with consistent styling and mobile layout
Example (from docs) showing tiers + sections you provide, and the component renders the table/cards for you:
<script setup lang="ts">
const tiers = ref([
{ id: 'solo', title: 'Solo', price: '$249', description: 'For indie hackers.', billingCycle: '/month', button: { label: 'Buy now', variant: 'subtle' } },
{ id: 'team', title: 'Team', price: '$499', description: 'For growing teams.', billingCycle: '/month', button: { label: 'Buy now' } },
{ id: 'enterprise', title: 'Enterprise', price: 'Custom', description: 'For large organizations.', button: { label: 'Contact sales', color: 'neutral' } }
])
const sections = ref([
{
title: 'Features',
features: [
{ title: 'Number of developers', tiers: { solo: '1', team: '5', enterprise: 'Unlimited' } },
{ title: 'Projects', tiers: { solo: true, team: true, enterprise: true } }
]
},
{
title: 'Security',
features: [
{ title: 'SSO', tiers: { solo: false, team: true, enterprise: true } }
]
}
])
</script>
<template>
<UPricingTable :tiers="tiers" :sections="sections" />
</template>
This gives you a clean, accessible table with badges, buttons, and highlight options out of the box. [Tiers; PricingTable]
You can also theme it (spacing, borders, highlight row/column, active tier accents) via the uiPro config if you need tighter branding control. [Theme]
If you need a more general data table (sortable/filterable, row actions, etc.), Nuxt UI’s UTable (built on TanStack Table) provides a type-safe API, pagination, column visibility controls, and slot customization, which might suit non-pricing comparisons or analytics tables. [Table; Important parts]
Summary:
- Pricing/features comparison: Use UPricingTable (Nuxt UI Pro) for a polished, responsive comparison layout without hand-rolling table CSS. [PricingTable]
- General data grids: Use UTable for rich table features and customization. [Table]