shadcn/ui + Merifly

Merifly UI Components

A comprehensive component library built on shadcn/ui with the Merifly color palette. Beautifully designed, accessible, and customizable.

Installation

Get started with Merifly UI in your React project.

Install the package

Using your preferred package manager

bash

pnpm add @merifly/ui

bash

npm install @merifly/ui

Import and use

tsx

import { Button, Card, Input } from "@merifly/ui"

export function MyComponent() {
  return (
    <Card>
      <CardHeader>
        <CardTitle>Welcome</CardTitle>
      </CardHeader>
      <CardContent>
        <Input placeholder="Enter your name" />
        <Button>Submit</Button>
      </CardContent>
    </Card>
  )
}

Button

Displays a button or a component that looks like a button.

Variants

tsx

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

Sizes

tsx

<Button size="sm">Small</Button>
<Button size="default">Default</Button>
<Button size="lg">Large</Button>
<Button size="icon">+</Button>

With Loading State

tsx

<Button disabled>
  <Spinner size="sm" variant="white" className="mr-2" />
  Loading...
</Button>

Input

Displays a form input field or a component that looks like an input field.

Examples

Password

Disabled

tsx

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

Select

Displays a list of options for the user to pick from.

Example

Framework

tsx

<Select>
  <SelectTrigger>
    <SelectValue placeholder="Select a framework" />
  </SelectTrigger>
  <SelectContent>
    <SelectItem value="next">Next.js</SelectItem>
    <SelectItem value="remix">Remix</SelectItem>
    <SelectItem value="astro">Astro</SelectItem>
  </SelectContent>
</Select>

Checkbox

A control that allows the user to toggle between checked and not checked.

Example

Accept terms and conditions

Subscribe to newsletter

tsx

<div className="flex items-center space-x-2">
  <Checkbox id="terms" />
  <Label htmlFor="terms">Accept terms and conditions</Label>
</div>

Radio Group

A set of checkable buttons where only one can be checked at a time.

Example

Default

Comfortable

Compact

tsx

<RadioGroup defaultValue="comfortable">
  <div className="flex items-center space-x-2">
    <RadioGroupItem value="default" id="r1" />
    <Label htmlFor="r1">Default</Label>
  </div>
  <div className="flex items-center space-x-2">
    <RadioGroupItem value="comfortable" id="r2" />
    <Label htmlFor="r2">Comfortable</Label>
  </div>
</RadioGroup>

Switch

A control that allows the user to toggle between two states.

Example

Airplane Mode

tsx

<div className="flex items-center space-x-2">
  <Switch id="airplane-mode" />
  <Label htmlFor="airplane-mode">Airplane Mode</Label>
</div>

Slider

An input where the user selects a value from within a given range.

Example

tsx

<Slider defaultValue={[50]} max={100} step={1} />
<Slider defaultValue={[25, 75]} max={100} step={1} />

Textarea

Displays a form textarea or a component that looks like a textarea.

Example

Message

tsx

<div className="space-y-2">
  <Label htmlFor="message">Message</Label>
  <Textarea id="message" placeholder="Type your message here." />
</div>

Card

Displays a card with header, content, and footer.

Card Title

Card Description

Card Content

Notifications

You have 3 unread messages.

New comment on your post

Someone mentioned you

tsx

<Card>
  <CardHeader>
    <CardTitle>Card Title</CardTitle>
    <CardDescription>Card Description</CardDescription>
  </CardHeader>
  <CardContent>
    <p>Card Content</p>
  </CardContent>
  <CardFooter>
    <Button>Action</Button>
  </CardFooter>
</Card>

Dialog

A modal dialog that interrupts the user with important content.

Example

tsx

<Dialog>
  <DialogTrigger asChild>
    <Button variant="outline">Open Dialog</Button>
  </DialogTrigger>
  <DialogContent>
    <DialogHeader>
      <DialogTitle>Are you sure?</DialogTitle>
      <DialogDescription>
        This action cannot be undone.
      </DialogDescription>
    </DialogHeader>
    <DialogFooter>
      <Button variant="outline">Cancel</Button>
      <Button>Continue</Button>
    </DialogFooter>
  </DialogContent>
</Dialog>

Dropdown Menu

Displays a menu to the user with a list of options.

Example

tsx

<DropdownMenu>
  <DropdownMenuTrigger asChild>
    <Button variant="outline">Open Menu</Button>
  </DropdownMenuTrigger>
  <DropdownMenuContent>
    <DropdownMenuLabel>My Account</DropdownMenuLabel>
    <DropdownMenuSeparator />
    <DropdownMenuItem>Profile</DropdownMenuItem>
    <DropdownMenuItem>Billing</DropdownMenuItem>
    <DropdownMenuItem>Log out</DropdownMenuItem>
  </DropdownMenuContent>
