# Migrate to v2 (/docs/migrate-to-v2)



## Migration Checklist [#migration-checklist]

1. Upgrade to the latest v1 release first.
2. Migrate to `Button v2` and `Card v2`.
3. Replace import paths using `atoms`/`molecules` with `ui`.
4. Update directory casing in import paths to lowercase.
5. Use icons from `@clubmed/trident-icons`.
6. Migrate Tailwind setup to v4 expectations.
7. Apply the `onChange` signature migration for forms.

## Breaking Changes from v1 [#breaking-changes-from-v1]

### 1. Button and Card v2 [#1-button-and-card-v2]

* `Button` and `Card` APIs evolved in v2.
* Migrate these components first to reduce follow-up conflicts.

### 2. Import Paths [#2-import-paths]

* Replace paths containing `atoms` or `molecules` with `ui`.
* Update directories to lowercase.

```ts
// v1
@clubmed/trident-ui/molecules/Buttons/Button

// v2
@clubmed/trident-ui/ui/buttons/button
```

### 3. Icons Package [#3-icons-package]

* Use icons from `@clubmed/trident-icons`.
* Stop importing icon assets from legacy v1 paths.

### 4. Tailwind 4 Migration [#4-tailwind-4-migration]

* Tailwind 4 no longer reads `tailwind.config.ts` the same way as v1-era setup.
* If needed during transition, rename to `tailwind.config.legacy.(js|ts)`.
* Update syntax to Tailwind 4 conventions (`@layer`, `@utility`, etc.).
* Import Trident UI styles:

```css
@import '@clubmed/trident-ui/style.css';
```

* If your own stylesheet uses Trident classes/variables, add at file top:

```css
@reference "@clubmed/trident-ui/style.css";
```

## Breaking Change: Form onChange Signature [#breaking-change-form-onchange-signature]

In v2, form components use a unified callback signature:

```ts
onChange(event, value)
```

### Previous (v1) [#previous-v1]

```ts
onChange(name, value)
```

### New (v2) [#new-v2]

```ts
onChange(event, value)
```

When you still need the field name, read it from `event.currentTarget.name`:

```ts
const name = (event.currentTarget as HTMLInputElement).name;
```

## Common Refactors [#common-refactors]

### Text-like fields [#text-like-fields]

```tsx
// v1
onChange={(name, value) => setValue(value)}

// v2
onChange={(_, value) => setValue(value)}
```

### Checkbox-like fields [#checkbox-like-fields]

```tsx
// v1
onChange={(event) => setChecked(event.target.checked)}

// v2
onChange={(_, checked) => setChecked(checked)}
```

### Radio-like fields [#radio-like-fields]

```tsx
// v1
onChange={(event) => setSelected(event.target.value)}

// v2
onChange={(_, value) => setSelected(value)}
```

## Components Concerned [#components-concerned]

* `TextField`, `Select`, `DateField`, `NumberField`, `Password`, `PhoneField`, `Range`
* `Switch`, `Filter`, `Checkbox`, `Radio`
* `CheckboxSelect`, `Checkboxes`, `RadioGroup`

## Why This Change [#why-this-change]

* Same developer experience for all form components.
* Easier integration with generic form handlers.
* Keeps access to browser event while exposing normalized `name` and `value`.