@jp/ui - JP Component Library

A brutalist/technical design system built with shadcn/ui, Tailwind CSS v4, and Motion. Based on the jp_focus design system.

Design Philosophy

• Sharp corners - Zero border radius for a brutalist aesthetic
• High contrast - Black borders, monochrome base with strategic color accents
• Monospace typography - JetBrains Mono as the primary font
• 2px borders - Bold, clear interactive element boundaries

Installation

npm install @jp/ui
# or
pnpm add @jp/ui
# or
bun add @jp/ui

Peer Dependencies

Make sure you have these peer dependencies installed:

npm install react react-dom tailwindcss@^4.0.0

Setup

1. Import the styles

In your main CSS file or entry point:

@import "@jp/ui/styles.css";

Or in your main TypeScript/JavaScript file:

import "@jp/ui/styles.css";

2. Use the components

import { Button, Card, CardHeader, CardTitle, CardContent } from "@jp/ui";

function MyComponent() {
  return (
    <Card>
      <CardHeader>
        <CardTitle>Hello World</CardTitle>
      </CardHeader>
      <CardContent>
        <Button>Click me</Button>
      </CardContent>
    </Card>
  );
}

Components

Core Components

Component	Description
Button	Primary action button with variants (default, destructive, outline, secondary, ghost, link)
Input	Text input field
Textarea	Multi-line text input
Card	Content container with Header, Title, Description, Content, Action, Footer
Label	Form label
Separator	Visual separator line

Form Components

Component	Description
Select	Dropdown select with SelectTrigger, SelectContent, SelectItem, etc.
Switch	Toggle switch

Overlay Components

Component	Description
Dialog	Modal dialog with DialogHeader, DialogContent, DialogFooter, etc.
Sheet	Slide-out panel (supports left, right, top, bottom)
Popover	Floating popover
DropdownMenu	Context/dropdown menu with full submenu support
AlertDialog	Confirmation dialog

Feedback Components

Component	Description
Badge	Status badges with variants (default, secondary, destructive, outline, success, warning)
Tooltip	Hover tooltips
Spinner	Loading spinner
Skeleton	Loading placeholder
ASCIILoader	Unique ASCII character loading animation
FullScreenLoader	Full-screen loading overlay

Layout Components

Component	Description
Avatar	User avatar with fallback
Collapsible	Expandable/collapsible section
ScrollArea	Custom scrollable area

Hooks

Hook	Description
useDebounce	Debounce a value by specified delay
useIsMobile	Detect mobile viewport (< 768px)

Utilities

Utility	Description
cn	Combines clsx and tailwind-merge for conditional class names

Color Palette

Brand Colors

--primary-red: #c74440;
--primary-blue: #4a7ba7;
--accent-navy: #2b4562;
--accent-purple: #6e4a7c;

Semantic Colors

--success: #4a7b4a;
--warning: #b87d3e;
--error: #c74440;
--info: #4a7ba7;

Grayscale

--black: #1a1a1a;
--gray-dark: #4a4a4a;
--gray-medium: #8a8a8a;
--gray-light: #d4d4d4;
--gray-bg: #efefef;
--white: #ffffff;

Customization

You can override the CSS variables in your own stylesheet:

:root {
  --primary-blue: #your-custom-color;
  --primary-red: #your-custom-color;
}

Button Examples

import { Button } from "@jp/ui";

// Variants
<Button variant="default">Primary</Button>
<Button variant="destructive">Destructive</Button>
<Button variant="outline">Outline</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="ghost">Ghost</Button>
<Button variant="link">Link</Button>

// Sizes
<Button size="default">Default</Button>
<Button size="sm">Small</Button>
<Button size="lg">Large</Button>
<Button size="icon"><IconComponent /></Button>

Dialog Example

import {
  Dialog,
  DialogTrigger,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogDescription,
  DialogFooter,
  Button,
} from "@jp/ui";

<Dialog>
  <DialogTrigger asChild>
    <Button>Open Dialog</Button>
  </DialogTrigger>
  <DialogContent>
    <DialogHeader>
      <DialogTitle>Dialog Title</DialogTitle>
      <DialogDescription>
        This is a description of the dialog.
      </DialogDescription>
    </DialogHeader>
    <div>Dialog content goes here</div>
    <DialogFooter>
      <Button variant="outline">Cancel</Button>
      <Button>Confirm</Button>
    </DialogFooter>
  </DialogContent>
</Dialog>

License

MIT