react-keystone
Advanced tools
An unofficial React component library implementing the Pennsylvania Keystone Design System (KDS), providing accessible, reusable components that follow Commonwealth of Pennsylvania design standards.
⚠️ Disclaimer: This is an unofficial, community-maintained library. It is not affiliated with or endorsed by the Commonwealth of Pennsylvania or the official Keystone Design System team. For official resources, visit components.pa.gov.
react-keystone provides React developers with production-ready components that match the official Pennsylvania Keystone Design System patterns. Built with TypeScript for full type safety, this library helps ensure your applications maintain visual and behavioral consistency with PA.gov standards.
Includes 21 components systematically extracted from the official KDS Storybook:
npm install react-keystone
This library provides React component wrappers for KDS. You'll need to set up the KDS CSS and assets separately.
npm install react-keystone
Follow the official KDS installation guide to download and set up the Keystone Design System in your project.
Quick Summary:
Download the KDS distribution package from the official site (current version: 2.0.1)
Extract and place the dist/ folder in your project's public/ directory:
public/
└── kds/
└── 2.0.1/
├── main.min.css
├── main.min.js
├── main.LICENSE.txt
└── assets/
├── fonts/
└── icons/
Link the CSS in your HTML (e.g., index.html):
<link rel="stylesheet" href="/kds/2.0.1/main.min.css" />
KDS uses Plus Jakarta Sans and Zilla Slab fonts. Choose one of these options:
Add to your HTML <head>:
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&family=Zilla+Slab:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap" rel="stylesheet" />
If you need to self-host fonts, the KDS distribution package includes font files in assets/fonts/. See the official font installation guide for detailed instructions.
import { KeystoneButton } from 'react-keystone';
function App() {
return (
<div>
<KeystoneButton variant="filled" onClick={() => console.log('Clicked!')}>
Submit
</KeystoneButton>
<KeystoneButton variant="outlined" icon>
Next Step
</KeystoneButton>
<KeystoneButton link href="/home">
Go Home
</KeystoneButton>
</div>
);
}
In your index.html:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="/kds/2.0.1/main.min.css" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&family=Zilla+Slab:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap" rel="stylesheet" />
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.tsx"></script>
</body>
</html>
In your app/layout.tsx or pages/_app.tsx:
import type { Metadata } from 'next';
export const metadata: Metadata = {
title: 'My PA App',
};
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang="en">
<head>
<link rel="stylesheet" href="/kds/2.0.1/main.min.css" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="" />
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&family=Zilla+Slab:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap" rel="stylesheet" />
</head>
<body>{children}</body>
</html>
);
}
import {
KeystoneTextInput,
KeystoneSelect,
KeystoneCheckbox,
KeystoneButton,
KeystoneCardContainer
} from 'react-keystone';
function ContactForm() {
return (
<KeystoneCardContainer padding="p-4">
<h2>Contact Us</h2>
<KeystoneTextInput
label="Full Name"
placeholder="Enter your name"
required
/>
<KeystoneTextInput
label="Email"
type="email"
helpText="We'll never share your email"
/>
<KeystoneSelect
label="County"
options={[
{ value: '', label: 'Select a county' },
{ value: 'adams', label: 'Adams' },
{ value: 'allegheny', label: 'Allegheny' }
]}
/>
<KeystoneCheckbox
label="Subscribe to updates"
name="subscribe"
/>
<KeystoneButton variant="primary">Submit</KeystoneButton>
</KeystoneCardContainer>
);
}
import { KeystoneNavbar, KeystoneBreadcrumb } from 'react-keystone';
function Layout() {
return (
<>
<KeystoneNavbar
brandText="My PA Application"
navItems={[
{ label: 'Home', href: '/' },
{ label: 'Services', href: '/services' },
{ label: 'Contact', href: '/contact' }
]}
/>
<KeystoneBreadcrumb
items={[
{ label: 'Home', href: '/' },
{ label: 'Services', href: '/services' },
{ label: 'Apply', href: '/services/apply' }
]}
/>
</>
);
}
import { KeystoneAlert, KeystoneTypography } from 'react-keystone';
function InfoPage() {
return (
<div>
<KeystoneTypography variant="display-lg" as="h1">
Welcome to PA Services
</KeystoneTypography>
<KeystoneAlert variant="info" title="Important Notice">
All applications must be submitted by the deadline.
</KeystoneAlert>
<KeystoneTypography variant="body-md" as="p">
Access state services and resources through our digital platform.
</KeystoneTypography>
</div>
);
}
✅ Production Ready - All 21 KDS components fully implemented and tested.
All components have been systematically extracted from the official Pennsylvania Keystone Design System Storybook and are ready for production use.
This package is being systematically built by extracting HTML patterns and component specifications from the official Pennsylvania Keystone Design System Storybook.
This is a community-driven effort to provide high-quality React implementations of Pennsylvania's design system. Contributions are welcome!
MIT
Built to support Pennsylvania digital services and improve citizen experiences through consistent, accessible design.
FAQs
React components for the Pennsylvania Keystone Design System
The npm package react-keystone receives a total of 1 weekly downloads. As such, react-keystone popularity was classified as not popular.
We found that react-keystone demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Multiple high-impact npm maintainers confirm they have been targeted in the same social engineering campaign that compromised Axios.
Security News
Axios compromise traced to social engineering, showing how attacks on maintainers can bypass controls and expose the broader software supply chain.
Security News
Node.js has paused its bug bounty program after funding ended, removing payouts for vulnerability reports but keeping its security process unchanged.