Changelog

Banking app in Figma and React

Introducing Banking, a new shadcn/ui app with matching Figma designs and React code.

Everyday banking, connected#

The designs cover eleven main areas: overview, upcoming payments, accounts, cards, transactions, insights, currency exchange, recipients, transfers, settings, and help and support.

Supporting flows include sending and moving money, adding money, scheduling payments, managing recurring payments, card controls, savings jars, spending trackers and transaction tags.

Desktop and mobile designs#

The Figma file includes desktop and mobile layouts, with reusable components and blocks for the main screens and supporting states. Use the app UI as the foundation for your product and connect your own account data, authentication and financial services.

Explore the Banking app, open the designs in Figma, or read the announcement.

Trace and Code Block in Figma

Added Trace and Code Block to the shadcncraft Pro Figma kit, matching the anatomy of the new shadcn/ui components.

Trace#

• Reusable Trace, TraceLine, TraceCollapsibleTrigger and TraceCollapsible components.
• Default, running, error and pending statuses, hover and focus states, and open and closed variants.
• Editable titles, descriptions, icons and expanded content.
• Light and dark examples for activity, sources, reasoning and tool output.

Code Block#

• Composable header, content, line, footer and copy-button components.
• Default and small sizes, plus default and destructive variants.
• Line numbers, added and removed lines, highlighted lines, and copy/copied states.
• Light and dark examples for code, terminal output, diffs and use inside a Trace.

Both additions use the kit's style variables and document their matching React data-slot names. Download the latest Pro Figma kit from your customer portal.

Explore Trace in Figma, explore Code Block in Figma, or read the announcement.

shadcn/ui HR Dashboard: app and 46 blocks

The shadcn/ui HR Dashboard is now available as a complete Next.js app with 14 screens and 46 reusable React blocks, with 1:1 matching Figma designs. It's the first app that installs straight from the shadcncraft registry.

The app#

Personal and team dashboards, calendar, leave, timesheets, projects, teams, employee profiles, benefits, documents, requests, performance, onboarding, and analytics. Install it with one command:

pnpmyarnnpmbun
$ pnpm dlx shadcn@latest add @shadcncraft/hr-dashboard-1

The routes install under app/hr, so the app lives at /hr beside your existing pages.

46 shadcn/ui HR blocks#

Install individual blocks through the shadcn CLI, including request, leave, document, benefit, project, team, and review tables, a calendar, time tracker and timesheet, org chart, people directory, talent grid, review cycle, and headcount, attrition, tenure, and absence charts. Every block includes loading, empty, and error states.

Explore the app, browse all HR blocks, or read the announcement.

Create v2: build visually with shadcn/ui

Create v2 expands the existing preset customizer into a visual builder for pages made with real shadcn/ui components and shadcncraft blocks. The theme and preset controls remain, with a new editable canvas for building around them.

Build and customize#

• Start with a blank canvas, a marketing page, or a dashboard starter. Dashboard starters include Sales overview, Deals, and Campaigns with app navigation.
• Browse and search blocks and components in the Library, including a Free category.
• Customize Pro blocks on the canvas. Edit text, replace images, and adjust the appearance of individual elements.
• Compose custom blocks from shadcn components, text, images, and frames.
• Arrange content with stacks and grids, including alignment, wrapping, gaps, and padding. Control sizing, minimum and maximum dimensions, fills, borders, and radius from the right panel.

Preview and organize#

• Add linked desktop, tablet, and mobile views and adjust responsive properties.
• Open Preview to interact with the page outside the editing controls.
• Organize designs into apps and pages. Duplicate or archive apps from the app menu.
• Apply colors, fonts, icons, radius, and shadcn styles across the canvas, or import an existing preset.
• Save a selected block or group with Save to My blocks, then reuse it from Library → Blocks → My blocks. This feature requires Pro.

Export#

• Choose AI prompt for a design specification and project setup instructions, or Code to inspect, copy, and download source files.
• Export all pages, the current page, or a selected layer.
• Configure a new or existing project, framework, and package manager.
• Include uploaded images in the downloaded export.

The editor is free to use. Exporting designs containing Pro items requires a React license; designs made entirely with free items do not. Apps, saved blocks, and uploaded images are stored locally in your browser.

Read about Create v2 or open Create.

Figma plugin: theme previews, bulk installs, and AI handoff

This update makes it easier to explore shadcncraft, compare themes, and move from your Figma design into code.

• Preview themes before applying. Swipe through example components, charts, forms, and notifications. Switch between light and dark previews without changing your file.
• Browse themes faster. Previous and Next buttons let you compare themes from your filtered list without returning to the picker.
• Install multiple components. Select components or a containing frame and copy one install command. Duplicate installs are removed, and items that need attention are shown separately.
• Automatic install commands. The Code tab updates as your canvas selection changes.
• Copy an AI handoff. Bring design details, theme variables, and verified install commands into Cursor or another coding agent. Preparing the handoff doesn't make an AI generation call.
• Explore Pro inside Figma. Search and filter blocks, components, and apps, view their details, compare bundles, and purchase through the plugin.
• Follow Figma's appearance. The plugin now matches your light or dark mode, with improved contrast across previews, editors, and logos.
• More model choices. Expanded OpenAI, Claude, and Gemini options for code generation.
• Clearer kit information. Settings shows your file's kit version, with a Check for updates link to the changelog.

Also improved checkout loading, component lookup reliability, theme transparency handling, preview image fallbacks, and layout consistency. The feedback link now opens with Feedback selected.

Read the full announcement or open the Figma plugin.