Liro UI Components Changelog

Every entry says what it means for someone who has already installed the thing, rather than what was edited. Components you have downloaded never change underneath you, you re-install when you want the new version, not before.

Layro is now Liro

  • changedNew name, same product: Layro is now Liro, at liro.dev. Accounts, purchases and CLI tokens carry over unchanged.
  • changedNew installs use the @liro registry, LIRO_KEY and styles/liro.css. A project set up with @layro, LAYRO_KEY and styles/layro.css keeps working as it is; nothing to change.
  • changedAnimation names in the theme are now liro-*; the earlier layro-* names still work, so your own code that uses them keeps animating.

Security updates

  • changedRich Text Editor now runs on Tiptap 3 (Tiptap 2 has a security advisory with no fix). Installing it again brings @tiptap/react, @tiptap/starter-kit, @tiptap/extensions and @tiptap/pm 3.x; remove the old @tiptap/extension-link, -placeholder and -character-count packages. The editor looks and behaves as before.
  • fixedThe site runs on a patched Next.js and sends stricter security headers; sign-in only ever returns you to a page on layropro.com.

A light that shows what is still working

  • changedAI Agent: whatever is running now carries a soft light passing across it, the same one the newer agent components use. Tool Call, Agent Run Status (and its badge in Run History), Agent Execution Graph, Trace Waterfall, Run Replay, Agent Inbox, Agent Steering, Agent Tree, Agent Lanes, Web Search Results, Failure Recovery and Dry-run Preview. Nothing to change in your code; with reduced motion it is not drawn.

