Web playground

Less imagining. More trying.

Click it. Customize it. Make it yours. Explore real Lumen components in your browser, then bring what works into your next project.

Interactive demo

One experience. Three ways to build it.

Pick your framework and take the controls. Advance a release, explore the tabs, and feel how the same Lumen components work in your stack.

Astro

Your next release, coming together.

Keyboard navigation and focus use progressively enhanced HTML.

Try Advance, then use the arrow keys to explore the tabs.

Keep exploring

Choose a starting point. Every example is built with the public Lumen library.

Find your next building block. Try real interactions, then take the example into your project.

Make Lumen feel like your brand. Explore colors, compare appearances, and export your tokens.

Start with the bigger picture. Explore complete layouts and see how the pieces work together.