Components
Loading preview...
Various surfaces with shadows.
@shugar
npx shadcn@latest add https://21st.dev/r/shugar/materialimport React from "react";
import { Material } from "@/components/ui/material";
const Placeholder = ({ type }) => (
<div className="flex flex-col h-[80px] justify-center items-center">{type}</div>
);
export const Default = () => (
<div className="flex flex-col gap-6 w-full">
<Material type="base">
<Placeholder type="Base" />
</Material>
<Material type="small">
<Placeholder type="Small" />
</Material>
<Material type="medium">
<Placeholder type="Medium" />
</Material>
<Material type="large">
<Placeholder type="Large" />
</Material>
<Material type="tooltip">
<Placeholder type="Tooltip" />
</Material>
<Material type="menu">
<Placeholder type="Menu" />
</Material>
<Material type="modal">
<Placeholder type="Modal" />
</Material>
<Material type="fullscreen">
<Placeholder type="Fullscreen" />
</Material>
</div>
);