Components
Loading preview...
Display a dropdown list of items.
@shugar
npx shadcn@latest add https://21st.dev/r/shugar/select-1import { Select } from "@/components/ui/select-1";
const ArrowCircleUp = () => (
<svg
height="16"
strokeLinejoin="round"
viewBox="0 0 16 16"
width="16"
>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M7.25 10.75V11.5H8.75V10.75V6.56066L10.2197 8.03033L10.75 8.56066L11.8107 7.5L11.2803 6.96967L8.53033 4.21967C8.23744 3.92678 7.76256 3.92678 7.46967 4.21967L4.71967 6.96967L4.18934 7.5L5.25 8.56066L5.78033 8.03033L7.25 6.56066V10.75ZM14.5 8C14.5 11.5899 11.5899 14.5 8 14.5C4.41015 14.5 1.5 11.5899 1.5 8C1.5 4.41015 4.41015 1.5 8 1.5C11.5899 1.5 14.5 4.41015 14.5 8ZM8 16C12.4183 16 16 12.4183 16 8C16 3.58172 12.4183 0 8 0C3.58172 0 0 3.58172 0 8C0 12.4183 3.58172 16 8 16Z"
/>
</svg>
);
export default function PrefixAndSuffixDemo() {
return (
<div className="flex gap-8 items-center justify-center">
<Select
placeholder="Small"
prefix={<ArrowCircleUp />}
size="small"
suffix={<ArrowCircleUp />}
/>
<Select
placeholder="Default"
prefix={<ArrowCircleUp />}
suffix={<ArrowCircleUp />}
/>
<Select
placeholder="Large"
prefix={<ArrowCircleUp />}
size="large"
suffix={<ArrowCircleUp />}
/>
</div>
);
}