solid-glass

Solid Glass

스타일 · 설치 · 구성 · 기여하기

멀리서 보면 단단하게 느껴지고, 가까이서 보면 미묘한 질감이 드러나는 세련된 유리에서 영감을 받은 미학. 섬세한 하이라이트, 정교한 테두리, 부드러운 그림자가 깊이를 만들어내며, 절제된 마감은 투명함, 굴절, 유동성보다 명료함, 안정감, 그리고 견고함을 강조합니다.

이것은 블록 중 하나입니다: 컴포넌트로 만들어진 전체 화면으로, 보고, 읽고, 복사할 수 있습니다. 아래에는 컴포넌트 자체가 있습니다.

이것은 플랫 디자인과 리퀴드 글라스 사이에 위치합니다. 플랫은 마감이라고 할 만한 것이 없는 불투명한 블록이고, 리퀴드 글라스는 거의 투명해서 텍스트가 많은 페이지에서 독자는 항상 배경과 단어를 두고 싸우게 됩니다. Solid Glass는 윤곽선만 통과시킵니다: 유리라는 것을 알 수 있을 만큼은 충분하지만, 읽기를 방해할 만큼은 아닙니다.

스타일

촉각성
만질 수 있는 듯한 인터페이스. 모든 상호작용은 미묘한 촉감과 반응을 담고 있습니다.

정밀함
깔끔한 기하학, 세련된 디테일, 절제된 조명이 정밀하고 기술적인 미학을 만들어냅니다.

물리성
깊이는 두께, 그림자, 공간적 위계에서 비롯되어 모든 요소에 물리적 실체감을 부여합니다.

질감
미묘한 모서리 하이라이트, 정교한 테두리, 부드러운 그림자가 각 표면의 성격을 정의합니다.

왜 이렇게 만들어졌는가
AI 애플리케이션은 끊임없이 변하는 정보를 중심으로 구축됩니다 — 스트리밍되는 응답, 작업을 수행하는 에이전트, 그리고 인간의 입력을 기다리는 결정들.

Solid Glass는 인터페이스를 차분하고 읽기 쉽게 유지합니다. 중립적인 표면은 시각적 방해를 줄이고, 깊이는 위계를 확립하며, 색상과 모션은 의미 있는 피드백을 위해 아껴 둡니다.

전체 시스템은 가벼운 CSS로 구축되었으며, 라이트 모드와 다크 모드 모두에서 기존 shadcn/ui 컴포넌트와 함께 작동합니다.

Material 페이지는 페인이 어떻게 만들어지는지 보여주고, Create 페이지에서는 다이얼을 돌려볼 수 있습니다.

설치
Solid Glass는 하나의 스타일시트입니다. 각 shadcn/ui 컴포넌트의 각 부분을 data-slot과 이미 지니고 있는 클래스로 찾아내므로, 여러분이 가진 컴포넌트는 변경할 필요가 없습니다.

shadcn/ui 프로젝트(React 19, Tailwind CSS 4, Base UI 컴포넌트)에서 시작하세요:

npx shadcn@latest init
이 저장소에서 바로 스타일시트를 추가하세요:

npx shadcn@latest add deeplethe/solid-glass/solid-glass
Tailwind와 shadcn의 스타일시트 뒤에 임포트하고, shadcn init이 작성한 :root 및 .dark 색상 변수를 삭제하세요(Solid Glass가 동일한 이름을 정의합니다):

@import "tailwindcss" ;
@import "tw-animate-css" ;
@import "shadcn/tailwind.css" ;
@import "./solid-glass.css" ;
다크는 설계된 그대로의 재질이며, 라이트도 있습니다. 나머지는 설치 페이지에 있습니다.

Solid Glass 자체 컴포넌트도 같은 방식으로 설치합니다:

npx shadcn@latest add deeplethe/solid-glass/status-glyph

컴포넌트
설명

status-glyph
턴이 진행 중임을, 그리고 무엇을 하고 있는지를 알려주는 세 개의 빛점.

panel , tag , dot-loader
가장 얇은 페인, 작은 라벨, 그리고 기다리는 점들의 행.

turn-status , composer , tool-steps , diff-view , ask-card , context-ring , task-notice , reasoning
에이전트가 작업하는 인터페이스를 위한 것: 상태 표시줄, 에이전트에게 글을 쓰는 상자, 수행한 단계, diff, 에이전트가 묻는 질문, 컨텍스트가 얼마나 찼는지, 작업으로부터의 알림, 그리고 에이전트의 사고.

구성

경로
설명

src/solid-glass.css
테마. 하나의 파일에 담긴 전체 재질: 색상, 세 가지 두께의 유리, 하나의 상태, 모션. shadcn/ui 자체의 변수 이름을 정의합니다.

registry.json
레지스트리: shadcn add가 설치하는 대상. scripts/build-registry.mjs 가 작성하며, 이 스크립트는 사이트를 위한 public/r/ 도 빌드합니다.

