svelte5-tailwind-templates Svelte Themes

Svelte5 Tailwind Templates

tailwindcss 기반 여러 templates 들을 svelte 5 버전으로 재작성한 튜토리얼 코드입니다.

Svelte 5 preview + Tailwind 템플릿 튜토리얼

구성요소

  • bun
  • svelte 5 preview (+ vite)
  • tailwindcss + daisyui

주요내용

  • TailGrids 템플릿 3 종을 svelte 5 preview 버전으로 재작성
    • Agency Template
    • Startup Site Template
    • Dashboard and Admin Template
  • state, effect 등의 svelte 5 기능 활용 (UI 컨트롤러)
  • chartjs 활용 : 막대그래프, 라인그래프 등.. (액션 포함)
  • youtube 비디오를 iframe 으로 재생 및 정지
  • snippet 과 render 으로 html 을 조립하고 파라미터 활용하기
  • KakaoMap API 로 지도 삽입하고 window 전역 변수에 타입 확장
  • splidejs 로 슬라이드 기능 삽입

Agency Template

블로그 : SvelteKit Tailwind 튜토리얼 - 4일차

top 화면

Agency - Tailwind CSS Agency Site Template

전체 화면

Agency - Tailwind CSS Agency Site Template

Template Section and Pages:

  • Home Page
  • About Us
  • Our Team
  • Features
  • Pricing
  • Support
  • Blog
  • 404 Page

Startup Site Template

블로그 : SvelteKit Tailwind 튜토리얼 - 5일차

top 화면

TailGrids - Startup Site Template

전체 화면

TailGrids - Startup Site Template

Template Section and Pages:

  • Home
  • Pricing
  • Features
  • Team Section
  • FAQ
  • Call to Action
  • Testimonials
  • Contacts Us
  • Newsletter
  • Log In & Sign Up
  • Privacy Policy Page
  • Legal Notice Page
  • Terms of Service Page
  • 404 Page

Dashboard and Admin Template

블로그 : SvelteKit Tailwind 튜토리얼 - 6일차

top 화면

TailGrids - Dashboard and Admin Template

전체 화면

TailGrids - Dashboard and Admin Template

chartjs with actions

chartjs-line-with-actions

Template Section and Pages

  • Home
  • NavMenu
  • Dashboard
  • Orders
  • Messages
  • Notifications
  • Sales
  • Events
  • Charts
  • Docs
  • Settings
  • Account Settings
  • Log In and Log Out
  • Sales Analytics - Chart and Graph
  • Revenue and Sales Section
  • Product Table
  • 404 Page

Top categories

Loading Svelte Themes