이 사이트는 shadcn-svelte 공식 문서의 한국어 번역입니다.
6.9k
새 컴포넌트: Field, Input Group, Item 외 다수

웹을 위한 빌딩 블록

깔끔하고 현대적인 빌딩 블록. 모든 Svelte 프로젝트에서 사용 가능. 복사해서 앱에 붙여넣기만 하면 됩니다. 오픈 소스. 영원히 무료.

블록 둘러보기
Files
routes/otp-01/+page.svelte 
<script>
  import OTPForm from "$lib/components/otp-form.svelte";
</script>

<div class="flex min-h-svh w-full items-center justify-center p-6 md:p-10">
  <div class="w-full max-w-xs">
    <OTPForm />
  </div>
</div>
otp-01
otp-01
Files
routes/otp-02/+page.svelte 
<script>
  import OTPForm from "$lib/components/otp-form.svelte";
</script>

<div class="flex min-h-svh w-full">
  <div class="flex w-full items-center justify-center p-6 lg:w-1/2">
    <div class="w-full max-w-xs">
      <OTPForm />
    </div>
  </div>
  <div class="relative hidden w-1/2 lg:block">
    <img
      alt="Authentication"
      class="absolute inset-0 h-full w-full object-cover"
      height={1080}
      src="/placeholder.svg"
      width={1920}
    />
  </div>
</div>
otp-02
otp-02
Files
routes/otp-03/+page.svelte 
<script>
  import GalleryVerticalEndIcon from "@lucide/svelte/icons/gallery-vertical-end";
  import OTPForm from "$lib/components/otp-form.svelte";
</script>

<div class="bg-muted flex min-h-svh flex-col items-center justify-center gap-6 p-6 md:p-10">
  <div class="flex w-full max-w-xs flex-col gap-6">
    <a href="#/" class="flex items-center gap-2 self-center font-medium">
      <div
        class="bg-primary text-primary-foreground flex size-6 items-center justify-center rounded-md"
      >
        <GalleryVerticalEndIcon class="size-4" />
      </div>
      Acme Inc.
    </a>
    <OTPForm />
  </div>
</div>
otp-03
otp-03
Files
routes/otp-04/+page.svelte 
<script>
  import OTPForm from "$lib/components/otp-form.svelte";
</script>

<div class="flex min-h-svh w-full items-center justify-center p-6 md:p-10">
  <div class="w-full max-w-sm md:max-w-3xl">
    <OTPForm />
  </div>
</div>
otp-04
otp-04
Files
routes/otp-05/+page.svelte 
<script>
  import OTPForm from "$lib/components/otp-form.svelte";
</script>

<div class="bg-background flex min-h-svh flex-col items-center justify-center gap-6 p-6 md:p-10">
  <div class="w-full max-w-sm">
    <OTPForm />
  </div>
</div>
otp-05
otp-05