A볼트AstroB볼트BusinessC볼트카페·디저트
md2026-10-09

참고할 만한 사이트

  • astro
  • 참고
  • 디자인

사이트 디자인·UI를 고칠 때 참고할 사이트 모음. 새로 발견하면 여기에 계속 추가한다.

사이트한 줄 요약참고할 점
daisyUITailwind CSS 플러그인 형태의 UI 컴포넌트 모음 (v5)버튼·카드·토글 같은 기본 부품 디자인, 테마(라이트/다크 등) 구성
Shadcnblocks Admin – Todoshadcn/ui로 만든 관리자 대시보드 템플릿의 할 일(Todo) 화면사이드바 구성, 목록·칸반·캘린더 보기 전환, 필터·정렬, 태그·우선순위 표시, 명령 팔레트(⌘K)

daisyUI

  • 무엇인가: Tailwind CSS 위에 얹어 쓰는 컴포넌트 모음. btn, card처럼 의미 있는 클래스 이름 하나로 부품을 만든다.
  • Astro와의 관계: JavaScript 없이 CSS 클래스만 쓰는 방식이라 Astro를 포함해 어떤 프레임워크에서도 쓸 수 있다.
  • 이 사이트에 쓰려면: 지금 이 사이트는 Tailwind를 쓰지 않는다(src/styles/의 직접 쓴 CSS). 바로 가져다 쓰기보다는 색·간격·부품 모양을 눈으로 참고하는 용도가 현실적이다.

Shadcnblocks Admin (Todo)

  • 무엇인가: shadcn/ui 컴포넌트로 만든 관리자 화면 키트의 데모. Todo 외에도 이커머스, 프로젝트 관리, AI 채팅 같은 예시 화면이 사이드바에 있다.
  • 만든 기술: Next.js + React + shadcn/ui.
  • Astro와의 관계: React 컴포넌트라 Astro에서 쓰려면 React 통합(@astrojs/react)이 필요하다. 이 사이트는 .astro 컴포넌트만 쓰므로, 화면 구성 아이디어(사이드바, 보기 전환, 필터 바)를 참고하는 용도로 본다.
GRAPH VIEW · 연결 지도
dashboardmdcsvjson