From the playground
to your project.

01 / Customize before you download.

On the resource page, set the accent, light or dark appearance, corner radius, and spacing density. Export a preset to save those choices, or import one later. Invalid imports leave your last valid settings intact. Undo restores the previous preset.

Loading, error, empty, and success are preview scenarios. These demonstrate the UI contract; they do not implement persistence or force an error state into the exported component.

02 / Download all of the source.

Use Download source ZIP. Extract the entire directory under your application's source folder, for example src/migbits/. Preserve the relative paths:

migbits/
  example.tsx
  preset.json
  manifest.json
  INSTALL.md
  NOTICE.txt
  resources/profile-settings/
    profile-settings.tsx
    profile-settings.css
    model.ts
    README.md
  tokens/preset.ts

The component imports its own scoped stylesheet. A React bundler with TypeScript, JSX, and CSS import support is required. The resource does not need Tailwind, Next.js, or an animation package.

03 / Render your configured example.

import ProfileSettingsExample from "./migbits/example";

export default function AccountPage() {
  return <ProfileSettingsExample />;
}

example.tsx contains precisely the validated preset selected in the resource preview. The reusable source files are copied without import rewriting. You can also import ProfileSettings directly and supply preset, initialProfile, and onSave yourself.

04 / Connect a real save operation.

<ProfileSettings
  preset={brandPreset}
  initialProfile={profile}
  onSave={async (nextProfile) => {
    const response = await fetch("/api/profile", {
      method: "PUT",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify(nextProfile),
    });
    if (!response.ok) throw new Error("Save failed");
  }}
/>

This is an integration example, not an included API. Your backend must validate fields, authenticate the request, authorize changes to the correct account, and apply the appropriate session/origin protections. The downloaded example's save callback is intentionally a no-op demonstration.

Rejected saves retain form edits. Saving disables the form and button. Client validation focuses the first invalid field. Server validation is still required.

Alternative / Install through the local registry.

For a project already configured with shadcn, the versioned draft registry is available while Migbits runs in development:

npx shadcn@latest add http://localhost:3000/r/profile-settings/0.1.0-preview.1.json

Targets use your configured components directory under migbits/profile-settings/. The registry uses the default brand preset. For your customized preset, use the configured ZIP or replace the installed preset in example.tsx. Installation must not overwrite files without your review.

The registry follows the official registry-item format ↗. Exact shadcn CLI installation evidence is recorded separately in the verification log.

What has actually been verified?

• Fresh locked React 19.3.0 + React DOM 19.3.0 consumer installation.
• Strict TypeScript 5.9.3 check and esbuild 0.28.2 JavaScript/CSS bundle outside Next.js.
• All 48 accent/theme/radius/density combinations carry matching tokens into server-rendered markup.
• ZIP and registry files share a generator, version, source digest, preset and per-file SHA-256 hashes.

Browser visual parity, keyboard/screen-reader review, arbitrary existing project styles and Cloudflare hosting are not proven by these checks. No complete accessibility or universal compatibility claim is made.

Version, rights, and recovery.

manifest.json records the exact resource version, source digest, export digest, dependencies, selected preset, license status, and file checksums. Keep it beside your customized source. A matching resource version with a different development-source digest is a different draft snapshot; do not treat draft endpoints as immutable published releases.

This is original project source for local evaluation. The owner has not selected a redistribution license. Draft source delivery is unavailable in production mode until the release gates are satisfied.

If an export fails, your preview settings remain intact. Retry the download. If an installation fails, record the resource version, source digest, environment, and error. Never include account credentials in an issue.