āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā ā š shadcn/directory/wandrydev/wandry-ui/installation ā āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā
ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā
Start by creating a new Laravel project with Inertia and React using the laravel installer laravel new my-app:
laravel new my-app --react
<CodeBlockCommand __pnpm__="pnpm add @wandry/inertia-form" __npm__="npm install @wandry/inertia-form" __bun__="bun install @wandry/inertia-form" __yarn__="yarn add @wandry/inertia-form" />
You can now start adding components to your project.
<CodeBlockCommand __pnpm__="pnpm dlx shadcn@latest add @wandry-ui/text-field" __npm__="npx shadcn@latest add @wandry-ui/text-field" __bun__="bunx --bun shadcn@latest add @wandry-ui/text-field" __yarn__="yarn dlx shadcn@latest add @wandry-ui/text-field" />
The command above will add the TextField component to resources/js/components/text-field.tsx. You can then import it like this:
import { Form } from "@wandry/inertia-form";
import TextField from "@/components/text-field";
import { Button } from "@/components/ui/button";
const MyPage = () => {
return (
<Form action="/">
<TextField name="first_name" label="First Name" />
<Button type="submit">Submit</Button>
</Form>
);
};
export default MyPage;
ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā