How to add Paper CSS to your React project
Paper CSS is a drop-in CSS library that makes your app look like a paper sketch!
It's great for getting your practice projects to look good, without wasting too much time styling them.
To add it to your React project, the simplest way is to update the index.html file to include their publicly deployed CSS stylesheet:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
// =====> Include Paper CSS stylesheet
<link
rel="stylesheet"
href="https://unpkg.com/papercss@1.9.2/dist/paper.min.css"
/>
<title>Vite + React + TS</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.tsx"></script>
</body>
</html>
I used it to build the solution for the Public Holidays challenge and here's how it looks like:
Member discussion