jays-ui

Reusable React UI component library by Jay Griff.

Install

npm install jays-ui

Peer dependencies required

• react (v19+)
• react-dom (v19+)
• react-router-dom (v7+)
• styled-components (v6+)

Other dependencies

• lucide-react (for icons)

Usage

import { Button, Card, NavBar, H1, PageContainer, MainContent, Header } from 'jays-ui';

function App() {
  return (
    <PageContainer>
      <NavBar />
      <MainContent>
        <Header title="Welcome" />
        <Card>
          <H1>Hello World</H1>
          <Button>Click Me</Button>
        </Card>
      </MainContent>
    </PageContainer>
  );
}

Components

Layout

• PageContainer
• Flex
• Stack
• Card
• Center
• MainContent

UI & Utility

• Button
• NavBar
• Typography (H1, H2, H3, P, A, Link, Strong, Em, Code, CodeBlock, Ul, Ol, Li, Blockquote)
• ThemeToggle
• Header
• Section
• DemoWrapper

Utility

• GlobalStyles (injects base styles)

Testing Pages

• FontTest (for font and typography testing)
• ThemeTest (theme switching and color testing)
• TypographyTest (typography and text style testing)
• LayoutTest (layout and spacing testing)
• ComponentsAll (showcase of all components)

Running the Full Project Locally

To view all UI testing and demo pages, you must clone the full repository:

git clone https://github.com/jaygriffinjay/jays-ui.git
cd jays-ui
npm install
npm run dev

This will start the Vite dev server. Open the provided local URL (usually http://localhost:5173) in your browser to explore all demo and testing pages.

Component Testing & Demo

This project includes demo pages and component testing in the src/components folder. You can run the project locally to explore and test all components:

npm run dev

License

MIT