Components
Loading preview...
An 8-bit styled card component with pixel-border decoration, supporting header, title, description, content, footer, and action slots. Source-verbatim from the 8bitcn card primitive.
@reapollo
npx shadcn@latest add https://21st.dev/r/larsen66/8bit-cardimport { Button } from "@/components/ui/8bit-button";
import {
Card,
CardContent,
CardDescription,
CardFooter,
CardHeader,
CardTitle,
} from "@/components/ui/8bit-card";
import { Input } from "@/components/ui/8bit-input";
import { Label } from "@/components/ui/8bit-label";
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from "@/components/ui/8bit-select";
export default function Demo() {
return (
<div className="flex items-center justify-center min-h-screen p-8 retro">
<Card className="max-w-lg">
<CardHeader>
<CardTitle>Create project</CardTitle>
<CardDescription className="text-xs">
Deploy your new project in one-click.
</CardDescription>
</CardHeader>
<CardContent className="flex flex-col gap-4">
<Label>Name</Label>
<Input placeholder="Project name" className="max-w-72" />
<Label>Framework</Label>
<Select>
<SelectTrigger>
<SelectValue placeholder="Framework" />
</SelectTrigger>
<SelectContent>
<SelectItem value="next">Next.js</SelectItem>
<SelectItem value="svelte">SvelteKit</SelectItem>
<SelectItem value="astro">Astro</SelectItem>
<SelectItem value="nuxt">Nuxt.js</SelectItem>
</SelectContent>
</Select>
</CardContent>
<CardFooter className="flex justify-between">
<Button variant="outline">Cancel</Button>
<Button>Create</Button>
</CardFooter>
</Card>
</div>
);
}