</DropdownMenu>

Tabs

A set of layered sections of content that are displayed one at a time.

Example

Make changes to your account here.

tsx

<Tabs defaultValue="account">
  <TabsList>
    <TabsTrigger value="account">Account</TabsTrigger>
    <TabsTrigger value="password">Password</TabsTrigger>
  </TabsList>
  <TabsContent value="account">
    Make changes to your account here.
  </TabsContent>
  <TabsContent value="password">
    Change your password here.
  </TabsContent>
</Tabs>

Accordion

A vertically stacked set of interactive headings.

Example

tsx

<Accordion type="single" collapsible>
  <AccordionItem value="item-1">
    <AccordionTrigger>Is it accessible?</AccordionTrigger>
    <AccordionContent>
      Yes. It adheres to the WAI-ARIA design pattern.
    </AccordionContent>
  </AccordionItem>
</Accordion>

Alert

Displays a callout for user attention.

Heads up!

You can add components to your app using the cli.

Error

Your session has expired. Please log in again.

tsx

<Alert>
  <AlertTitle>Heads up!</AlertTitle>
  <AlertDescription>
    You can add components to your app using the cli.
  </AlertDescription>
</Alert>

<Alert variant="destructive">
  <AlertTitle>Error</AlertTitle>
  <AlertDescription>
    Your session has expired. Please log in again.
  </AlertDescription>
</Alert>

Badge

Displays a badge or a component that looks like a badge.

Variants

DefaultSecondaryDestructiveOutline

tsx

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

Avatar

An image element with a fallback for representing the user.

Example

CNJDAB

tsx

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

Progress

Displays an indicator showing the completion progress of a task.

Example

tsx

<Progress value={33} />

Skeleton

Use to show a placeholder while content is loading.

Example

tsx

<div className="flex items-center space-x-4">
  <Skeleton className="h-12 w-12 rounded-full" />
  <div className="space-y-2">
    <Skeleton className="h-4 w-[250px]" />
    <Skeleton className="h-4 w-[200px]" />
  </div>
</div>

Table

A responsive table component.

Example

Invoice	Status	Method	Amount
INV001	Paid	Credit Card	$250.00
INV002	Pending	PayPal	$150.00
INV003	Unpaid	Bank Transfer	$350.00

tsx

<Table>
  <TableHeader>
    <TableRow>
      <TableHead>Invoice</TableHead>
      <TableHead>Status</TableHead>
      <TableHead className="text-right">Amount</TableHead>
    </TableRow>
  </TableHeader>
  <TableBody>
    <TableRow>
      <TableCell>INV001</TableCell>
      <TableCell>Paid</TableCell>
      <TableCell className="text-right">$250.00</TableCell>
    </TableRow>
  </TableBody>
</Table>

Tooltip

A popup that displays information related to an element.

Example

tsx

<TooltipProvider>
  <Tooltip>
    <TooltipTrigger asChild>
      <Button variant="outline">Hover me</Button>
    </TooltipTrigger>
    <TooltipContent>
      <p>Add to library</p>
    </TooltipContent>
  </Tooltip>
</TooltipProvider>

Separator

Visually separates content.

Example

Merifly UI

An open-source UI component library.

Blog

Docs

Source

tsx

<Separator className="my-4" />

<div className="flex h-5 items-center space-x-4 text-sm">
  <div>Blog</div>
  <Separator orientation="vertical" />
  <div>Docs</div>
</div>

Spinner

A loading indicator to show progress.

Sizes

tsx

<Spinner size="sm" />
<Spinner size="md" />
<Spinner size="lg" />
<Spinner size="xl" />

Colors

The Merifly color palette integrated with shadcn/ui.

Primary Colors

Primary

#2563eb

Blue Light

#3b82f6

Green

#22c55e

Teal

#14b8a6

Semantic Colors

Destructive

#ef4444

Warning

#f59e0b

Success

#22c55e

Info

#3b82f6

Neutral Colors

Background

Muted

Secondary

Border

Foreground

shadcn/ui + Merifly

Built with Merifly Design System

ReactTypeScriptTailwind CSSshadcn/uiRadix UI

Merifly UI Components

Installation

Button

Input

Select

Checkbox

Radio Group

Switch

Slider

Textarea

Card

Dialog

Dropdown Menu

Tabs

Accordion

Is it accessible?

Is it styled?

Is it animated?

Alert

Badge

Avatar

Progress

Skeleton

Table

Tooltip

Separator

Merifly UI

Spinner

Colors

Built with Merifly Design System