liquidify-react
Advanced tools
Production-ready React component library with 100% Apple Human Interface Guidelines compliance. iOS 17/macOS 14 calibrated design tokens with 48 accessible components (WCAG 2.1 AA certified). Features Apple-standard spring animations, 6-level elevation sy
Production-ready React component library with 100% Apple Human Interface Guidelines compliance. iOS 17 / macOS 14 calibrated design tokens • 48 accessible components • WCAG 2.1 AA certified
Website • Documentation • npm Package • GitHub
LiqUIdify is the only React component library calibrated to Apple's exact iOS 17 and macOS 14 design standards. While Material UI, Chakra UI, and Radix UI offer excellent components, none are built specifically for Apple-quality web applications.
| Feature | LiqUIdify | Material UI | Chakra UI | Radix UI |
|---|---|---|---|---|
| Apple HIG Compliance | ✅ 100% | ❌ Material Design | ❌ Custom System | ❌ Unstyled |
| iOS 17/macOS 14 Calibrated | ✅ Exact values | ❌ | ❌ | ❌ |
| 44px Touch Targets | ✅ HIG Standard | ⚠️ Varies | ⚠️ Varies | ⚠️ Unstyled |
| Spring Animations | ✅ Apple physics | ⚠️ Custom | ⚠️ Custom | ❌ None |
| Elevation System | ✅ 6-level (iOS) | ⚠️ Material | ⚠️ Custom | ❌ None |
| Reduced Motion | ✅ Full support | ⚠️ Partial | ⚠️ Partial | ❌ None |
| Liquid Glass Effects | ✅ Native-like blur | ❌ | ❌ | ❌ |
| WCAG 2.1 AA | ✅ Certified | ✅ | ✅ | ⚠️ Varies |
Choose LiqUIdify if:
Every component, animation, and interaction follows Apple's Human Interface Guidelines exactly. Not "inspired by"—compliant with.
Production-ready accessibility with zero configuration required.
prefers-reduced-motion (all animations disabled or instant)prefers-contrast (enhanced borders and text)Battle-tested with enterprise-grade quality.
Apple's signature visual language adapted for web.
backdrop-filterFast by default with modern build tooling.
import { Button } from "liquidify-react/button" for granular controlInstall LiqUIdify and peer dependencies in one command:
# Bun (recommended)
bun add liquidify-react react react-dom @ark-ui/react framer-motion lucide-react
# npm
npm install liquidify-react react react-dom @ark-ui/react framer-motion lucide-react
# yarn
yarn add liquidify-react react react-dom @ark-ui/react framer-motion lucide-react
# pnpm
pnpm add liquidify-react react react-dom @ark-ui/react framer-motion lucide-react
Import the CSS once at your app entry point, then use components immediately:
// main.tsx or App.tsx (import CSS once)
import "liquidify-react/styles";
import { Button, Card, Switch } from "liquidify-react";
function App() {
return (
<Card css={{ padding: "24px", maxWidth: "400px" }}>
<h1>Welcome to LiqUIdify</h1>
<p>100% Apple HIG compliant components, zero configuration.</p>
<Button variant="filled" tone="accent">
Get Started
</Button>
</Card>
);
}
export default App;
💡 CSS Import Required: The
"liquidify-react/styles"import loads design tokens, resets, and base styles. Import it once at your app root.
Use subpath imports for granular control:
import { Button } from "liquidify-react/button";
import { Card } from "liquidify-react/card";
// Only Button and Card code is bundled
Add runtime theme and accent color control with ThemeProvider:
import "liquidify-react/styles";
import { ThemeProvider, useTheme, Button } from "liquidify-react";
function ThemeToggle() {
const { theme, setTheme, accent, setAccent } = useTheme();
return (
<div>
<Button onClick={() => setTheme(theme === "dark" ? "light" : "dark")}>
Toggle {theme === "dark" ? "Light" : "Dark"} Mode
</Button>
<Button onClick={() => setAccent("#34C759")}>
Switch to Mint Accent
</Button>
</div>
);
}
export default function App() {
return (
<ThemeProvider defaultTheme="light" defaultAccent="#007AFF">
<ThemeToggle />
</ThemeProvider>
);
}
Accent color formats:
#007AFF, #34C759rgb(0, 122, 255)hsl(211, 100%, 50%)oklch(62% 0.2 236) (recommended for perceptual uniformity)var(--brand-accent)LiqUIdify includes 47+ Ark UI headless components for complex interactions. Import them via nested paths:
// ESM imports
import * as Dialog from "liquidify-react/ark-ui/dialog";
import * as Tooltip from "liquidify-react/ark-ui/tooltip";
import * as Select from "liquidify-react/ark-ui/select";
import * as DatePicker from "liquidify-react/ark-ui/datePicker";
// CJS requires (also supported)
const Accordion = require("liquidify-react/ark-ui/accordion");
const Carousel = require("liquidify-react/ark-ui/carousel");
Available Ark UI components (all with TypeScript types):
checkbox, switch, radioGroup, select, combobox, sliderdatePicker, colorPicker, fileUpload, pinInput, tagsInputtabs, menu, pagination, steps, carouseldialog, popover, tooltip, hoverCard, toastaccordion, collapsible, splitter, treeViewprogress, progressCircular, progressLinear, ratingGroupsignaturePad, qrCode, timer, tour, clipboardThe Button component supports Apple HIG-compliant variants and tones:
import { Button } from "liquidify-react";
// Variants (visual weight)
<Button variant="filled">Primary Action</Button> // Solid background
<Button variant="tinted">Secondary Action</Button> // Subtle background
<Button variant="plain">Tertiary Action</Button> // Transparent
// Tones (semantic meaning)
<Button tone="accent">Save</Button> // Blue (default)
<Button tone="neutral">Cancel</Button> // Gray
<Button tone="destructive">Delete</Button> // Red
// Combining variant + tone
<Button variant="filled" tone="destructive">Delete Forever</Button>
<Button variant="tinted" tone="accent">Enable Feature</Button>
<Button variant="plain" tone="neutral">Learn More</Button>
// Sizes (all meet 44px minimum touch target)
<Button size="compact">Compact</Button> // 44px height
<Button size="regular">Regular</Button> // 44px height (default)
<Button size="large">Large</Button> // 52px height
// States
<Button disabled>Disabled</Button>
<Button loading>Processing...</Button>
// Icons
<Button icon={<CheckIcon />} iconPosition="start">
Confirm
</Button>
<Button icon={<TrashIcon />} aria-label="Delete" /> {/* Icon-only */}
// Polymorphic (renders as different elements)
<Button as="a" href="/docs">Documentation</Button>
<Button as={Link} to="/home">Home</Button>
Legacy variant mapping (for backward compatibility):
primary → filled + accentsecondary → tinted + neutralghost → plain + neutraldanger → filled + destructiveLiqUIdify's design system is calibrated to Apple's exact iOS 17 and macOS 14 specifications:
// Animation durations (Apple HIG standard)
durations: {
instant: "0.15s", // Tooltips, switches, immediate feedback
quick: "0.3s", // Standard transitions, buttons, tabs
flow: "0.5s", // Sheets, modals, page transitions
bounce: "0.6s" // Playful spring physics elements
}
// Spring animation physics (Apple standard)
spring: {
mass: 1,
stiffness: 180,
damping: 20
}
// Elevation system (iOS 17 shadows)
elevation: {
0: "none", // Flat surfaces
1: "0 1px 2px rgba(0,0,0,0.06), ...", // Base elevation
4: "0 4px 12px rgba(0,0,0,0.08), ...", // Raised elements
8: "0 8px 24px rgba(0,0,0,0.12), ...", // Floating panels
16: "0 16px 32px rgba(0,0,0,0.16), ...", // Modals
24: "0 24px 48px rgba(0,0,0,0.20), ..." // Priority overlays
}
// Border radii (iOS 17 roles)
radii: {
button: "9999px", // Full capsule
buttonCompact: "10px",
control: "10px", // Switches, checkboxes
field: "12px", // Input fields
card: "16px", // Cards and surfaces
sheet: "16px", // Modals and sheets
pill: "9999px" // Badges and tags
}
// Touch targets (Apple HIG requirement)
minTouchTarget: "44px" // All interactive elements
All animations respect user preferences and follow Apple's motion guidelines:
// Reduced motion compliance
@media (prefers-reduced-motion: reduce) {
* {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
}
}
// Standard button interaction
button: {
transition: "all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1.0)",
_hover: { transform: "scale(1.02)" }, // Subtle growth
_active: { transform: "scale(0.97)" } // Press feedback
}
// Modal entrance
modal: {
animation: "slideUp 0.5s cubic-bezier(0.25, 0.1, 0.25, 1.0)"
}
Button • IconButton • Checkbox • RadioGroup • Switch • Slider • AngleSlider • NumberInput • PasswordInput • PinInput • TagsInput • Select • Combobox • DatePicker • FileUpload
Tabs • Accordion • Collapsible • Menu • Pagination • Steps • Splitter
Toast • Dialog • Modal • Popover • Tooltip • HoverCard • Progress (Linear/Circular) • Avatar • Badge • Card • ScrollArea • FloatingPanel • SymbolTile
TreeView • ColorPicker • SignaturePad • Carousel • RatingGroup • SegmentGroup • Toggle • ToggleGroup • QRCode • Timer • Tour • Editable • Clipboard
→ View all components with live examples
Override design tokens globally:
:root {
/* Accent color */
--ui-accent: #34C759; /* Mint green */
/* Border radii */
--radii-card: 20px;
/* Animation durations */
--durations-quick: 0.2s;
/* Elevation */
--shadows-elevation-4: 0 4px 16px rgba(0,0,0,0.1);
}
Extend styles with Panda CSS recipes:
import { css } from "liquidify-react/css";
import { Button } from "liquidify-react";
const customButton = css({
background: "linear-gradient(135deg, #667eea 0%, #764ba2 100%)",
_hover: { boxShadow: "0 8px 24px rgba(102,126,234,0.4)" }
});
<Button className={customButton}>Custom Styled</Button>
Customize specific parts of components:
<Select.Root>
<Select.Trigger css={{ borderRadius: "20px", padding: "12px 20px" }}>
<Select.Value />
</Select.Trigger>
<Select.Content css={{ background: "rgba(255,255,255,0.95)" }}>
{/* options */}
</Select.Content>
</Select.Root>
// Full import: ~28KB (all 48 components)
import { Button, Card, Switch } from "liquidify-react";
// Subpath import: ~6KB (only what you use)
import { Button } from "liquidify-react/button";
import { Card } from "liquidify-react/card";
import { Switch } from "liquidify-react/switch";
// main.tsx
import "liquidify-react/styles";
import { createRoot } from "react-dom/client";
import App from "./App";
createRoot(document.getElementById("root")!).render(<App />);
// app/layout.tsx
import "liquidify-react/styles";
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>{children}</body>
</html>
);
}
// app/root.tsx
import liquidifyStyles from "liquidify-react/styles?url";
export const links = () => [
{ rel: "stylesheet", href: liquidifyStyles }
];
SSR/RSC Safety: LiqUIdify has no window access at import time. All components render safely on the server.
# Clone repository
git clone https://github.com/tuliopc23/LiqUIdify.git
cd LiqUIdify
# Install dependencies
bun install
# Build library
bun run build:lib
# Run type checking
bun run type-check
# Run tests
bun test --run
# Run linting
bun run lint
bun run dev - Start development serverbun run build:lib - Build library to libs/components/distbun run type-check - TypeScript compilation checkbun run lint - Biome linting and formattingbun run test - Run Vitest test suitebun run prepublishOnly - Pre-publish validation (type-check + build)Contributions are welcome! Please read our Contributing Guide before submitting PRs.
MIT © Tulio Pinheiro Cunha
LiqUIdify is open source and free to use. If you're using it in production, consider sponsoring development to support continued maintenance and new features.
Built with ♥︎ for the Apple ecosystem
FAQs
Production-ready React component library with 100% Apple Human Interface Guidelines compliance. iOS 17/macOS 14 calibrated design tokens with 48 accessible components (WCAG 2.1 AA certified). Features Apple-standard spring animations, 6-level elevation sy
The npm package liquidify-react receives a total of 8 weekly downloads. As such, liquidify-react popularity was classified as not popular.
We found that liquidify-react demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Company News
Socket won two 2026 Reppy Awards from RepVue, ranking in the top 5% of all sales orgs. AE Alexandra Lister shares what it's like to grow a sales career here.
Security News
NIST will stop enriching most CVEs under a new risk-based model, narrowing the NVD's scope as vulnerability submissions continue to surge.
Company News
/Security News
Socket is an initial recipient of OpenAI's Cybersecurity Grant Program, which commits $10M in API credits to defenders securing open source software.