Component Library

11 UI components built with shadcn/ui, Radix UI primitives, and Tailwind CSS. Fully accessible, dark mode ready, and customizable.

Button

6 variants, 4 sizes. Supports asChild for custom elements.

All Variants

---
import { Button } from "@/components/ui/button";
---

<Button client:load>Default</Button>
<Button client:load variant="secondary">Secondary</Button>
<Button client:load variant="outline">Outline</Button>
<Button client:load variant="ghost">Ghost</Button>
<Button client:load variant="destructive">Destructive</Button>
<Button client:load variant="link">Link</Button>
<Button client:load size="sm">Small</Button>
<Button client:load size="lg">Large</Button>

Badge

Pill-shaped labels for status, tags, or categories.

All Variants

---
import { Badge } from "@/components/ui/badge";
---

<Badge client:load>Default</Badge>
<Badge client:load variant="secondary">Secondary</Badge>
<Badge client:load variant="outline">Outline</Badge>
<Badge client:load variant="destructive">Destructive</Badge>

Default

Secondary

Outline

Destructive

Card

Compound component with Header, Title, Description, Content, and Footer.

Card with Actions

---
import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
---

<Card client:load>
  <CardHeader>
    <CardTitle>Card Title</CardTitle>
    <CardDescription>Card description goes here.</CardDescription>
  </CardHeader>
  <CardContent>
    <p>Card content and details.</p>
  </CardContent>
  <CardFooter>
    <Button>Action</Button>
  </CardFooter>
</Card>

Project Settings

Manage your project configuration and preferences.

Update your project name, description, and visibility settings.

Input & Label

Form input field with associated label. Supports all HTML input types.

Form Fields

---
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
---

<div class="space-y-2">
  <Label htmlFor="email">Email</Label>
  <Input type="email" id="email" placeholder="you@example.com" />
</div>

Password

Disabled

Dialog

Modal overlay with backdrop blur. Traps focus and closes on escape.

Modal Dialog

---
import { Dialog, DialogTrigger, DialogContent, DialogHeader, DialogTitle, DialogDescription } from "@/components/ui/dialog";
import { Button } from "@/components/ui/button";
---

<Dialog client:load>
  <DialogTrigger asChild>
    <Button>Open Dialog</Button>
  </DialogTrigger>
  <DialogContent>
    <DialogHeader>
      <DialogTitle>Dialog Title</DialogTitle>
      <DialogDescription>This is a dialog description.</DialogDescription>
    </DialogHeader>
    <p>Dialog body content goes here.</p>
  </DialogContent>
</Dialog>

Accordion

Collapsible content with smooth height animation. Single or multiple mode.

Collapsible Accordion

---
import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from "@/components/ui/accordion";
---

<Accordion type="single" collapsible client:load>
  <AccordionItem value="item-1">
    <AccordionTrigger>Section One</AccordionTrigger>
    <AccordionContent>Content for section one.</AccordionContent>
  </AccordionItem>
  <AccordionItem value="item-2">
    <AccordionTrigger>Section Two</AccordionTrigger>
    <AccordionContent>Content for section two.</AccordionContent>
  </AccordionItem>
</Accordion>

Tabs

Pill-style tab navigation with keyboard support.

Tab Navigation

---
import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
---

<Tabs defaultValue="tab1" client:load>
  <TabsList>
    <TabsTrigger value="tab1">Tab 1</TabsTrigger>
    <TabsTrigger value="tab2">Tab 2</TabsTrigger>
    <TabsTrigger value="tab3">Tab 3</TabsTrigger>
  </TabsList>
  <TabsContent value="tab1">First tab content.</TabsContent>
  <TabsContent value="tab2">Second tab content.</TabsContent>
  <TabsContent value="tab3">Third tab content.</TabsContent>
</Tabs>

This is the overview tab. Display your main content and summary information here.

Tooltip

Small popup on hover with positioning and delay support.

Hover Tooltip

---
import { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider } from "@/components/ui/tooltip";
import { Button } from "@/components/ui/button";
---

<TooltipProvider client:load>
  <Tooltip>
    <TooltipTrigger asChild>
      <Button variant="outline">Hover me</Button>
    </TooltipTrigger>
    <TooltipContent>
      <p>Tooltip text</p>
    </TooltipContent>
  </Tooltip>
</TooltipProvider>

Select

Styled dropdown select with groups, labels, and check icon.

Select Dropdown

---
import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from "@/components/ui/select";
---

<Select client:load>
  <SelectTrigger className="w-[180px]">
    <SelectValue placeholder="Select option" />
  </SelectTrigger>
  <SelectContent>
    <SelectItem value="option1">Option 1</SelectItem>
    <SelectItem value="option2">Option 2</SelectItem>
    <SelectItem value="option3">Option 3</SelectItem>
  </SelectContent>
</Select>

Dropdown Menu

Positioned menu with items, labels, separators, and keyboard navigation.

Action Menu

---
import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator } from "@/components/ui/dropdown-menu";
import { Button } from "@/components/ui/button";
---

<DropdownMenu client:load>
  <DropdownMenuTrigger asChild>
    <Button variant="outline">Open Menu</Button>
  </DropdownMenuTrigger>
  <DropdownMenuContent>
    <DropdownMenuLabel>Actions</DropdownMenuLabel>
    <DropdownMenuSeparator />
    <DropdownMenuItem>Edit</DropdownMenuItem>
    <DropdownMenuItem>Duplicate</DropdownMenuItem>
    <DropdownMenuItem>Delete</DropdownMenuItem>
  </DropdownMenuContent>
</DropdownMenu>

Component Library

Button

All Variants

Badge

All Variants

Card

Card with Actions

Project Settings

Input & Label

Form Fields

Dialog

Modal Dialog

Accordion

Collapsible Accordion

What is AstroDeck?

Which UI library does it use?

Does it support dark mode?

Tabs

Tab Navigation

Tooltip

Hover Tooltip

Select

Select Dropdown

Dropdown Menu

Action Menu