Components
Loading preview...
Here is Area Chart component
@SubframeApp
npx shadcn@latest add https://21st.dev/r/SubframeApp/area-chartimport Component from "@/components/ui/area-chart";
export default function DemoOne() {
return (
<div className="flex flex-col gap-6 p-4">
{/* example 2: custom data + labels + light theme */}
<Component
dark={false}
stacked
index="Quarter"
categories={["Revenue", "Cost"]}
data={[
{ Quarter: "Q1", Revenue: 320, Cost: 180 },
{ Quarter: "Q2", Revenue: 410, Cost: 220 },
{ Quarter: "Q3", Revenue: 380, Cost: 210 },
{ Quarter: "Q4", Revenue: 520, Cost: 260 },
]}
className="max-w-3xl"
/>
</div>
);
}