Component Library

Documentation and examples of the reusable components for LinkedIn Enhancement Suite

UI Components

Buttons

Button component with various styles and states

                
<Button>Default</Button>
<Button variant="destructive">Destructive</Button>
<Button variant="outline">Outline</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="ghost">Ghost</Button>
<Button variant="link">Link</Button>

Avatars

Avatar component for user profiles

CNCNJD

                
<Avatar>
  <AvatarImage src="https://github.com/shadcn.png" />
  <AvatarFallback>CN</AvatarFallback>
</Avatar>

<Avatar className="h-16 w-16">
  <AvatarImage src="https://github.com/shadcn.png" />
  <AvatarFallback>CN</AvatarFallback>
</Avatar>

<Avatar>
  <AvatarFallback>JD</AvatarFallback>
</Avatar>

Badges

Badge component for status and tags

Default

Secondary

Outline

Destructive

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

Cards

Card component for displaying content

Card Title

Card content with information and other details about the feature or content.

                
<Card>
  <CardHeader>
    <CardTitle>Card Title</CardTitle>
  </CardHeader>
  <CardContent>
    <p>Card content with information...</p>
  </CardContent>
  <CardFooter>
    <Button variant="outline" className="mr-2">Cancel</Button>
    <Button>Submit</Button>
  </CardFooter>
</Card>

Inputs

Input component for forms

                
<Input placeholder="Default input" />
<Input placeholder="Disabled input" disabled />
<div className="flex gap-2">
  <Input placeholder="With button" />
  <Button type="submit">Search</Button>
</div>

Skeleton

Skeleton component for loading states

                
<div className="flex items-center gap-4">
  <Skeleton className="h-12 w-12 rounded-full" />
  <div className="space-y-2">
    <Skeleton className="h-4 w-32" />
    <Skeleton className="h-4 w-48" />
  </div>
</div>
<Skeleton className="h-24 w-full" />
<div className="flex gap-2">
  <Skeleton className="h-8 w-16" />
  <Skeleton className="h-8 w-24" />
</div>