REACT COMPONENTS

Blackwork

Blackwork 纹身风格的 React 组件，适合博客、文档与个人网站。

快速开始浏览组件

组件组合，真实交互。

内容站点示例 · 可直接操作

JOURNAL

FORM / 001

Less noise.
More story.

设计手记

排版 · 空间 · 材质

给内容一个安静的空间。

用留白组织阅读节奏，用排版呈现内容层次。导航轻轻浮在画面上，必要的操作始终触手可及。

查看布局组件

阅读偏好

字号

显示文章摘要

调整后，文章预览会即时变化。

设计灵感

值得留住的灵感，从一篇文章开始。点击文章下方的收藏按钮，试试状态变化。

液态玻璃透光材质，连续高光。

从一个组件开始

熟悉的 API，自己的风格。

用 React 组合布局、主题和表单，再为需要强调的操作加上玻璃外观。组件负责交互细节，页面保留自己的内容与节奏。

pnpm add blackwork

玻璃 API 为待发布预览，接入前请查看版本说明。

阅读接入指南

header.tsx

TSX

import { Button, LayoutHeader } from 'blackwork'

export const Header = () => (
  <LayoutHeader appearance="glass">
    <a href="/">Journal</a>
    <Button variant="glass" asChild>
      <a href="/articles">Explore articles</a>
    </Button>
  </LayoutHeader>
)

Blackwork

给内容一个安静的空间。

阅读偏好

设计灵感

熟悉的 API， 自己的风格。

熟悉的 API，自己的风格。