lib
Browse blocks

Changelog

New blocks, components and examples, and what changed in the ones you already use.

New Updated Fixed Removed

  1. Full-height blocks centered on the page

    • Blocks that fill the screen now center their card vertically instead of pinning it to the top
    calendar-051.0.1(fixed)calendar-061.0.1(fixed)charts-011.0.1(fixed)charts-021.0.1(fixed)charts-031.0.1(fixed)charts-041.0.1(fixed)charts-051.0.1(fixed)charts-061.0.1(fixed)charts-071.0.1(fixed)charts-081.0.1(fixed)charts-101.0.1(fixed)empty-state-061.0.1(fixed)files-021.0.1(fixed)files-041.0.1(fixed)files-051.0.1(fixed)inbox-021.0.1(fixed)logs-011.0.1(fixed)logs-031.0.1(fixed)logs-041.0.1(fixed)logs-051.0.1(fixed)logs-101.0.1(fixed)notifications-011.0.1(fixed)notifications-031.0.1(fixed)notifications-041.0.1(fixed)notifications-051.0.1(fixed)notifications-101.0.1(fixed)

  2. Pricing 02: divider between the plans

    • The line between the two plans is a real border now, so it stays visible in dark mode
    pricing-021.0.1(fixed)

  3. 20 new pricing sections

    From yearly discounts and credit packs to a plan finder, usage calculator, lifetime deal and in-product upgrade.

    pricing-111.0.0(new)pricing-121.0.0(new)pricing-131.0.0(new)pricing-141.0.0(new)pricing-151.0.0(new)pricing-161.0.0(new)pricing-171.0.0(new)pricing-181.0.0(new)pricing-191.0.0(new)pricing-201.0.0(new)pricing-211.0.0(new)pricing-221.0.0(new)pricing-231.0.0(new)pricing-241.0.0(new)pricing-251.0.0(new)pricing-261.0.0(new)pricing-271.0.0(new)pricing-281.0.0(new)pricing-291.0.0(new)pricing-301.0.0(new)

  4. Pro code on the site, sales and the admin

    • Pro accounts now see the code of Pro blocks on the site; everyone else sees the plans, with a sign-in link for buyers
    • Pricing 01 takes a sale price (struck-through former price), a line under the price, an intro above the features, a promo badge and a footer
    • Launch offer: Pro and Team at a reduced one-time price
    • Admin: items grouped by category with counts, a menu to set a whole category, and instant changes
    • Admin accounts get a Pro license of their own for the CLI and the MCP
    pricing-011.1.0(updated)

  5. Versions and update checks

    Every block and component now has a version, starting at 1.0.0, and every change to one is logged here with its new version.

    • The first line of each installed file names the item and its version, e.g. // @lib/pricing-01@1.0.0
    • Ask your AI assistant to check your blocks for updates: the MCP's new check_updates tool lists what is behind and what changed
    • The changelog now tells new, updated, fixed and removed items apart, and shows each item's version

  6. Fixes

    • Cards stay as tall as their content: log cards no longer stretch to the bottom of the page, and cards matched to a taller neighbour keep their footer at the bottom
    • The divider next to the sidebar button in the breadcrumb header is centered again
    • Long files scroll inside the code viewer instead of being cut off
    • The 404 category is now Error pages, since it also holds 403, 500 and maintenance pages
    logs-01(updated)logs-03(updated)logs-05(updated)logs-10(updated)dashboard-05(updated)billing-09(updated)app-shell-01(updated)header-05(updated)Error pages blocks(updated)

  8. MCP server

    Ask your AI assistant for a block: it searches the library, reads the code and installs it.

    • Connect Claude Code, Cursor or VS Code to /mcp; setup snippets in the docs and on your account page
    • Tools to search blocks and components, read an item with its dependencies, and set up the registry
    • Pro items come with your license key, like the CLI

  9. Accounts

    Pro now lives in your account: pay from it and it switches to Pro, nothing to paste.

    • Get Pro opens the checkout for your account; it turns Pro as soon as the payment is confirmed
    • Your CLI key and the components.json setup on your account page
    • The page builder exports Pro blocks with the license of your account

  11. Theme editor

    Pick a gray, an accent, a radius and fonts, see them on real blocks in light and dark, and copy the CSS.

    • Six grays from neutral to olive, a monochrome default or any accent hue
    • Live preview on a dashboard, pricing, sign-in, settings and chat block
    • Status colors stay readable: warnings, success and errors never change

  12. Validator Console example

    Run Ethereum validators from one screen.

    • Slots and epochs tick live, with attestations per epoch and proposals announced as they happen
    • An offline validator is flagged with what it costs and how to fix it
    • Validator details with balance history, and a voluntary exit that asks for confirmation and queues the withdrawal
    • Rewards split between consensus and fees, proposed blocks, deposits and withdrawals
    Validator Console example(new)

  13. Stride running example and the KPI component

    A running app built on the new @lib/kpi, which now powers the numbers in every example.

    • A feed with kudos, comments and a friend running live on the map
    • Run details with a route replay, elevation, heart rate zones and splits
    • Training volume by week, a year of runs as a heatmap, personal records and segments
    • @lib/kpi: a number that animates when it changes, good or bad news by direction, a sparkline and an optional goal
    Stride example(new)kpi(new)

  14. Gallery and Carousel

    20 new blocks for showing photos, products and stories.

    • Gallery: a lightbox grid, masonry albums, bento stories, a product gallery with zoom and a before and after slider
    • Gallery Pro: a full-screen viewer with a filmstrip, justified rows, a portfolio, a scrolling photo story and a photo manager with drag to reorder
    • Carousel: destinations with dots, a product row, an autoplay hero, synced thumbnails and a vertical carousel
    • Carousel Pro: coverflow, plans with tabs on phones, stories, a timeline with year tabs and looping testimonials
    Gallery blocks(new)Carousel blocks(new)carousel(new)gallery-01(new)gallery-02(new)gallery-03(new)gallery-04(new)gallery-05(new)gallery-06(new)gallery-07(new)gallery-08(new)gallery-09(new)gallery-10(new)carousel-01(new)carousel-02(new)carousel-03(new)carousel-04(new)carousel-05(new)carousel-06(new)carousel-07(new)carousel-08(new)carousel-09(new)carousel-10(new)

  15. Accessibility pass

    Every block, example and site page now passes an automated axe audit in light and dark.

    • Stronger contrast for warning, success, destructive and secondary text
    • Names for icon-only controls, sliders and popovers; valid ARIA roles throughout
    • A disabled button inside an input group no longer dims the whole field
    settings-06(updated)hero-04(updated)inbox-06(updated)charts-10(updated)

  16. Page builder: texts, themes, pages and project export

    • Click any text in a block to change it; edits carry into the exported code
    • Pick an accent color, corner radius and fonts for the whole page
    • Keep several pages in your browser
    • Download a ready-to-run Next.js project; Pro blocks come with a valid license key

  17. Examples remember where you were

    Views keep their live state when you switch away and back, and ?view= links open a view directly.

    FiveM server example(updated)

  18. Ticario example

    Maintenance tickets for a seasonal hotel, with the features of the Ticario app.

    • Housekeeping reports a problem in seconds: a photo, the room, a note, urgent by default
    • Technicians time their work, pause, wait for a part and close with photos; reception validates one or many tickets, with undo
    • An email-like workspace: resizable ticket list, one conversation where messages and actions share the thread, and a resizable details column with before and after photos
    • Several people or teams per ticket, a team tree with leaders, roles built from permissions, room history, stock with alerts and statistics
    Ticario example(new)

  20. Notifications

    10 blocks for everything that asks for someone's attention.

    • Bell popover, a notifications page grouped by day, requests to answer in place, channel preferences, a what's new panel
    • Pro: a notification center with snooze and archive, an email digest with live preview, system alerts, mentions with inline replies, a live activity stream
    notifications-01(new)notifications-02(new)notifications-03(new)notifications-04(new)notifications-05(new)notifications-06(new)notifications-07(new)notifications-08(new)notifications-09(new)notifications-10(new)

  23. A deeper FiveM example

    The FiveM server panel now works like a real admin tool.

    • Live map of players, a console that runs commands, and a player panel to spectate, kick or ban
    • New Resources, Economy and Staff views
    FiveM server example(updated)

  25. Pro license keys

    Pro items install with a license key. The key is checked on every request and Pro source never reaches the public site.

    • Set LIB_LICENSE_KEY in .env.local and add the header to components.json, see the docs

  26. Fixes

    • The command menu no longer crashes when it opens
    • Header previews sit on a page skeleton, and the builder shows headers on their own
    • Every section of the landing page lines up on the same grid
    search-command(updated)

  33. First release

    The library opens with blocks for marketing pages and apps, reusable components, live examples and a page builder.

    • Every block installs with the shadcn CLI and works in Next.js, Vite, React Router and Astro
    • Variants 01 to 05 of each category are free, 06 to 10 are Pro
    • Live examples: stocks, crypto, EV cockpit, smart home, hotel, FiveM and AI agents