REACT COMPONENTS

Blackwork

Tattoo-inspired React components for blogs, docs, and personal sites.

Getting Started View components

Composed components. Working interactions.

Content site example · Try the controls

JOURNAL

FORM / 001

Less noise.
More story.

Design notes

Type · Space · Material

Give the story room to breathe.

Space sets the reading pace. Typography gives each idea its place. Navigation floats above the image, keeping useful actions close to the story.

Explore layouts

Reading preferences

Text size

Show summary

Changes apply to the article preview.

Design inspiration

A reading list starts with one story. Save the article to try the interaction.

Liquid glassTranslucent surfaces. Fluid highlights.

Start with one component

Familiar APIs. A distinct point of view.

Compose layouts, themes, and forms with React. Add glass where controls need emphasis, with room for the content and rhythm of each site.

pnpm add blackwork

Glass APIs are a prerelease preview. Check availability before installing.

Read the getting started guide

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>
)