Bring the code you already have
Paste a component file from shadcn/ui, MUI or Chakra. It is rewritten here in your browser — tags renamed, props mapped, imports replaced — and everything that has no equivalent is listed underneath with the reason, rather than quietly dropped.
- tags read
- 10
- renamed
- 1
- props mapped
- 3
- need a look
- 4
Detected from the imports
In Klyv
tsx
import { Button, Card, Divider, Input, Switch } from 'klyvui'export function InviteCard({ open, onOpenChange }) { return ( <Card> <CardHeader> <CardTitle>Invite a teammate</CardTitle> </CardHeader> <Divider /> <CardContent> <Input type="email" placeholder="ada@example.com" /> <Switch checked={open} onChange={onOpenChange} /> <Button variant="destructive" size="md">Remove access</Button> <Button variant="muted" size="sm">Cancel</Button> <Button>Send invite</Button> </CardContent> </Card> )}What it did, and what it could not
A codemod, not a compiler. It rewrites what it has a mapping for and leaves everything else exactly as it found it — so the output compiles only after the parts below are dealt with by hand. Nothing is uploaded: the rewrite runs in this tab.
Renamed1
- Separator→ Divider
Props mapped3
- SwitchonCheckedChange → onChange
- Buttonsize="lg" → size="md" — Klyv buttons are sm or md, so lg became md.
- Buttonvariant="secondary" → variant="muted"
Needs a look4
- CardHeaderCard takes `title` and `description` props instead of a header part.
- CardTitleBecomes Card’s `title` prop.
- CardContentCard’s children are its content; the wrapper can go.
- Buttonvariant="destructive" — Klyv has no destructive button variant; use variant="outline" with the danger token, or a confirm dialog.
Imports2
- imports5 imports from the old library removed
- imports5 components imported from klyvui
Left untouched
These were not recognised as shadcn/ui components, so they were left exactly as they were: your own components, and anything this tool has no mapping for.
CardContentCardHeaderCardTitle