back
Bun + React + shadcn UI
id: 131, 2024-09-02
概要:
Bun + React + shadcn/UI の例になります。
- bundler は、Bun, viteを使用する例です。
[ 作成日: 2024/09/01 ]
構成
- shadcn/UI
- Bun: 1.1.26
- React
- typescript
- express
作成したコード
build, dev-start
bun run build
bun run dev
関連インストール
tailwindcssも関係ありそうですので、参考しました。
- button, cardを試しに追加しました。
- ファイルサイズは、express構成で150MB程に増えました。
bunx --bun shadcn@latest add button
bunx --bun shadcn@latest add card
bunx --bun shadcn@latest add switch
bunx --bun shadcn@latest add input
bunx --bun shadcn@latest add label
bunx --bun shadcn@latest add select
- example/shadcn/src/client/Card.tsx
- https://github.com/kuc-arc-f/bun_17react/blob/main/example/shadcn/src/client/Card.tsx
<Card className="w-[350px]">
<CardHeader>
<CardTitle>Create Card Item</CardTitle>
<CardDescription>information , title</CardDescription>
</CardHeader>
<CardContent>
<form>
<div className="grid w-full items-center gap-4">
<div className="flex flex-col space-y-1.5">
<Label htmlFor="name">Name</Label>
<Input id="name" placeholder="Name 123" />
</div>
<div className="flex flex-col space-y-1.5">
<Label htmlFor="framework">SelectItems</Label>
<Select>
<SelectTrigger id="framework">
<SelectValue placeholder="Select" />
</SelectTrigger>
<SelectContent position="popper">
<SelectItem value="item_1">item_1</SelectItem>
<SelectItem value="item_2">item_2</SelectItem>
<SelectItem value="item_3">item_3</SelectItem>
</SelectContent>
</Select>
</div>
</div>
</form>
</CardContent>
<CardFooter className="flex justify-between">
<Button variant="outline">Cancel</Button>
<Button>Deploy</Button>
</CardFooter>
</Card>