Blocks
The sections your sites and apps are made of
752 blocks and 1471 variants across 7 families — landing, commerce, saas, editorial and more — in Vue and React, all on the same design tokens. Switch the theme; every block follows.
752 blocks
Design system
Browse all blocksTrame
Tokens, themes, components and blocks for Vue and React — generated sites assemble them; one set of DTCG tokens themes them all.
Components
Components: the shadcn-style pieces blocks are built from
Buttons, fields, overlays and motion — the same classes and pixels in Vue and React.
100+ components
Themes
One theme, every mood: the tokens decide
7 themes
Registry
Copy, don’t depend: every item installs with one command
shadcn-compatible
Featured
Blocks to start from
saas
A product dashboard in one block
KPIs, charts and activity, assembled from the saas family.
4 variants
commerce
A lookbook that sells the collection
3 variants
editorial
A journal front page, five ways
5 variants
commerce
The product grid, filters included
3 variants
Install any of it with one command
Every component, block and variant is an item of a shadcn-compatible registry. The code is copied into your project — yours to keep and change, no package to depend on.
npx shadcn-vue@latest add @trame/landing-steps # Vue
npx shadcn@latest add @trame/landing-steps # React