Changelog

3.0.0 — November 2026#

Every component, example, documentation page and script was reviewed line by line before this release. No export, prop or data-slot was removed: the changes are fixes.

Components#

• Calendar. Focus follows the arrow keys again; the month and year dropdowns show keyboard focus; disabled days are dimmed once, not twice.
• Combobox. disabled on the root or on the field reaches the input.
• Accordion. A disabled item is dimmed and doesn't react to hover.
• Carousel and Sidebar. Your own onKeyDown and onClick no longer replace the built-in handlers, and dir reaches the desktop sidebar.
• Fields. Disabled and invalid states look the same across Input, NativeSelect, InputOTP, Combobox chips, Switch and Toggle. InputGroup, Combobox chips and InputOTP show focus in forced-colors mode.
• Menus. ContextMenu sizes like DropdownMenu and stays inside the viewport.
• Overlays. AlertDialog has Dialog's text size and scrollbar, SheetFooter has the footer surface, and links inside descriptions look the same everywhere.
• Chart. The legend falls back to the series name; tooltip and legend content pass id, style, data-* and aria-* to their root.
• Slider. The thumb's hit area is 32px, as documented.
• tabsListVariants and toggleVariants can be called from Server Components. Badge's ghost and link variants react to hover only on a link or a button.

Examples#

• Installed templates show their toasts. The page an example adds mounts the toaster when the example uses toasts.
• Undo can't insert a row twice; Booking and Authentication can't be sent back in the middle of a request; the delete confirmation resets when closed; table selection follows the filter; dates in the data table don't depend on the time zone.
• Forms in documentation examples no longer reload the page, filters reset completely, and the IDE example uses theme colors, so it keeps them after install.
• Menus and segmented controls use the parts that carry their state to assistive technology.

Documentation#

• Statements corrected against the code: props, defaults, counts, commands, and guidelines the examples did not follow.
• <kbd> in prose renders as the Kbd component.
• Requirements are Next.js 16 and Node.js 22.

Site and tooling#

• text-code was a color on this site and a type role everywhere else. It is the type role everywhere now.
• The home page's social image no longer needs a redirect.
• Removed: two unused dependencies, dead components, props, messages and CSS. pnpm check also checks formatting, tests that could not fail were rewritten, and the generated token files are tested against their source.

2.3.0 — November 2026#

Example apps become templates: read their code on the site and install them with one command. The home page is now one of them.

Examples#

• Preview and Code. Every example has a Code view with the files it is made of, exactly as they are installed.
• Install an example. shadcn add with an example's address writes it into components/, adds a page that shows it and installs the components it uses. See Installation.
• Two landing pages. Bento has a two-tone headline and a grid where every feature is shown with the thing itself; classic has a centered hero and a wall of components. Both end with install steps, questions and a closing call to action.
• Installed pages have a title and a description. The page an example adds exports metadata, so it is ready for search engines from the first deploy.

Site#

• A new home page. It is the bento landing page example, rendered inside the site's header and footer. The old home page and its components are gone.

2.2.0 — November 2026#

Two more example apps, written to be read: each is one file of a few hundred lines.

Examples#

• Booking at /examples/booking: scheduling a call. A calendar with unavailable days, free time slots, a short form with validation and a confirmation that takes focus.
• Team at /examples/team: members and invitations. Search, roles that change in place, removal with undo and an invite dialog. On a phone each member's controls take a line of their own.

Fixes#

• Example apps that show a calendar load the date locale, so the calendar speaks the page's language.

2.1.1 — November 2026#

Hardening for production: nothing new to learn, fewer ways for a page to go wrong.

Fixes#

• No layout shift from thumbnails. A thumbnail's zoom is computed in CSS, so the server's HTML is already the right size. On a slow phone the example gallery used to jump when its script arrived.
• An error page. A page that throws shows a message in the visitor's language, with a way to try again, instead of the framework's default screen.
• Examples fail alone. A live example that throws is replaced by a short note, and one whose code doesn't arrive keeps the server's markup; the page around it stays.
• Less script on documentation pages. The calendar's date locale loads only on pages that show a calendar. Every other documentation page is 12 kB lighter.

Tooling#

• CI runs the checks and every end-to-end suite on each pull request, and a weekly job installs prfct into a fresh project on the latest release of every dependency.
• pnpm typecheck generates Next's route types first, so it passes on a fresh clone.
• SECURITY.md says how to report a vulnerability.

2.1.0 — November 2026#

Black and white by default, a second brand color, and every component checked against its documentation and against a fresh install.

Foundations#

