Components
Loading preview...
Here is Button Ui components
@prebuiltui
npx shadcn@latest add https://21st.dev/r/prebuiltui/button-ui"use client";
import React from "react";
export default function Example() {
return (
<div className="flex flex-wrap items-center justify-center gap-6 md:gap-16">
<button type="button" className="bg-white text-gray-500 active:scale-95 transition text-sm flex items-center px-4 py-2 gap-2 rounded w-max border border-gray-500/30">
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M9.298 14.75a1.5 1.5 0 0 1-2.596 0M12.5 5a4.5 4.5 0 1 0-9 0c0 5.25-2.25 6.75-2.25 6.75h13.5S12.5 10.25 12.5 5" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"/>
</svg>
Notification
</button>
<button type="button" className="bg-white text-gray-500 active:scale-95 transition text-sm flex items-center px-4 py-2 gap-2 rounded w-max border border-gray-500/30">
<svg width="14" height="16" viewBox="0 0 14 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M8.5.5h-6A1.5 1.5 0 0 0 1 2v12a1.5 1.5 0 0 0 1.5 1.5h9A1.5 1.5 0 0 0 13 14V5M8.5.5 13 5M8.5.5V5H13m-3 3.75H4m6 3H4m1.5-6H4" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"/>
</svg>
Docs
</button>
<button type="button" className="bg-white text-gray-500 active:scale-95 transition text-sm flex items-center px-4 py-2 gap-2 rounded w-max border border-gray-500/30">
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M14.665 1.333 7.332 8.667m7.333-7.334L10 14.666l-2.667-6m7.333-7.333L1.332 6l6 2.667" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round"/>
</svg>
Explore more
</button>
</div>
);
};