Bun + Preact.js + shadcn UI, example

id: 132, 2024-09-03

概要:

Bun + Preact + shadcn/UI の例になります。

bundler は、Bun, viteを使用する例です。

[ 作成日: 2024/09/01 ]

構成

shadcn/UI
Bun: 1.1.26
Preact
typescript
express

作成したコード

https://github.com/kuc-arc-f/bun_16preact/tree/main/example/shadcn

build, dev-start

bun run build
bun run dev

関連インストール

https://ui.shadcn.com/docs/installation/vite
tailwindcssも関係ありそうですので、参考しました。
https://tailwindcss.com/docs/guides/vite

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

Card例になります。
example/shadcn/src/client/Card.tsx
https://github.com/kuc-arc-f/bun_16preact/blob/main/example/shadcn/src/client/Card.tsx

export default function App() {
  return (
  <div className="container mx-auto my-2 px-8 bg-white">
    <Head />
    <h1 className="text-4xl font-bold">Card</h1>
    <hr className="my-2" />
    <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>    
  </div>

  )
}