• Black and white by default. The brand is now mono: solids are the neutral's darkest step, and color is left to status and to your theme. Set brand in themeConfig to a preset or a color of your own to bring one back.
• A second brand color. brand-secondary is a full 12-step scale with its own roles, and Badge gains variant="brand-secondary".
• The focus ring holds 3:1 for any brand. ring points at a new brand-focus color: the solid when it stands out from every surface, the brand's text step when it doesn't. A light brand such as amber used to draw its ring at under 2:1 on white.
• Forced colors. In Windows High Contrast, pressed, current, highlighted and selected states take the system's selection colors, floating surfaces keep an edge, and menu items no longer carry a permanent outline.
• Type roles instead of literal sizes. Wherever a 13px size was written out, in Button, Badge, InputGroup, the examples and this site, the text now takes its role: text-label-sm, text-body-xs or text-code. Lines that sat on 19.5px now sit on the 4px grid.
• Italics on a first visit. The italic file is optional, and until it was cached, emphasis was drawn upright. The browser may now slant the fallback instead; faux bold stays off.
• New interaction roles: secondary-hover, secondary-active, brand-hover, input-hover and border-hover.
• ThemeProvider's D shortcut is opt-in, through hotkey.

Components#

• Command installs cleanly. The shadcn CLI rewrote one of its props on the way in, and the installed file failed type-checking.
• Popover gains PopoverClose, which a modal popover needs to trap focus. Button gains icon-xl. Table gains containerClassName.
• Form controls: resting the pointer on a control no longer repaints its border. A focused Input, Textarea, Select, NativeSelect, InputGroup or Combobox keeps its focus color, and a checked Checkbox or radio keeps the brand color.
• Checkbox and RadioGroup: the invisible hit area is a true 24px. It measured 22px, because its insets count from inside the border.
• Alert: an action takes a column of its own, so the text never runs under it, whatever its width.
• ButtonGroup: the two ends keep the radius of their size, at xs and xl too.
• Calendar: without a locale, dates are written in English on the server and in the browser alike, which removes a hydration mismatch for visitors in other languages. Days of the neighbouring months are muted, a day's accessible name contains its number as a word, and week numbers are the row headers their attributes say they are.
• Accordion: a focus ring at the very top of a panel is no longer cut off. Progress: with reduced motion, an indeterminate bar rests in the middle of the track, where it can't be read as a third done.
• Drawer: the content scrolls when it is taller than the drawer may grow, as on a phone in landscape.
• DropdownMenu: a menu grows to fit its longest item.
• Toast: the type is read out with the message, and in a narrow toast the action moves under the text.
• Sidebar: isActive sets aria-current="page"; on phones, props such as id and aria-label reach the panel; action buttons keep a 24px target.
• Switch: when checked, the thumb takes the color made for the brand fill, so it stays visible on a light brand and on the default theme in dark mode.
• ScrollArea: the thumb takes the 3:1 boundary color, and so do thin native scrollbars.
• Spinner: label="" makes it decorative. Separator: a decorative rule keeps its other props. AvatarGroup is a group, so its label is announced.
• Input accepts Base UI's props, render and onValueChange among them, and its read-only fill no longer applies to file inputs. NativeSelect uses 16px text on phones, where anything smaller zooms the page on focus.
• NavigationMenu: a disabled trigger looks disabled. Item: a separator outside a list keeps its role. Chart: id reaches the element, keyboard focus draws a ring around the chart, and a long label in the tooltip no longer touches its value. Resizable: a focused handle shows a ring, not only a change of color. Card: a nested card's footer no longer removes the outer card's padding. Label dims inside a disabled Field.
• Select, Avatar and AlertDialog sizes are plain classes, so a size in className wins. ScrollArea wraps its content in an element of its own.

Documentation#

• Eight example apps at /examples: dashboard, mail, assistant, checkout, pricing, settings, invoices and authentication, each one interactive.
• Copy page gives a page as Markdown: examples become code and reference tables stay tables.
• A rebuilt theme builder: two brand colors by preset, hue or hex, a contrast table that includes the focus ring, and a stylesheet to download.
• Every page was checked against the source it describes: about a hundred statements corrected on some fifty pages, in both languages.
• The introduction says what prfct is, a design system for Next.js built on shadcn, and lists what it adds to shadcn's components and the one part it leaves out.
• Installation names the questions the CLI asks and how to answer them.
• Anatomy diagrams for RadioGroup, InputOTP, Collapsible, Resizable and Carousel, and in every diagram a pointer to a text part now ends beside the text, not on it.
• The Checkout and Assistant examples no longer leave empty space to scroll into below the footer: their scroll containers are positioned, so visually hidden content stays inside them. Drawer positions its content for the same reason.
• Landmarks and headings: the two side rails of this site are no longer unnamed complementary landmarks, and small titles inside examples no longer break the heading order of the page around them.
• The examples follow the system's own rules more closely: card grids keep the gap the spacing rule asks for, the video frame stays visible on a dark page, and the last gradient cover is gone.
• A new mark.

Tooling#

• pnpm test:install installs prfct into a fresh project with every component and every example, on the latest release of each dependency, then lints, builds and type-checks it. It also checks that prfct keeps every export and data-slot of shadcn's current components, and builds the shadcn components prfct doesn't have against prfct's.
• A registry test keeps every shipped file installable, the page health check also runs on a 320px screen, a new test checks that hover never repaints the border of a checked or focused control, and no page may be taller than its footer.
• Built and tested on Base UI 1.9, Next.js 16.4, React 19.3 and Recharts 3.10.

