JayLabs UI
A premium React component library with a Soft Metallic design system. Ship polished interfaces faster with 22 production-ready components, full TypeScript support, and zero CSS-in-JS overhead.
npm install @jaylabs/ui
Installation
Get up and running in under a minute.
npm install @jaylabs/ui
// 2. Import styles (once in your app entry)
import '@jaylabs/ui/dist/index.css';
// 3. Use components
import { Button, Card, Input } from '@jaylabs/ui';
Design Tokens
The Soft Metallic palette. Every value is available as a CSS custom property and a TypeScript export.
Primary Palette
Semantic Colors
Gradient
Button
5 variants, 3 sizes, loading state, and icon support.
Input
Text fields with labels, validation, icons, and 3 sizes.
Select
Native dropdown with custom chevron.
Textarea
Multiline text input with resize control.
Checkbox
With checked, unchecked, and indeterminate states.
Radio / RadioGroup
Radio buttons with group management.
Toggle
Switch toggle with accessible role="switch".
DatePicker
Calendar dropdown with month navigation, min/max constraints, and a today shortcut.
Card
4 variants with Header, Body, and Footer sub-components.
Clean, minimal card with subtle shadow.
Deeper shadow for emphasis.
Border-only, no shadow.
Gradient border with glow.
Tabs
3 styles: default, pills, and underline. With badges and disabled states.
Avatar & Badge
User avatars with status indicators and status badges.
Tooltip
4 positions with configurable delay. Hover to see.
Sidebar
Collapsible navigation with sections, badges, and 3 variants.
Breadcrumbs
Navigational breadcrumbs with custom separators and sizes.
Alert
4 severity levels with default icons and dismissible option.
Modal
5 sizes including fullscreen. Escape key and overlay click to close. Scroll lock.
TaskCard
Gamified task card for DopeDash. XP rewards, priorities, streaks, and completion toggle.
Summarize Q4 metrics for the board
EnvelopeCard
Email card for MightyMailer. 6 statuses, envelope flap, expandable body.
InventoryCard
Item card for OrganizedMe. Image, location, quantity, condition, and favorites.
Mechanical Keyboard
Coffee Maker
CallerCard
Caller info card for CallerIQ. Type icons, risk score, carrier/location details.