Chart States

Loading skeletons, empty states and error states for every chart — one wrapper, six skeleton shapes, and a frame height that never shifts between them.

Library

Spectrum UI

Framework

React

Type

component

License

Apache-2.0

Install

npx shadcn@latest add @spectrumui/chart-states

Files

• app/registry/charts/chart-engine.tsx
• app/registry/charts/cohort-chart.tsx
• app/registry/charts/chart-states.tsx
• lib/utils.ts

Source

https://github.com/arihantcodes/spectrum-ui

Categories

• Chart Components
• React Chart Components
• Tailwind CSS Chart Components
• Data Display Components
• React Data Display Components
• Tailwind CSS Data Display Components
• Empty State Components
• React Empty State Components
• Tailwind CSS Empty State Components
• Error State Components
• React Error State Components
• Tailwind CSS Error State Components

More from Spectrum UI

• No Access
• No Activity Yet
• Animated SVG Chart
• No API Keys
• Area Chart
• Bar Chart
• Empty Board Column
• Calendar Heatmap
• Candlestick Chart
• Empty Cart
• Connecting Real Data
• No Chart Data