Components
Starting preview...
Display a dropdown list of items. A recreation of Vercel's Geist design system.
@shugar
npx shadcn@latest add https://21st.dev/r/shugar/selectimport React from "react";
import { Select } from "@/components/ui/select";
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 const SelectDemo = () => {
return (
<div className="container mx-auto py-8">
<div className="grid grid-cols-3 gap-8 mb-8 items-end">
<Select placeholder="Default select" />
<Select
placeholder="With prefix"
prefix={<ArrowCircleUp />}
/>
<Select
label="My label"
placeholder="With label"
/>
</div>
<div className="grid grid-cols-3 gap-8">
<Select
disabled
placeholder="Disabled select"
/>
<Select
error="Please select a value"
placeholder="Error state"
/>
<Select
placeholder="With suffix"
suffix={<ArrowCircleUp />}
/>
</div>
</div>
);
};