Components
Loading preview...
Here is Spinner component
npx shadcn@latest add https://21st.dev/r/shadcn/spinnerimport { Button } from "@/components/ui/button"
import {
Item,
ItemActions,
ItemContent,
ItemDescription,
ItemFooter,
ItemMedia,
ItemTitle,
} from "@/components/ui/item"
import { Progress } from "@/components/ui/progress"
import { Spinner } from "@/components/ui/spinner"
export default function SpinnerItem() {
return (
<div className="flex w-full max-w-md flex-col gap-4 [--radius:1rem]">
<Item variant="outline">
<ItemMedia variant="icon">
<Spinner />
</ItemMedia>
<ItemContent>
<ItemTitle>Downloading...</ItemTitle>
<ItemDescription>129 MB / 1000 MB</ItemDescription>
</ItemContent>
<ItemActions className="hidden sm:flex">
<Button variant="outline" size="sm">
Cancel
</Button>
</ItemActions>
<ItemFooter>
<Progress value={75} />
</ItemFooter>
</Item>
</div>
)
}