Component workbench
Atomic components by type — copy HTML snippets for line charts, tabs, accordions, tables, fonts, and more.
Open workbench →Live page example
Full Description-style page combining Hero, charts (Chart.js + ECharts), tables, timeline, team cards, and FAQ.
View example →Vendor checklist
- Commit
static/vendor/gsap.min.js - Commit
chart.umd.min.js - Commit
echarts.min.js(npm install) - See
vendor-manifest.jsonfor CDN fallbacks
Component index
Chart.js
Line, bar, pie, area, stacked (8)
ECharts
Radar, gauge, heatmap, scatter, funnel, rose (6)
Scroll animation
fade, scale, counter, blur, rotate (8)
Tabs
Pill, underline, vertical, card (4)
Accordion
Single, multi, card, FAQ, numbered (5)
Lightbox
Image, thumbnail, gallery, video (4)
Timeline
Alternating, simple, horizontal (3)
Stats
Grid, counter, icon, trend (4)
Callouts
Semantic, quote, highlight, tip (4)
Steps
Grid, horizontal (2)
Team
Grid, flip, wide (3)
Hero
Basic, with stats (2)
Tables
Striped, compare, compact (3)
Typography
Font pairing picker (1)
Page navigation
TOC, progress, compare, back-to-top (5)