Nine free pieces: theme toggle, context menu, mockups and more

  • addedFree: Theme Toggle (circular reveal, system that follows the OS), Context Menu (never off screen, submenus that stay open on a diagonal), Sortable List (keyboard reorder and undo) and Loaders (with a hook that stops quick replies flashing a spinner).
  • addedFree for landing pages: Device Mockups (laid out at the device's real width), Hero Video Dialog (loads nothing until play), Split-flap Board, Cover Flow and Confetti.

Ten more: agent plans, fallbacks, conflicts, and account security

  • addedAI Agent: Plan vs Actual (a finish time from real pace), Fallback Chain (which model answered and why the others didn't), Conflict Radar (parallel agents' collisions before merge), Decision Tree (the agent asks, nothing pre-picked) and Scheduled Runs (work fitted into usage windows). Included with lifetime access.
  • addedGenerative Preview: streamed HTML rendered live in a sandboxed frame with no network, without flashing broken markup mid-stream.
  • addedWorkspace: Env Variables (write-only values and a redeploy reminder) and Notification Preferences (security notices locked on, pauses that end).
  • addedAuth: Two-Factor Setup (turns on only after a code works and backup codes are saved) and Sessions & Devices (sign out everywhere else, keeping this device).

Calendar, Gantt, Workflow Builder and three agent views

  • addedEvent Calendar: month, week, day and agenda views with drag, resize and create. Events keep their own time zone across clock changes.
  • addedGantt: a schedule with dependencies. Dragging a task pushes the ones that depend on it and shows the new finish date first.
  • addedWorkflow Builder: a node canvas that refuses wrong-type wires and loops, and keeps Run off until every problem is fixed.
  • addedAI Agent: Agent Ledger (undo with what depends on it), Fan-out Grid (one job across many workers) and Agent Queue (rate limits shown as a pause). Included with lifetime access.
  • addedLayro MCP offers all six with usage examples and the components they pair with.

Web Shot Button

  • addedWeb Shot Button, free: a red glass button that shoots silk at the pointer, in any tint or clear glass. A resting button costs nothing.
  • addedLayro MCP offers it with a usage example and the components it pairs with.

29 new components: agents, SaaS pieces and Creative effects

  • addedAI Agent: Agent Inbox, Agent Steering, Autonomy Dial, Scoped Permission Grant, Model Picker, Prompt Library, Inline Diff, Sub-agent Tree, Delegate Board and Agent Lanes. Included with lifetime access.
  • addedAgent Email Draft, free: an email an agent wrote, to check, retone without losing your edits, and send with an undo window.
  • addedIntegrations and onboarding: Integration Picker, Integration Settings, App Directory and Setup Guide. Included with lifetime access.
  • addedProfile Menu, free: the account menu behind the avatar, with Sign out of all devices kept apart from Sign out.
  • addedAnalytics: Breakdown Chart, Compact Breakdown and Experiment Card, included with lifetime access, and Change Summary, free.
  • addedPricing Plans for marketing pages, and Billing Schedule and Invoice + Credit Note for contracts. Included with lifetime access.
  • addedCreative: Logo Marquee, Integration Beam, Gradient Text, Gradient Floor, Blur Crossfade and Model Wheel, all free.
  • addedLayro MCP offers all 29, each with a usage example, layout notes and the components it pairs with.

AetherFlow template

  • addedAetherFlow, a landing page template for SaaS and creative-team products: nine sections, a live product mockup, pricing and testimonials. Included with lifetime access.

Recipes, layout notes and better answers for AI tools

  • addedLayro MCP has recipes: complete files for an AI chat app (sidebar, conversation list, chat and a phone drawer), a dashboard and a billing page.
  • addedEvery component now has a real usage example, notes on how it sizes and scrolls, and the components it pairs with, for your AI tool and in /llms-full.txt.
  • addedLayro MCP can describe the theme, so your AI tool restyles Layro to your brand by setting CSS variables instead of editing components.
  • addedNew chat can add a conversation to your own list (onNewChat), and the header takes a menu button for phones (headerLeading) and buttons of your own (headerActions).
  • addedSet its width, host one self-scrolling child with flush, and use SidebarDrawer for the same sidebar on phones.
  • addedAvatar can show initials instead of a drawn face, with fallback="initials".
  • changedAI Chat's status dot, Conversation History's unread dot and Chat Empty State's glow can follow your brand colour (--status-live, --status-busy, --status-unread, --glow-1 to 3). They look the same until you set them.
  • fixedPanels no longer stay hidden for people who turned off motion.
  • fixedA section with your own content no longer disappears when nothing is being searched.

Layro MCP connects more reliably

  • fixedLayro MCP accepts the request headers more AI tools send, and answers their sign-in and SSE checks straight away, so they connect without retrying.
  • changedLayro MCP starts faster after a quiet spell: the first handshake no longer loads the component library.
  • changedThe MCP setup page says on every tab that the token is needed, free components included, adds Lovable, Emergent and other tools, a check step for each tool, and a snippet that tells your agent to stop when Layro is not connected.

Free and Pro

  • changedDrawer is now free.
  • changedResizable is now free.
  • changedTool Call is now free, so there is an AI Agent component to try before buying.
  • changedContext Window is now free, so there is a RAG & Evals component to try before buying.
  • changedTemplates come with lifetime access and are no longer sold on their own. The bundle pages are gone: lifetime access is the one paid offer.

Automated checks

  • fixedThe search box in the comments panel now has a label for screen readers and shows a focus ring.
  • fixedDemo: the page scales down and the comments panel moves under it on phones and tablets.
  • fixedDemo: fits a phone screen.
  • fixedDemo: the four states stack on a phone.

New look

  • changedThe theme (layro.css) has softer greys, a charcoal dark mode, lighter borders and the Geist font. Add any component again, or reinstall layro-theme, to get it; the old file keeps working until you do. Geist has to be loaded in your app (see Theme → Font); without it the system font is used.
  • changedCharts are now in the theme's ink and greys instead of blue, orange and green, to match the black primary. To keep colours, set --chart-1 … --chart-5 on a parent.

Chatbot

  • addedChatbot: AI Chat as a floating widget, an embedded panel, a resizable copilot sidebar or a full page, with your logo and the assistant's connection in the header, clear, expand and minimise, past chats behind a clock button, and a full sheet on phones. Free.
  • addedAnswers can ask back: choices, a one-pick question and a Confirm arrive in the stream, and the pick is sent as the next message and reported through onAction. Also a thinking trail (steps), system lines, a notice above the box, and tools in the box. Existing props work as before.
  • changedWhen finished with steps it reads “Thought for 5s · 3 steps”.

Fixes from early feedback

  • fixedApproving one person no longer marks other people's requests for the same folder as superseded. Only the same person's other requests for that thing are superseded now; supersededBy.name is optional.
  • changedThe whole card row now picks the default, not only the radio dot. The expiry note stays on the expiring card whichever card is the default, so the list no longer changes height.
  • fixedPicking a plan with fewer features no longer makes the picker jump in height.
  • fixedSwitching between Input, Output and State keeps the panel the same height.
  • fixedSwitching between the tree and the raw output keeps the panel the same height.

Wizard, Settings Page and Dashboard

  • addedStepper now includes Wizard: each step brings its content and a check, Next stops with the reason, Back keeps what was typed, optional steps get Skip, and Finish waits for your save and shows its error. Stepper on its own works as before.
  • addedSettings Page: sections with a list that follows the scroll, search across every setting, a save bar that appears on change and asks before anyone leaves unsaved, and a danger zone.
  • addedDashboard: headline numbers, a trend, a breakdown, a comparison and a ranked list on one date range, in the theme's greys, with loading, empty and failed states. Free.

Alert, Progress Bar and Progress Circle

  • addedAlert: an inline notice in five tones with a title, one action and an optional close. Warnings and errors are announced to screen readers at once. Free.
  • addedProgress Bar: determinate or not, three heights, your own words for the value, and it says so when a value goes over the limit. Free.
  • addedProgress Circle: the same props in a ring, from a 16px spinner to a step counter, with a value, fraction or icon in the middle. Free.

RAG & Evals, and the agent tools to debug a run

  • addedA new category, RAG & Evals: Retrieval Inspector, Citation Verification, Ingestion Pipeline, Prompt Test Matrix, Model Comparison, Context Window, Eval Leaderboard, Output Validator, Evidence Map and Data Lineage.
  • addedFor agents: Agent Execution Graph, Trace Waterfall, Run Replay, Failure Recovery, Agent Permissions and Dry-Run Preview. For chat: Memory Manager.
  • changedApproval Request shows the exact changes, scopes and who asked, can ask for changes instead of rejecting, and can require typed confirmation.
  • changedAgent Timeline can inspect a finished run: a run header, each step's input and output, nested steps joined to their parent, secrets redacted, and Retry on a failed step.
  • changedVersion History compares versions in place, word by word for text and line by line for code, with the model and prompt behind each AI version.
  • fixedThe theme import line for Next.js projects is now @import "../styles/layro.css"; from app/globals.css. The old line pointed to the wrong folder.
  • fixedSigner Flow and Document Request now read correctly to screen readers, and the signer list can be scrolled with the keyboard.

The UI system for AI-built products

  • addedA Docs page: how to install, and a rules block that makes Claude Code, Cursor or Codex reach for Layro before writing UI of its own.
  • addedEvery component page has an AI tool tab with a prompt to paste into your coding agent.
  • changedThe free plan is now 2 free components a day. Copying the code, downloading the file or installing with the CLI counts as one; reading the code and the previews never count, the components it imports come with it, and one you have already taken can be copied again. A count in the header shows what is left. Lifetime access has no limit.

A home of its own: layropro.com

  • changedThe site moved to layropro.com. Install commands and the CLI registry use the new address; the old one keeps working, so nothing you already set up breaks.
  • addedSign in with GitHub, next to the emailed link.
  • changedCode panels follow the theme, and the components section uses the whole window.

Layro System, and one plan: lifetime access

  • addedLayro System: 34 components on one control scale, from Button and Field to Data Table, Charts, Command Menu and Rich Text Editor. 31 are free.
  • changedOne plan instead of bundles and team licences: lifetime access. One payment opens every component and template, and everything released later.
  • changedAccess is by account. Sign in, and the Code tab, the CLI token and the downloads all follow what your account owns.

Bundle 03: Billing & Subscriptions

  • addedBundle 03: Billing & Subscriptions: subscription status, plan picker, invoice history, payment methods, payment recovery, usage & overage, cancel & downgrade, receipt and checkout.
  • addedPlan Picker, Invoice History, Usage & Overage and Receipt are free, and public on 21st.dev.

Subscriptions

  • addedLayro Pro, one subscription opens every component and both bundles. Premium templates are still bought on their own.
  • addedAccounts, with sign-in by emailed link and no password to lose.
  • addedA CLI token per account, so the shadcn CLI can install paid components without a browser session.
  • addedCopy for AI on every component page, a full brief for Cursor, Claude Code or v0, generated from the component's own source.
  • addedProps tables parsed from each component's TypeScript interface at build time, so they cannot drift from the file you install.
  • added⌘K search across components, bundles and templates.
  • addedTerms, licence, refund and privacy pages.
  • changedComponents and bundles are no longer sold separately. Anything downloaded while subscribed stays yours permanently, including after a subscription ends.

The Workspace half

  • addedBundle 02: Workspace Access: members, roles, access requests, the permissions matrix, access review, seat usage, team switcher and ownership transfer.
  • addedScroll Fill Text, a headline that colours itself in as the page scrolls past it.

Became Layro

  • changedThe store moved to layro.vercel.app and to Lemon Squeezy as merchant of record.
  • addedComponents delivered through a shadcn registry, so one command installs a file and its dependencies.