Migrating to v2.

Version 2 changes the type scale, the icons, the Card, the brand inks and the finish of every surface, and adds 17 components. Here is what to change, in the order worth doing it.

let an agent do it

Copy this whole guide as Markdown, with every new component and what it replaces, and paste it into Claude Code, Cursor or Codex inside your project.

view .md

Update the files

2 commands

The CLI copies source, so nothing updates on its own. Rewrite the tokens, then each component you use. Commit first: --overwrite replaces your edits.

terminal

bash

# tokens and cn: add --themes=all if you use the ThemeSwitcher
npx @entrepta/cli@latest init --theme=entrepta --overwrite

# every component you already have
npx @entrepta/cli@latest add button card dialog --overwrite

New in v2

17 components

If your project built its own version of one of these, add the entrepta one and delete yours.

KbdprimitivesA key or a shortcut, as a chip or plain, that turns brand in a highlighted rowreplaces hand-styled key chips next to shortcuts TextareaformsMulti-line text field in sans, with an error statereplaces a textarea styled by hand CheckboxformsCheckbox over a native input, with a label, a description and a mixed statereplaces native checkboxes with accent-color, or a custom box SwitchformsOn/off switch over a native checkbox, with an optional labelreplaces a custom toggle built from a div FieldformsLabel, control and error or hint, wired together for screen readersreplaces label, hint and error markup wired to aria-describedby by hand FilterPillformsToggle pill for one filter value, with an optional count and iconreplaces filter buttons that keep their state in the URL Sidebarlayout56px icon rail with a diamond that travels to the active itemreplaces an icon rail with its own active indicator PageOutlinelayoutSticky outline of the page's sections with a scrollspy, from 1100px upreplaces a table of contents with a scrollspy SectHeadcontentThe $ command rule that opens a section, with meta on the rightreplaces a $ command rule above a section Doc partscontentLong-form page pieces: doc labels, sections, serif heading, prose, Em, Strongreplaces the eyebrow, section and display heading pieces of a long page ChromeMessagefeedbackFull-page status screen for 404s and errors, as a terminal commandreplaces 404 and error screens PageLoadingfeedbackLoading screen in CSS alone, that says more only when the wait runs longreplaces a loading.tsx with dots or lines RevealmotionEntrance that rises and fades in once on screen, with a capped list staggerreplaces fade-in-on-scroll wrappers TypeInmotionText that assembles piece by piece, with the full sentence always in the DOMreplaces a typewriter heading RollingNumbermotionOdometer counter that rolls into place and turns once on hoverreplaces an odometer counter SpotlightmotionBrand glow that trails the cursor across a card on a springreplaces a glow that follows the cursor ArrowLinkmotionText link with a traveling arrow and a brand rule that wipes inreplaces a link with a moving arrow

Font sizes

7 mappings

Sizes come from ten scale steps now. Arbitrary pixel sizes and Tailwind default steps go. A step sets size and leading, never the family, so keep your font-* class.

before	after
text-[10px]	text-mono-xs
text-[11px], text-xs	text-mono-sm for labels, text-mono-xs for group headings
text-[12px]	text-mono-sm
text-[13px] or text-[14px] in mono	text-mono-md
text-[13px] in sans	text-body-md
text-sm on a large button	text-body-lg
text-2xl on a Card or Dialog title	text-heading-lg

.t-* classes

7 mappings

The .t-* classes are gone. Each one becomes a family and a step.

before	after
.t-display-xl	font-serif text-display-xl
.t-heading-md	font-serif text-heading-md (now 18px, was 20px)
.t-body-md	font-sans text-body-md
.t-mono-sm	font-mono text-mono-sm
.t-mono-xs	font-mono text-mono-xs (now 10px, was 11px)
.t-muted, .t-secondary	text-[var(--fg-muted)], text-[var(--fg-secondary)]
.t-brand	text-[var(--fg-brand-text)] below 24px, text-[var(--fg-brand)] above

lucide to Phosphor

9 icons

Install @phosphor-icons/react and remove lucide-react. A file without use client imports from @phosphor-icons/react/dist/ssr. Phosphor takes size, not width and strokeWidth.

lucide	phosphor
Loader2	CircleNotchIcon, with animate-spin
X	XIcon
Check	CheckIcon
ChevronRight	CaretRightIcon
Circle	CircleIcon weight="fill"
Search	MagnifyingGlassIcon
Copy	CopyIcon
AlertTriangle	WarningIcon
Sun, Moon	SunIcon, MoonIcon

Card

same API

The parts are the same. The look is new: near black with a glow in the corner, a border that lights up on hover, and a header that wraps. New: size (sm, md, xl), and as and icon on CardLabel. The terminal variant sets its own text color, so it reads in light mode.

Brand inks and surfaces

8 swaps

Search your own code for these. The components already use the new tokens.

before	after
text-[var(--bg-canvas)] on a brand fill	text-[var(--fg-on-brand)]
text-[var(--zinc-50)] on a brand fill	text-[var(--fg-on-brand)]
text-[var(--fg-brand)] on text below 24px	text-[var(--fg-brand-text)]
text-[var(--fg-brand-hover)] on the brand tint	text-[var(--fg-brand-text)]
--fg-brand-on-tint	--fg-brand-text
bg-[var(--bg-surface)] on a card	bg-[var(--bg-card)]
bg-[var(--bg-surface)] on a dialog, menu or code block	bg-[var(--bg-overlay)] with the sheen class
bg-[var(--bg-surface)] on an input	bg-[var(--bg-field)]

Themes

3 changes

The ThemeSwitcher needs every theme in your CSS: run init with --themes=all. Light mode brands moved slightly (entrepta light is now #6656FF) so every ink clears AA, and light --fg-muted is #68686F. Add suppressHydrationWarning to your <html> if you use ThemeScript or ModeScript.

Components

5 changes

Tabs. The × is a real button next to the tab, on the active tab only. Route tabs use TabNav and TabNavLink, and variant="window" draws the title bar. Tabs depend on motion.
Dropdown, Toast, Tooltip, CommandPalette. All sit on the overlay surface. A highlighted row takes the brand tint instead of an edge bar, keyboard hints are Kbd, and a toast shows its status as an icon tile. The Toaster adds a close button.
StatusBar. position="static" puts it in your layout instead of five override classes.
CodeBlock. A failed copy says copy failed instead of claiming it copied.
RollingNumber, Reveal, TypeIn, Spotlight. Bring the motion package when you add them. Nothing else needs it.