Skylar
0 Followers · 0 Following
  • Joined on 2026-09-15
Repositories Projects Packages Public Activity Starred Repositories

@skylar/ui (0.7.5)

Published 2026-09-15 21:48:15 -04:00 by Skylar

Installation

@skylar:registry=https://git.outer-haven.io/api/packages/Skylar/npm/
npm install @skylar/ui@0.7.5
"@skylar/ui": "0.7.5"

About this package

Shared React component library for Outer Haven projects.

@randompedestrian07/ui

Shared React component library for Outer Haven projects.

Installation

Local Development (file: reference)

During active development, add to your app's package.json:

"dependencies": {
  "@randompedestrian07/ui": "file:../ui"
}

Then run npm install.

From GitHub Packages (production)

npm install @randompedestrian07/ui

Usage

import { Avatar, Toggle, ConfirmModal, AnimatedCard } from "@randompedestrian07/ui";
import { variants, transitions } from "@randompedestrian07/ui";

// Import styles in your main entry
import "@randompedestrian07/ui/styles/reset.css";
import "@randompedestrian07/ui/styles/tokens-theme.css";
import "@randompedestrian07/ui/styles/tokens-structure.css";
import "@randompedestrian07/ui/styles/keyframes.css";
import "@randompedestrian07/ui/styles/utilities.css";

Development

# Install deps
npm install

# Watch mode (rebuilds on change)
npm run dev

# Build once
npm run build

# Type check
npm run typecheck

Publishing

npm login --registry=https://npm.pkg.github.com
npm version patch|minor|major
npm publish

Components

Primitives

  • Toggle - Switch toggle input

Display

  • Avatar - User/assistant avatar with variants and sizes
  • SectionHeader - Section header with optional actions
  • ThinkingDots - Animated loading dots

Patterns

  • AnimatedCard / AnimatedCardContainer - Cards with entry animations
  • ConfirmModal - Confirmation dialog with Framer Motion
  • DeleteConfirm - Inline delete confirmation UI

Styles

CSS Files

  • reset.css - Base reset and body styles
  • tokens-theme.css - Color and typography tokens (modifiable)
  • tokens-structure.css - Layout and timing tokens (don't modify)
  • keyframes.css - All @keyframes animations
  • utilities.css - Utility classes (.btn, .card, .flex-center, etc.)

Motion Variants

import { variants, transitions } from "@randompedestrian07/ui";

// Use with Framer Motion
<motion.div variants={variants.cardEntry} initial="initial" animate="animate" />

Available variants: sidebarItem, bubble, bloop, poof, sidebarFlip, pageFlip, fade, contentFade, cardEntry, cardContainer, modalOverlay, modal, letterContainer, letter, popover, deleteConfirm, thinkingDot, shimmer

Dependencies

Dependencies

ID Version
class-variance-authority ^0.7.1
clsx ^2.1.0
framer-motion ^11.0.0
lucide-react ^0.453.0
react-hook-form ^7.55.0
tailwind-merge ^2.6.0

Development Dependencies

ID Version
@tailwindcss/postcss ^4.1.18
@types/node ^25.0.6
@types/react ^18.2.0
@types/react-dom ^18.2.0
@vitejs/plugin-react ^5.1.2
autoprefixer ^10.4.23
postcss ^8.5.6
react ^18.2.0
react-dom ^18.2.0
tailwindcss ^4.1.18
tsup ^8.0.0
typescript ^5.3.0
vite ^7.3.1

Peer Dependencies

ID Version
react ^18.0.0 || ^19.0.0
react-dom ^18.0.0 || ^19.0.0
Details
npm
2026-09-15 21:48:15 -04:00
1
latest
99 KiB
Assets (1)
ui-0.7.5.tgz 99 KiB
Versions (1) View all
0.7.5 2026-09-15