@walterpmoore-ui/components

React UI component library for walterpmoore-ui. Built with Radix UI primitives and Tailwind CSS.

Installation

npm install @walterpmoore-ui/components
# or
pnpm add @walterpmoore-ui/components

Peer dependencies — make sure these are installed in your project:

npm install react react-dom

Setup

1. Import the stylesheet

In your app entry point (e.g. main.tsx or _app.tsx):

import "@walterpmoore-ui/components/styles";

2. Configure Tailwind (if using Tailwind in your project)

In your tailwind.config.js, add the package to the content array so Tailwind doesn't purge the component classes:

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./src/**/*.{ts,tsx}",
    "./node_modules/@walterpmoore-ui/components/dist/**/*.js",
  ],
  // ...
};

Components

Button

import { Button } from "@walterpmoore-ui/components";

<Button>Click me</Button>
<Button variant="destructive">Delete</Button>
<Button variant="outline" size="sm">Cancel</Button>

Variants: default | destructive | outline | secondary | ghost | link | icon | mainApp

Sizes: default | sm | lg | icon

Use asChild to render as a different element (e.g. a link):

import { Button } from "@walterpmoore-ui/components";
import { Link } from "react-router-dom";

<Button asChild>
  <Link to="/dashboard">Go to dashboard</Link>
</Button>;

Input

import { Input } from "@walterpmoore-ui/components";

<Input placeholder="Search..." />
<Input type="email" placeholder="Email" disabled />

Alert

import { Alert, AlertTitle, AlertDescription } from "@walterpmoore-ui/components";

<Alert>
  <AlertTitle>Heads up</AlertTitle>
  <AlertDescription>Something happened.</AlertDescription>
</Alert>

<Alert variant="destructive">
  <AlertTitle>Error</AlertTitle>
  <AlertDescription>Something went wrong.</AlertDescription>
</Alert>

Variants: default | destructive | warning | success

Tooltip

import { Tooltip } from "@walterpmoore-ui/components";

<Tooltip content="This is a tooltip">
  <button>Hover me</button>
</Tooltip>

<Tooltip content="Bottom tooltip" side="bottom" align="start" delayDuration={200}>
  <span>Hover</span>
</Tooltip>

Props: content | side (top | right | bottom | left) | align (start | center | end) | delayDuration

Dialog

import {
  DialogRoot,
  DialogTrigger,
  DialogContent,
  DialogClose,
} from "@walterpmoore-ui/components";

<DialogRoot>
  <DialogTrigger asChild>
    <button>Open dialog</button>
  </DialogTrigger>
  <DialogContent>
    <h2>Dialog Title</h2>
    <p>Dialog body content.</p>
    <DialogClose asChild>
      <button>Close</button>
    </DialogClose>
  </DialogContent>
</DialogRoot>;

Card

import {
  Card,
  CardHeader,
  CardContent,
  CardFooter,
} from "@walterpmoore-ui/components";

<Card>
  <CardHeader>Title</CardHeader>
  <CardContent>Body content</CardContent>
  <CardFooter>Footer</CardFooter>
</Card>;

Paper

import { Paper } from "@walterpmoore-ui/components";

<Paper>Content inside a paper surface</Paper>;

License

MIT