Glassmorphism UI kit for React.

One material across your interface

Use air, frost, prism or smoke surfaces in light or dark themes. TenvellProvider keeps the settings in one scope, including its portalled dialogs and menus. Several providers can coexist on the same page.

Lamina UI and Lamina Mono are included locally. The component CSS is ordinary CSS with native scope boundaries; you can use it alongside the rest of your application without adopting a utility-class design system.

Start with a real control

The button below is the same source-first example offered by the registry. It includes a provider, local styles, click feedback and an independent light/dark setting. The API reference lists the exact props and exports of the current package.

Choose the surface for the content

Start with a restrained surface and check text and control contrast against the actual backdrop of your screen. Keep the application background and layout outside the provider. Tenvell supplies the UI material; the application supplies its content and behavior.

Start in your project

npm install https://tenvell.space/releases/0.2.1/tenvell-0.2.1.tgz

import { TenvellProvider, Card, Button } from 'tenvell';
import 'tenvell/styles.css';

export default function GlassCard() {
  return (
    <TenvellProvider theme="light" surface="frost">
      <Card><p>Your interface, one material.</p><Button>Continue</Button></Card>
    </TenvellProvider>
  );
}