@pitchfork-ui/react
v0.13.2
Published
Accessible, themeable React component library for lelandrangel.com — 65+ components backed by a Style Dictionary token system, with dark mode and bundled CSS.
Downloads
1,904
Maintainers
lelandrangelReadme
@pitchfork-ui/react
Accessible, token-driven React components for lelandrangel.com.
Installation
npm install @pitchfork-ui/reactRequired peer dependencies — install these if not already in your project:
npm install @fortawesome/fontawesome-svg-core @fortawesome/free-regular-svg-icons @fortawesome/react-fontawesomeOptional peer dependencies — only needed if you use specific components:
| Package | Component | | ---------------------- | ------------- | |
prism-react-renderer|CodeSnippet|npm install prism-react-renderer
Setup
No stylesheet import needed. Component CSS and design token variables are injected automatically when components are imported.
// CSS loads automatically — nothing else required
import { Button } from '@pitchfork-ui/react';CJS / SSR environments — if your bundler does not support CSS-in-JS injection, import the full stylesheet manually:
import '@pitchfork-ui/react/styles.css';
Usage
import { Button, Card, Input } from '@pitchfork-ui/react';
export function Example() {
return (
<Card>
<Input label="Email" placeholder="[email protected]" />
<Button>Subscribe</Button>
</Card>
);
}Dark mode
Apply data-theme="dark" to any ancestor element (typically <html>) to switch to the dark theme:
<html data-theme="dark"></html>Requirements
- React 18.2+ or 19+
License
MIT