50 product blocks, a chart palette and tests
Real screens from real kinds of products, coded and in the Storybook, plus a data-viz palette that keeps series apart from status.
- Product blocks
- 50 new blocks in six groups: Commerce, Content, Dashboards, Inbox, Agents and Developer. Storefronts, checkouts, inboxes, agent traces, SQL editors and more, each designed at 1440×900 with light and dark from the same tokens. Open
- Chart palette
- chart-1 to chart-5 (violet, amber, sky, rose, indigo) now color every data series, in order and never cycled. Success, warning, destructive and info stay reserved for status, such as deltas, pass and fail, and alerts.
- Chart components
- Sparkline, Bar Chart, Bar Chart Thick, Radial Graph, Donut Graph, Gauge Graph and Radar Chart accept the series colors in their color prop, with the same names in Figma.
- Thicker bars
- Bars are 12px thick (16px wide when vertical) with 4px corners, and every unfilled track, from bars and meters to rings and gauges, uses the 45° hatch.
- shadcn blocks
- shadcn's own dashboard, login, signup and sidebar blocks and all 70 of its charts, in the Storybook next to the Pegasus blocks. Open
- Tests
- A test runner opens every story and fails it on render errors, console errors or a failing interaction test, and checks each one for accessibility with axe-core. The a11y addon shows the same checks in the Storybook.
- Storybook copy
- The landing-block stories use realistic product copy instead of placeholder headlines.
- Live on the site
- The homepage hero, the One system panel and the Modes and Templates cells now run real Pegasus components from the Storybook instead of screenshots. The One system code is read from the component's source when the site is built, and the product page shows all 50 blocks, live. Open