Blocks

31 blocks.
Components, assembled.

Login popups, mini dashboards, swap cards and widgets — built from the catalog’s own components, so what you paste is a working screen, not a pile of parts.

Newest · Budget · Vernier · Grain

MCP in your IDE 
$ claude mcp add --transport http vuesax \
    https://mcp.vuesax.com

One command in Claude Code or Cursor — then ask your agent for any of these 31 blocks by name, design tokens included.

New · Allocation

Budget

Spend against a limit with the PACE on the same ruler.

Live · BlkBudget

New · Distribution

Vernier

A reading on a POPULATED scale.

Live · BlkVernier

New · Comparison

Grain

Two periods as dot stacks on ONE baseline — the earlier run pale, the later run inked — answering the question a single "+326%" cannot, because growth has a shape.

Live · BlkGrain

View
Show
New PRO
BlkBudget Dashboard
New PRO
BlkVernier Dashboard
New PRO
BlkGrain Dashboard
New PRO
BlkCourseCard Learning
New PRO
BlkSneakerCard Commerce
New PRO
BlkTripCard Travel
PRO
BlkSwapMono Crypto
PRO
BlkSwapMesh Crypto
PRO
BlkDateRangePicker Productivity
PRO
BlkUploadFiles Productivity
PRO
BlkTelemetry Dashboard
PRO
BlkSavingsTracker Finance
PRO
BlkThreshold Dashboard
PRO
BlkReachCalculator Marketing
PRO
BlkCreatorCardFan Social
PRO
BlkSipCalculator Finance
PRO
BlkActivityWheel Health
PRO
BlkDayAgenda Productivity
PRO
BlkIntegrationOrbit Marketing
PRO
BlkDropCarousel Commerce
PRO
BlkAiComposer AI
PRO
BlkSavingsMeter Finance
PRO
BlkSendMoney Payments
PRO
BlkFindFriends Social
PRO
BlkCryptoBalance Finance
PRO
BlkProfileCard Social
PRO
BlkSwipeDeck Cards
PRO
BlkProfileSky Social
PRO
BlkStepCards Onboarding
PRO
BlkCommentCard Chat
PRO
BlkLoginPopup Auth
Go PRO

Close the gap between
the idea and the interface.

PRO hands you the source of every component, section and animation — plus MCP in your IDE, so Claude or Cursor writes them straight into your project. It also opens Vuesax Design, the visual editor, with 500 AI credits to start building in it.