blackwork

Blackwork Tattoo style React UI layout (provides a unified interface for websites like @chengpeiquan 's blog).

Install

With pnpm (or npm or yarn ):

pnpm add blackwork

This package contains some peerDependencies that need to be installed together:

pnpm add @bassist/utils clsx react tailwindcss tailwind-merge tailwindcss-animate

These are optional and only need to be installed if the corresponding components are used.

# For `blackwork/form`
pnpm add @hookform/resolvers react-hook-form

Usage

In your tailwind.config.ts:

import { type Config } from 'tailwindcss'
import { theme } from 'blackwork/tailwind-config'
import typography from '@tailwindcss/typography'
import animate from 'tailwindcss-animate'

export default {
  darkMode: 'selector',
  content: [
    // e.g. in Next.js
    './src/app/**/*.{js,ts,jsx,tsx,mdx}',
    './src/components/**/*.{js,ts,jsx,tsx,mdx}',
    './src/contents/**/*.{js,ts,jsx,tsx,mdx}',

    // This path is required!
    './node_modules/blackwork/**/*.{js,ts,jsx,tsx,mdx}',
  ],
  theme,
  plugins: [typography(), animate],
} satisfies Config

In your root layout:

// e.g. `src/app/layout.tsx`
import 'blackwork/ui-globals.css'

In your layout or other components:

// e.g. `src/app/page.tsx`
import {
  // Components
  Avatar,
  AvatarFallback,
  AvatarImage,
  ExternalLink,
  LayoutFooter,
  LayoutHeader,
  ScrollToTop,

  // Hooks
  useKeyword,
} from 'blackwork'

// Icons
import { Moon, Sun } from 'blackwork/icons'

// Form
import { Form } from 'blackwork/form'

Documentation

There is no documentation yet, but it base on Shadcn UI , so the usage of some basic components can refer to it.

About other components, please refer to the component props in the source code for usage.