src/components/ui/
사이트가 보여주는 컴포넌트. shadcn/ui의 것(Base UI, base-nova )은 자체 명령줄로 설치되었고, Solid Glass의 것도 있습니다. shadcn/ui의 일부( button , input , tabs , dialog , dropdown-menu , sheet , sidebar 및 일부 폼 컨트롤)는 재고 버전과 작은 부분에서 다릅니다; 스타일시트는 그 차이에 의존하지 않습니다.

src/create/ , src/pages/create.tsx
Create 페이지: 다이얼을 드러낸 재질(두께, 색조, 차트 색상, 서체, 반경, 테두리, 블러), 선택할 때마다 반영되는 미리보기, 그리고 그로부터 나오는 몇 줄의 CSS. options.ts는 각 선택이 스타일시트의 변수에 무엇을 하는지 설명하며, 미리보기 카드는 shadcn/ui의 것입니다.

src/blocks/ , src/pages/blocks.tsx
블록: 컴포넌트로 만들어진 전체 화면으로, Blocks 페이지에서 자체 프레임( /view/<name> )에 표시됩니다. 폴더 최상위의 단일 파일은 Solid Glass 자체의 것( agent-workspace )이며 레지스트리에 포함됩니다; 폴더들은 재질을 입힌 shadcn/ui의 블록으로, shadcn/ui에서 설치됩니다.

src/examples/
ui.shadcn.com에서처럼 예제당 하나의 작은 파일: shadcn/ui 자체의 예제와, Solid Glass 자체 컴포넌트를 위한 예제.

content/
문서. components/ 는 각 컴포넌트에 대한 shadcn/ui의 페이지이고, solid/ 와 docs/ 는 Solid Glass의 것입니다.

src/site/ , src/pages/ , src/home/
사이트: 헤더, 사이드바, 컴포넌트 미리보기, 그리고 홈 페이지의 카드 벽.

.github/
모든 풀 리퀘스트가 통과해야 하는 검사( checks.yml ), main을 게시하는 워크플로( pages.yml ), 그리고 이슈와 풀 리퀘스트를 위한 템플릿.

scripts/build-docs.mjs
content/ 를 사이트가 렌더링하는 src/docs/generated.json 으로 변환합니다.

실행
npm install
npm run dev # http://localhost:5191
npm run build # into dist/
npm run typecheck
/dev/banner (개발 전용)는 위의 배너로, 테마로 그려집니다: docs/banner-5.webp 는 820 x 200 창에서 두 배 크기로 찍은 스크린샷이며, 여기 다른 그림들처럼 WebP로 저장되었습니다(PNG로 저장한 같은 그림의 4분의 1 크기). 그림이 바뀌면 다음 번호로 저장하고 README가 그것을 가리키도록 하세요: GitHub는 README의 그림을 링크에 무엇을 덧붙이든 파일당 하나의 주소로 제공하며, 브라우저는 그 주소에서 가져온 것을 보관합니다.

/dev/examples (개발 전용)는 모든 예제를 한 번에 마운트하고 실패한 예제를 나열합니다. ?q=button,card 로 일부를 표시하고, ?theme=light , ?hover=<selector> 로 일치하는 항목을 마치 포인터가 그 위에 있는 것처럼 표시하며, ?click=<selector> 로 무언가를 눌러 열리는 것을 볼 수 있습니다.

SOLID_GLASS_ORIGIN 은 사이트가 제공되는 주소(Solid Glass 자체 컴포넌트가 서로를 이 주소로 지칭합니다)이고, SOLID_GLASS_BASE 는 그 아래에서 사이트가 위치한 경로입니다; 기본값은 이 저장소의 GitHub Pages입니다.

Solid Glass 자체 컴포넌트 추가하기

src/components/ui/<name>.tsx , shadcn/ui 컴포넌트처럼 작성: 함수 컴포넌트, 모든 부분에 data-slot, @/lib/utils 의 cn() .
src/examples/<name>-demo.tsx , 그리고 추가 예제마다 파일 하나.
content/solid/<name>.mdx : 프런트 매터( title , description ), 그다음 <ComponentPreview name="<name>-demo" /> , Installation, Usage, 그리고 예제마다 하나의 제목.

네 가지 규칙을 지키세요(Material 페이지가 보여줍니다): 마감은 가장자리에; 가볍지 않고 묵직하게; 깊이는 두께; 하나의 상태.

기여하기
변경 사항은 풀 리퀘스트를 통해 dev 에 반영되고, 메인테이너가 dev 를 main 에 병합하면 main 에, 그리고 그것과 함께 게시된 사이트와 레지스트리에 도달합니다. 나머지는 CONTRIBUTING.md 에 있습니다( 中文 ): 어떤 경우에 먼저 이슈를 열지, 푸시 전에 무엇을 실행할지, 그리고 리뷰가 무엇을 되돌려 보내는지. 서로를 대하는 방식은 Code of Conduct 에 있으며, 보안 보고는 SECURITY.md 의 주소로 보냅니다.

라이선스
MIT . shadcn/ui에서 온 컴포넌트, 예제, 컴포넌트 문서는 그 저자들의 것이며, 역시 MIT License 하에 있습니다: NOTICE.md 를 참고하세요.