Cperuffo3 Efis Checklist Editor Shadcn UI

shadcn/ui Skill

This project uses shadcn/ui v3.6.2 with the radix-mira style, Tailwind CSS 4 (CSS-first, no config file), and OKLCH color variables. Components live in src/components/ui/ and are never modified directly — they are managed by the shadcn CLI. Custom components compose these primitives.

Quick Start

Composing Components

import { Button } from "@/components/ui/button";
import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card";
import { cn } from "@/utils/tailwind";

function MyPanel({ className }: { className?: string }) {
  return (
    <Card size="sm" className={cn("bg-surface", className)}>
      <CardHeader>
        <CardTitle>Panel Title</CardTitle>
      </CardHeader>
      <CardContent>
        <Button variant="ghost" size="sm">
          Action
        </Button>
      </CardContent>
    </Card>
  );
}

Adding New Components

npx shadcn@latest add switch context-menu dropdown-menu

Overriding Styles (Never Edit ui/ Files)

// GOOD — override via className prop
<Button
  variant="ghost"
  className="bg-accent-dim text-accent border-accent/25 border"
>
  Quick Export
</Button>

// BAD — editing src/components/ui/button.tsx directly

Key Concepts

Installed Components (21)

Layout: Card, ScrollArea, Separator Forms: Button, Input, Label, Select, Textarea, InputGroup, NumberInput Feedback: Alert, Badge, Progress, Spinner, Sonner Overlays: Dialog, Popover, Tooltip, Command Dates: Calendar, DatePicker

Button Variants Reference

Sizes: xs, sm, default, lg, icon, icon-xs, icon-sm, icon-lg

Common Patterns

Dialog with Custom Content

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

function ExportModal({
  open,
  onOpenChange,
}: {
  open: boolean;
  onOpenChange: (open: boolean) => void;
}) {
  return (
    <Dialog open={open}
      <DialogContent className="sm:max-w-md">
        <DialogHeader>
          <DialogTitle>Export Checklists</DialogTitle>
        </DialogHeader>
        {/* Grid of format options */}
        <DialogFooter showCloseButton>
          <Button>Export</Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}

Command Palette

import {
  CommandDialog,
  Command,
  CommandInput,
  CommandList,
  CommandGroup,
  CommandItem,
  CommandEmpty,
} from "@/components/ui/command";

function SearchPalette({
  open,
  onOpenChange,
}: {
  open: boolean;
  onOpenChange: (open: boolean) => void;
}) {
  return (
    <CommandDialog
      open={open}
     
      title="Search checklists"
    >
      <Command>
        <CommandInput placeholder="Search checklists and items..." />
        <CommandList>
          <CommandEmpty>No results found.</CommandEmpty>
          <CommandGroup heading="Checklists">
            <CommandItem>Preflight Inspection</CommandItem>
          </CommandGroup>
        </CommandList>
      </Command>
    </CommandDialog>
  );
}

See Also

• patterns - Component composition, variant creation, theming
• workflows - Adding components, building editor UI, extending theme

Related Skills

• See the react skill for component lifecycle and hooks patterns
• See the tailwind skill for utility class usage and EFIS theme tokens
• See the lucide-react skill for icon integration (planned migration from FontAwesome)
• See the sonner skill for toast notifications
• See the zod skill for form validation patterns

Documentation Resources

Fetch latest shadcn/ui documentation with Context7.

How to use Context7:

1. Use mcp__context7__resolve-library-id to search for "shadcn-ui"
2. Prefer website documentation (IDs starting with /websites/) over source code repositories
3. Query with mcp__context7__query-docs using the resolved library ID

Library ID: /websites/ui_shadcn (website docs, 1729 snippets, High reputation)

Recommended Queries:

• "shadcn button variants and sizes"
• "shadcn dialog modal usage"
• "shadcn command palette cmdk"
• "shadcn scroll-area custom styling"
• "shadcn select component"

Converted and distributed by TomeVault — claim your Tome and manage your conversions.