On this page

Card

Create project

Deploy your new project in one-click.

Name

Framework

---
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/starwind/card";
import { Button } from "@/components/starwind/button";
import { Input } from "@/components/starwind/input";
import { Label } from "@/components/starwind/label";
import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem, SelectGroup, SelectLabel, SelectSeparator, } from "@/components/starwind/select";
---

<Card class="w-[400px]" slot="preview">
  <CardHeader>
    <CardTitle>Create project</CardTitle>
    <CardDescription>Deploy your new project in one-click.</CardDescription>
  </CardHeader>
  <CardContent class="flex flex-col gap-4">
    <div class="flex w-full flex-col gap-2">
      <Label for="name">Name</Label>
      <Input type="text" id="name" placeholder="Name of your project" />
    </div>
    <div class="flex w-full flex-col gap-2">
      <Label for="framework">Framework</Label>
      <Select id="framework">
        <SelectTrigger class="w-full" required>
          <SelectValue placeholder="Select" />
        </SelectTrigger>
        <SelectContent class="w-full">
          <SelectGroup>
            <SelectLabel>Frameworks</SelectLabel>
            <SelectItem value="astro">Astro</SelectItem>
            <SelectItem value="next">Next.js</SelectItem>
            <SelectItem value="svelte">SvelteKit</SelectItem>
            <SelectItem value="solid">SolidStart</SelectItem>
          </SelectGroup>
        </SelectContent>
      </Select>
    </div>
  </CardContent>
  <CardFooter class="flex justify-between">
    <Button variant="outline">Cancel</Button>
    <Button type="submit">Deploy</Button>
  </CardFooter>
</Card>

Installation

pnpx starwind@latest add card

npx starwind@latest add card

yarn dlx starwind@latest add card

Usage

Form Submission

You can easily add a standard html form submission to your card. Here is a full example with the javascript submission code.

Tip

Open up your browser’s dev tools and view the console to see the form data.

Create project

Deploy your new project in one-click.

---
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/starwind/card";
import { Button } from "@/components/starwind/button";
import { Input } from "@/components/starwind/input";
import { Label } from "@/components/starwind/label";
import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem, SelectGroup, SelectLabel, SelectSeparator, } from "@/components/starwind/select";
---

<Card class="w-[400px]">
  <CardHeader>
    <CardTitle>Create project</CardTitle>
    <CardDescription>Deploy your new project in one-click.</CardDescription>
  </CardHeader>
  <form id="create-project-form">
    <CardContent class="flex flex-col gap-4">
      <div class="flex w-full flex-col gap-2">
        <Label for="name">Name</Label>
        <Input type="text" id="name" placeholder="Name of your project" />
        <!-- <InputFeedback>This is a required field</InputFeedback> -->
      </div>
      <div class="flex w-full flex-col gap-2">
        <Label for="framework">Framework</Label>
        <Select id="framework">
          <SelectTrigger class="w-full" required>
            <SelectValue placeholder="Select" />
          </SelectTrigger>
          <SelectContent>
            <SelectGroup>
              <SelectLabel>Frameworks</SelectLabel>
              <SelectItem value="astro">Astro</SelectItem>
              <SelectItem value="next">Next.js</SelectItem>
              <SelectItem value="svelte">SvelteKit</SelectItem>
              <SelectItem value="solid">SolidStart</SelectItem>
            </SelectGroup>
          </SelectContent>
        </Select>
      </div>
    </CardContent>
    <CardFooter class="flex justify-between">
      <Button type="button" variant="outline">Cancel</Button>
      <Button type="submit">Deploy</Button>
    </CardFooter>
  </form>
</Card>

<script>
  const setupForm = () => {
    const form = document.getElementById("create-project-form") as HTMLFormElement;
    if (!form) return;

    form.addEventListener("submit", (e) => {
      e.preventDefault();

      // Log all form inputs
      console.log("Form submission data:", {
        name: (form.querySelector("#name") as HTMLInputElement)?.value,
        framework: (form.querySelector("#framework select") as HTMLSelectElement)?.value,
      });
    });
  };

  setupForm();

  document.addEventListener("astro:after-swap", setupForm);
</script>

API Reference

Card

The root component that serves as a container for card content.

Prop	Type	Default
`class`	`string`	-

<Card>
  <!-- Card content -->
</Card>

CardHeader

A container for card header content, typically containing the title and description.

Prop	Type	Default
`class`	`string`	-

<CardHeader>
  <CardTitle>Title</CardTitle>
  <CardDescription>Description</CardDescription>
</CardHeader>

CardTitle

A component for rendering the card title with appropriate font styling.

Prop	Type	Default
`class`	`string`	-

<CardTitle>Create project</CardTitle>

CardDescription

A component for rendering the card description with muted colors and appropriate text styling.

Prop	Type	Default
`class`	`string`	-

<CardDescription>Deploy your new project in one-click.</CardDescription>

CardContent

A container for the main content of the card.

Prop	Type	Default
`class`	`string`	-

<CardContent>
  <!-- Main card content -->
</CardContent>

CardFooter

A container for card footer content, typically containing action buttons.

Prop	Type	Default
`class`	`string`	-

<CardFooter>
  <Button>Action</Button>
</CardFooter>

Changelog

v1.3.0

style updates

v1.2.0

Add a data-slot attribute to all components to enable global styling updates

v1.1.0

tailwind-variants now implemented. This uses tailwind-merge under the hood to merge Tailwind classes without style conflicts, allowing you to override any existing classes using the “class” prop.