<Input type="text" placeholder="Email" />
npx @left4code/cosmic-ui-cli@latest add input
This writes the component and everything it imports, then installs the packages it needs. Run npx @left4code/cosmic-ui-cli@latest initfirst if you haven't already (it detects Vue automatically).
Or copy and paste the code below by hand.
<script setup lang="ts">
import { twMerge } from "tailwind-merge";
import Frame, { parsePaths } from "@/components/ui/frame.vue";
defineOptions({ inheritAttrs: false });
const framePaths = parsePaths(
'[{"show":true,"style":{"strokeWidth":"1","stroke":"var(--color-frame-1-stroke)","fill":"var(--color-frame-1-fill)"},"path":[["M","17","0"],["L","100% - 7","0"],["L","100% + 0","0% + 9.5"],["L","100% - 18","100% - 6"],["L","4","100% - 6"],["L","0","100% - 15"],["L","17","0"]]},{"show":true,"style":{"strokeWidth":"1","stroke":"var(--color-frame-2-stroke)","fill":"var(--color-frame-2-fill)"},"path":[["M","9","100% - 6"],["L","100% - 22","100% - 6"],["L","100% - 25","100% + 0"],["L","12","100% + 0"],["L","9","100% - 6"]]}]'
);
</script>
<template>
<div
:class="
twMerge([
'relative',
'[--color-frame-1-stroke:var(--color-primary)]/70',
'[--color-frame-1-fill:var(--color-primary)]/10',
'[--color-frame-2-stroke:transparent]',
'[--color-frame-2-fill:transparent]',
])
"
>
<div class="absolute inset-0 -mb-2 [&>svg]:drop-shadow-[0_0px_20px_var(--color-primary)]">
<Frame :paths="framePaths" />
</div>
<input
v-bind="$attrs"
class="w-full outline-none px-8 py-2 relative placeholder:text-foreground/70"
/>
</div>
</template>
Update the import paths to match your project setup.
import Input from "@/components/ui/input.vue";
<Input type="text" placeholder="Email" />