2.0.0 — October 2026#

A quieter, more precise prfct. Every surface was redrawn around one rule: structure comes from type, space and a single hairline, never from decoration.

Foundations#

• Raised surfaces are flat. Cards, inputs, selects, checkboxes, outline buttons and toggles are drawn by their 1px border alone; shadow-raised now resolves to no shadow. Only floating and modal layers cast shadows.
• Solid buttons lose their bevel. default, brand and destructive are flat fills; the bevel utility is gone.
• Display type breathes. Display roles weigh 600 and track at Inter's own metrics, −0.020 to −0.024em, with slightly taller line heights.
• Calmer status dots. BadgeDot live fades gently instead of pinging, and is meant for activity in progress only.
• The focus halo on text fields is a single ring, without the extra shadow.
• AvatarGroup overlaps by a fifth of a diameter, so initials stay whole.
• The bg-grid utility is removed.

Documentation#

• Previews show their code. The example and its source sit together; long sources start collapsed. The dotted canvas is gone.
• Tables are drawn with rules only. Sidebar, table of contents and footer headings are set in sentence case.
• Pages marked Stable no longer carry a badge; only New, Beta and Deprecated do.
• Search is a button on phones, too.
• Theme switching is instant.
• The component overview renders its thumbnails on the server; only the chart, which measures its container, loads code in the browser.
• A new home page: the product, then a specification of the foundations, components, theming and code.
• New page: Production.

Production#

• Security headers on every response: a Content Security Policy kept as data in lib/security.ts, HSTS, X-Frame-Options, Cross-Origin-Opener-Policy, a stricter Permissions-Policy.
• A security registry item installs the same baseline into any Next.js project: shadcn add https://www.prfct.dev/r/security.json.
• /.well-known/security.txt, a web app manifest, PNG and ICO icons, and robots directives for large image previews.
• The registry and token files can be read from any origin.

Fixes#

• No page scrolls sideways or cuts content off on a 320px screen, in either language.
• Card: the title wraps before CardAction is squeezed, and the footer's actions wrap.
• Long identifiers in prose wrap instead of widening the page.
• Previous and next links are translated.
• Examples use neutral placeholders instead of gradient artwork.

1.1.0 — September 2026#

prfct speaks more than English.

Localization#

• LocaleProvider switches the words components say on their own — close buttons, a spinner's status, pagination, breadcrumb and carousel landmarks, the mobile sidebar and the command palette — with English and Polish built in and any other language one object away. See Localization.
• Calendar takes its date locale from the provider; Chart tooltips format numbers in its language.

Documentation#

• In Polish, at /pl: every page, example, token description and Open Graph image, with shared anchors, hreflang alternates, a Polish search index and /pl/llms.txt.
• Examples are written once and translated from string catalogs at build time, so the code you copy is the code that runs.
• Structured data (breadcrumbs and articles) on every page.

Fixes#

• PaginationEllipsis and BreadcrumbEllipsis are announced to screen readers instead of being hidden from them.
• Anatomy descriptions render inline code.
• Registry items no longer list type-only imports as dependencies.
• Pages no longer carry the search index; the palette fetches it when it's about to open.

1.0.0 — September 2026#

The first stable release.

Foundations#

• Generated OKLCH palette. Ten 12-step scales — gray, brand, red, amber, green, blue, orange, teal, violet, pink — generated for light and dark mode, with text steps solved for WCAG 2.2 AA.
• Semantic tokens compatible with shadcn/ui naming, plus brand, surface, field, input, edge, overlay, selection and status roles.
• Self-hosted Inter 4.1 with every OpenType feature and optical sizing; Geist Mono for code.
• Semantic type roles: display, heading, body, label, caption, overline and code.
• Motion tokens with CSS linear() springs, and shared choreography utilities for popups and modals.
• Scoped themes: any subtree can switch mode with a class.
• DTCG 2025.10 token exports for design tools.

Components#

• 54 components built on Base UI and restyled from the ground up.
• Button gains a loading state that preserves width and focus.
• Input, Select and NativeSelect gain sizes aligned with Button.
• Tabs gain a sliding indicator; Sheet gains a floating variant; Command gains a keyboard-hint footer.

Documentation#

• A page for every component: live examples, guidelines with do's and don'ts, a keyboard reference for interactive ones and the API — plus anatomy diagrams, measured from the live component, for 23 of them.
• Foundations, patterns, a theme builder and four example apps built only from prfct.
• Ranked search with synonyms, a /llms.txt index for language models, and Open Graph images for every page.

Tooling#

• Registry with every component and the theme, installable with the shadcn CLI and tested against a fresh project.
• Token-aware cn().
• Automated checks on every page: axe-core in light and dark mode, console errors, hydration and invalid nesting on desktop and mobile, and visible focus on every tab stop of the most interactive pages.