Skip to content
trame

1471 variants · Vue & React · shadcn registry

The block set your sites and apps are made of

752 full-width sections and 99 components for Vue and React — themed by one set of design tokens, installed with one command, the code copied into your project.

Browse the blocks

Made with the stack you already use

blocks
752
variants
1471
components
99
themes
7
families
7

Live, not screenshots

Every block runs right here

Resize it, switch it to dark, read its code in Vue or React — then copy one command.

saas · Dashboard

See every variant of this block →

Every kind of page

Seven families, from the landing page to the account area

One block is one intention; each variant is one way to show it.

  • Account

    Sign-in, profiles, orders, addresses and memberships. 45 blocks.

  • Commerce

    Product grids, product pages, carts, checkout and collections. 222 blocks.

  • Content

    Statements, FAQs, logos, stats, galleries and service pages. 201 blocks.

  • Editorial

    Journals, articles, changelogs, docs and help centres. 56 blocks.

  • Landing

    Heroes, features, pricing, proof and closings for marketing pages. 97 blocks.

  • Saas

    Dashboards, settings, billing, tables and app screens. 99 blocks.

  • Shell

    Navbars, footers, menus, banners and app shells. 32 blocks.

Why Trame

Built to be used, changed and trusted

  • Copy, don’t depend

    Every component, block and variant is an item of a shadcn-compatible registry: one command copies the code into your project, yours to change.

  • One markup, seven themes

    Colours, type, radius and motion come from DTCG tokens. Switch the theme and every block follows — nothing to rewrite.

  • Vue and React, same pixels

    Each block exists in both, with the same schema, the same demos and the same HTML, proved by a parity check.

  • Complete server render

    Every word a visitor reads is in the server HTML. No layout shift, nothing hidden until JavaScript runs.

  • Accessible by default

    Real buttons and links, a visible focus, a keyboard path; axe passes in light and dark.

  • Honest by design

    No invented reviews, logos or figures: a block shows what you give it and hides what is absent.

Themes

One markup, seven themes

A theme is only a stylesheet of tokens. Pick one: this page and the block below change without a single class being rewritten.

landing · FeatureBento

Install any of it with one command

Declare the registry once in components.json — React projects point at /r/react/ — then add components, whole blocks or a single variant. The code lands in components/trame/, with everything it needs.

Browse the blocks
terminal
# components.json — once
"registries": {
  "@trame": "https://trame-ui.com/r/vue/{name}.json"
}

# then a component, a whole block, or one variant
npx shadcn-vue@latest add @trame/button
npx shadcn-vue@latest add @trame/landing-steps
npx shadcn@latest add @trame/landing-steps--cards
  • A component

    With its own pieces and the theme it needs.

  • A whole block

    Every variant, its parts, schema and demo.

  • One variant

    Only what that variant uses.

Questions

Before you start

Is Trame free?

Yes. Today every block and component is free to browse and install from the registry.

Do I need the @trame-ui npm packages?

No. The registry copies the source into your project; the only dependencies are public ones (Vue or React, Reka UI or Radix, Tailwind, lucide, zod).

Vue or React?

Both. All 752 blocks and 99 components exist in each, with the same schema, demos and HTML.

Which frameworks are supported?

Anything that runs Vue 3 (Vite, Nuxt) or React 19 (Vite, Next.js with server components). Styling is Tailwind CSS v4.

How do themes work?

Every colour, font, radius and motion is a token. A theme is a set of CSS variables: swap the stylesheet and every block follows, light and dark.

Can I change the code?

It is yours once installed. Edit, delete, rename — nothing upstream will overwrite it.

Start with one block

Pick a section, copy one command, and it is in your project — themed, accessible and server-rendered.

Browse the blocks