zhongwei/gh-vuer-ai-vuer-skill-marketplace-skills-vuer-uikit
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial commit

Browse Source
This commit is contained in:
Zhongwei Li
2025-11-30 09:05:04 +08:00
commit 7afdd6601b
69 changed files with 9552 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

208
docs/components/card.md Normal file
View File

@@ -0,0 +1,208 @@
- Home
- Components
- Card
# Card
Displays a card with header, content, and footer.
## Props
This component group provides styled containers. All parts accept standard div props.
- Card: root container with size variants (sm, md, lg, xl) for padding
- CardHeader: header row with optional actions, supports size variants for gap spacing
- CardTitle: title text
- CardDescription: subdued description text
- CardAction: right-aligned action area in header
- CardContent: main content area
- CardFooter: footer area (flex container)
## Types
```
// Card component with size variants
interface CardProps extends ComponentProps<"div"> {
size?: "sm" | "md" | "lg" | "xl";
}
// CardHeader also supports size variants for gap spacing
interface CardHeaderProps extends ComponentProps<"div"> {
size?: "sm" | "md" | "lg" | "xl";
}
// All other Card components extend ComponentProps<"div">
interface CardTitleProps extends ComponentProps<"div"> {}
interface CardDescriptionProps extends ComponentProps<"div"> {}
interface CardActionProps extends ComponentProps<"div"> {}
interface CardContentProps extends ComponentProps<"div"> {}
interface CardFooterProps extends ComponentProps<"div"> {}
```
```
<Card className="w-[300px]">
<CardHeader>
<CardTitle>Card Title</CardTitle>
<CardAction>
<Button variant="link">action</Button>
</CardAction>
</CardHeader>
<CardContent>
<div className="flex flex-col my-4">
<div>CardContent...</div>
<div>CardContent...</div>
<div>CardContent...</div>
<div>CardContent...</div>
<div>CardContent...</div>
</div>
</CardContent>
<CardFooter className="flex-col gap-2">
<Button className="w-full">Footer</Button>
</CardFooter>
</Card>
```
## Sizes
The Card component supports different padding sizes, and CardHeader adjusts gap spacing accordingly:
```
// Small card with reduced padding and gap spacing
<Card size="sm" className="w-50">
<CardHeader size="sm">
<CardTitle>Small Card</CardTitle>
<CardAction>
<Settings className="size-4" />
</CardAction>
</CardHeader>
<CardContent className="text-uk-sm">
Compact content with smaller padding and gap.
</CardContent>
</Card>
// Large card with increased padding and gap spacing (default)
<Card size="lg" className="w-50">
<CardHeader size="lg">
<CardTitle>Large Card</CardTitle>
<CardAction>
<Settings className="size-4" />
</CardAction>
</CardHeader>
<CardContent className="text-uk-md">
More spacious content with larger padding and gap.
</CardContent>
</Card>
```
## Login Form Example
```
import { Button } from "@vuer-ai/vuer-uikit"
import {
Card,
CardAction,
CardContent,
CardDescription,
CardFooter,
CardHeader,
CardTitle,
} from "@vuer-ai/vuer-uikit"
import { Input, Label } from "@vuer-ai/vuer-uikit"
<Card className="w-80">
<CardHeader>
<CardTitle>Login to your account</CardTitle>
<CardAction>
<Button variant="link">Sign Up</Button>
</CardAction>
</CardHeader>
<CardContent className="flex flex-col gap-lg pb-lg">
<CardDescription>
Enter your email below to login to your account
</CardDescription>
<form>
<div className="flex flex-col gap-6">
<div className="grid gap-2">
<Label htmlFor="email">Email</Label>
<Input
id="email"
type="email"
placeholder="m@example.com"
required
/>
</div>
<div className="grid gap-2">
<div className="flex items-center">
<Label htmlFor="password">Password</Label>
<a
href="#"
className="ml-auto inline-block text-uk-xs underline-offset-4 hover:underline"
>
Forgot your password?
</a>
</div>
<Input id="password" type="password" required />
</div>
</div>
</form>
</CardContent>
<CardFooter className="flex-col gap-2">
<Button type="submit" className="w-full">
Login
</Button>
<Button variant="outline" className="w-full">
Login with Google
</Button>
</CardFooter>
</Card>
```
## Examples with Icons and Buttons
```
import { Settings, User, Bell, Plus, ChevronRight } from 'lucide-react';
<Card>
<CardHeader>
<div className="flex items-center gap-2">
<User className="size-5 text-text-secondary" />
<CardTitle>User Profile</CardTitle>
</div>
<CardAction>
<Button variant="ghost" size="sm">
<Settings className="size-4" />
</Button>
</CardAction>
</CardHeader>
<CardContent>
<CardDescription className="py-lg">
Manage your account settings and preferences
</CardDescription>
</CardContent>
<CardFooter>
<Button variant="secondary" className="flex-1">
<ChevronRight className="size-4 ml-auto" />
View Details
</Button>
</CardFooter>
</Card>
<Card size="sm">
<CardHeader>
<div className="flex items-center gap-2">
<Bell className="size-4 text-text-secondary" />
<CardTitle>Notifications</CardTitle>
</div>
</CardHeader>
<CardContent>
<CardDescription className="py-lg">3 new updates available</CardDescription>
</CardContent>
<CardFooter>
<Button size="sm" className="w-full">
<Plus className="size-4 mr-2" />
View All
</Button>
</CardFooter>
</Card>
```