@duido/ui

React components in the Liquid Glass style of iOS 26, iPadOS 26 and macOS Tahoe: translucent glass, capsules, large rounded corners, springy animations. Responsive, light and dark, English and Italian, accessible.

Built for Next.js (App Router); works with any React ≥ 18 project.

⚠️ Beta — early development. @duido/ui is in the 0.x phase: APIs, props and styles may change in any minor version, without a deprecation period. Pin the exact version ("@duido/ui": "0.5.1") if you need stability, and check the changelog before upgrading.

Components

| Group | Components | |---|---| | Navigation | Navbar, Sidebar, TabBar | | Actions | Button, ButtonGroup, SegmentedControl | | Data | DataGrid, Pagination | | Containers | Card | | Overlays | Dialog (modal, bottom sheet, side panel), confirm() with ConfirmHost, Menu | | Forms | TextField, TextArea, Select, DatePicker, DateRangePicker, CodeInput, FileDrop, Checkbox, Switch | | Feedback | Toaster and toast, Banner, Badge, Spinner, EmptyState, Skeleton, Meter | | Pages | NotFound (404) |

Every field has a placeholder and a label that floats into the border on focus.

Installation

npm i @duido/ui lucide-react

react, react-dom and lucide-react are peer dependencies: your project's versions are used.

Usage

Import the CSS once, for example in app/layout.tsx:

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

Then use the components:

import { Button, TextField, toast } from "@duido/ui";

export function Example() {
  return (
    <>
      <TextField label="Email" placeholder="[email protected]" type="email" />
      <Button onClick={() => toast.success("Saved")}>Save</Button>
    </>
  );
}

Configuration (optional)

Without configuration everything works with the defaults (light, English, <a> links). DuidoProvider sets the language, theme, Next.js link component and current path once:

"use client";
import Link from "next/link";
import { usePathname } from "next/navigation";
import { ConfirmHost, DuidoProvider, Toaster, darkTheme } from "@duido/ui";

export function Providers({ children, dark }: { children: React.ReactNode; dark: boolean }) {
  return (
    <DuidoProvider
      locale="en"
      theme={dark ? darkTheme : undefined}
      linkComponent={Link}
      currentPath={usePathname()}
    >
      {children}
      <Toaster />
      <ConfirmHost />
    </DuidoProvider>
  );
}

Component props override the provider; the provider overrides the defaults.

Theme

Every color is a background + text pair (primary / primaryText, surface / surfaceText…). Change it with the provider's theme prop or with CSS variables:

:root {
  --duido-primary: #e11d48;
  --duido-primary-text: #ffffff;
}

Borders, glass, shadows and secondary text are derived from the pairs, in light and dark mode. For dark mode use darkTheme (or colorScheme: "dark"); when setting a dark theme with plain CSS variables, also set --duido-dark: 1.

Solid material

<DuidoProvider material="solid"> turns every glass surface into a solid, opaque one, for the highest readability (screens in bad light, cheap displays). Without React: data-duido-material="solid" on any ancestor, e.g. <html>. It also happens automatically when the system asks for reduced transparency.

Languages

locale: "en" (default) or "it". Every built-in text, including aria-labels, can be overridden with the labels prop, on a component or on the provider.

Documentation

The full documentation is online at https://duido-ui.vercel.app (Storybook): every component has a Docs page with copy-paste code, the props table and all variants, viewable in light/dark, English/Italian, desktop and mobile.

For AI agents

A machine-readable description of every component (description, props with types and defaults, usage examples) is published with the documentation:

• JSON: https://duido-ui.vercel.app/manifests/components.json
• Readable page: https://duido-ui.vercel.app/manifests/components.html

When generating code with @duido/ui, read the manifest instead of guessing props. Import the CSS once (import "@duido/ui/styles.css"), wrap the app in DuidoProvider for language, theme and links, and import components from "@duido/ui".

Development

| Command | What it does | |---|---| | npm run storybook | Storybook on http://localhost:6006 | | npm test | Unit tests, story interaction tests and accessibility checks | | npm run typecheck | Type checking | | npm run build | Builds the library into dist/ | | npm run changeset | Records a change for the next release | | npm run release | Builds and publishes new versions |

License

MIT