Skip to content
Docs
Code

Code

Code-block skeleton with a Lucide icon and stacked text bars.

Loading...

Installation

CLI

pnpm dlx shadcn@latest add https://animata.design/r/skeleton/code.json

Manual

Install dependencies

npm install lucide-react

Run the following command

mkdir -p components/animata/skeleton && touch components/animata/skeleton/code.tsx

Paste the code

import { CodeIcon } from "lucide-react";
 
export default function Code() {
  return (
    <div className="flex min-h-52 w-52 flex-col gap-3 rounded-md border bg-background p-3 shadow-xl transition-shadow hover:shadow-sm dark:border-zinc-700">
      <CodeIcon className="w-6 text-blue-500" />
      <div className="flex flex-1 flex-col justify-center gap-2">
        <div className="h-2 w-1/2 rounded-md bg-muted" />
        <div className="h-2 w-3/4 rounded-md bg-muted-foreground/25" />
        <div className="h-2 w-3/5 rounded-md bg-muted" />
      </div>
    </div>
  );
}

Usage

Use in docs sidebars, snippet panels, or IDE-style previews.

import Code from "@/components/animata/skeleton/code";
 
<Code />

Credits

Built by hari.

Edit this page on GitHub
Stacked SectionsCookie Banner