Introduction
Design-engineered components. Depth, not glow.
Liten is a free, premium component library. Every component is a single copy-paste file, built on a real depth model: layered elevation, light from above, top-lit edges, and motion with a reason. Both light and dark are correct, and reduced motion renders the settled outcome, not a frozen effect.
Pick a component from the sidebar to see a live preview and copy its code.
Setup
Two things are shared across the library. Set them up once, then every component is a single-file copy-paste.
Liten uses Space Grotesk as its display font. Apply it once at your app root so every component inherits it.
import { Space_Grotesk } from 'next/font/google';
const display = Space_Grotesk({ subsets: ['latin'] });
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="en" className={display.className}>
<body>{children}</body>
</html>
);
}Add the shared depth utilities to your global.css. .bloom-edge draws the
top-lit gradient border used across the library; .depth-scroll is the
elevation-aware scrollbar.
.bloom-edge {
position: relative;
}
.bloom-edge::before {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
padding: 1px;
background: linear-gradient(
to bottom,
rgba(0, 0, 0, 0.14),
rgba(0, 0, 0, 0.04) 45%,
rgba(0, 0, 0, 0.02)
);
-webkit-mask:
linear-gradient(#fff 0 0) content-box,
linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
pointer-events: none;
}
.dark .bloom-edge::before {
background: linear-gradient(
to bottom,
rgba(255, 255, 255, 0.16),
rgba(255, 255, 255, 0.04) 45%,
rgba(255, 255, 255, 0.02)
);
}Every component also merges classes with a cn helper. Any implementation works;
Liten uses cnfast.
export { cn } from 'cnfast';