Layer

Get Started

v2.4 — Now with dynamic color

Ship beautiful products,
faster.

Layer is a production-ready component library built on Material Design 3. Systematic elevation, dynamic color, and accessible interactions — so you can focus on what matters: your product.

Start Building View Components

48+ Components

WCAG AA Accessible

MIT Open Source

Layer Dashboard

Revenue

$48.2k

+12.5%

Users

2,847

+8.2%

Conv.

3.6%

-0.4%

Why Layer

Built for teams that ship.

Every component follows the same elevation, color, and motion system. No guesswork. No inconsistencies.

layers

Systematic Elevation

10 elevation levels from dp 0 to dp 24. Every shadow communicates hierarchy. Cards lift on hover, dialogs float above, and the FAB casts the deepest shadow.

dp 0–24 CSS Variables Customizable

palette

Dynamic Color

Full MD3 color system with primary, secondary, tertiary, and surface tones. Dark mode included. One toggle switches the entire palette seamlessly.

accessibility_new

Accessible by Default

WCAG AA contrast, keyboard navigation, focus indicators, reduced motion support. Every component works for every user.

speed

Motion Language

Consistent easing curves and durations. Standard, emphasized, decelerate, accelerate — every transition feels intentional and physical.

Foundation

Elevation system

Elements live at different Z-heights. Higher elevation = more shadow = more importance.

dp 0 Flat surface

0dp

dp 1 Resting cards

1dp

dp 2 Cards on hover

2dp

dp 3 FAB resting

3dp

dp 4 Menus, dialogs

4dp

dp 6 FAB pressed

6dp

dp 8 Navigation drawer

8dp

dp 12 FAB moving

12dp

dp 16 Modal bottom sheet

16dp

dp 24 Dialog, snackbar

24dp

Library

Every component, one system.

Cards, buttons, chips, switches, sliders, text fields — all following the same elevation, color, and motion tokens.

image

Elevated Card

dp 1 resting → dp 2 on hover

Cards are the fundamental building block. They rest at 1dp elevation and lift to 2dp on hover, with shadow transitioning via the standard easing curve.

Outlined Card

Border instead of shadow

For secondary content that shouldn't compete with elevated cards.

Buttons

Chips

Assist Filter Input Chip Suggestion

Switches & Toggles

Notifications Dark Mode

Checkbox A Checkbox B

Slider

Text Fields

Filled TextField Helper text

Outlined TextField

Product Proof

See it in action.

A complete Material Design dashboard with navigation rail, elevation hierarchy, and real-time data.

Good morning, Sarah

Here's what's happening with your projects today.

payments +12.5%

Revenue

group +8.2%

Active Users

trending_up -0.4%

Conversion

Revenue Overview

Weekly performance across all projects

MonTueWedThuFriSatSun

Recent Activity

New deployment — v2.4.1 shipped to production 2 minutes ago

Server alert — CPU usage at 87% on us-east-1 15 minutes ago

New signup — Acme Corp upgraded to Pro 1 hour ago

PR merged — feat: add dark mode tokens (#847) 3 hours ago

Active Projects

Layer Documentation

Updated 2h ago

85%

Color System v3

Updated 5h ago

62%

React Starter Kit

Updated 1d ago

38%

Trusted by Teams

Developers love Layer.

Shipping faster with a design system that actually works.

"Layer cut our component development time by 60%. The elevation system alone saved us weeks of visual QA."

Sarah Chen Lead Engineer, Acme Corp

"Finally, a Material library that respects accessibility out of the box. Our WCAG audit passed on the first try."

Marcus Rivera UX Director, Flowstate

"The dynamic color system is incredible. We themed our entire product in an afternoon. Clients thought we hired a design agency."

Priya Sharma CTO, Novabuild

Pricing

Start free, scale when ready.

No credit card required. Upgrade when your team needs more.

Starter

forever free

24 core components
Light & dark themes
Community support
MIT license

Professional

$29

per developer / month

All 48+ components
Dynamic color theming
Figma design tokens
Priority support
Early access to new components

Enterprise

$99

per developer / month

Everything in Professional
Custom elevation tokens
Dedicated support engineer
SLA guarantee
On-premise deployment

FAQ

Common questions.

Everything you need to know about getting started with Layer.

Is Layer free to use?

Yes. Layer's Starter plan includes 24 core components under the MIT license. You can use them in personal and commercial projects with no restrictions. Upgrade to Professional for the full 48+ component library, dynamic color theming, and Figma design tokens.

Does Layer work with React, Vue, or vanilla JS?

Layer ships as pure CSS design tokens and HTML component patterns. It works with any framework — React, Vue, Svelte, Angular, or vanilla JavaScript. We also provide framework-specific starter kits for React and Vue.

How does the elevation system work?

Layer implements Material Design 3's elevation system with 10 levels (dp 0 through dp 24). Each level has a corresponding shadow that communicates visual hierarchy. Cards rest at dp 1, lift to dp 2 on hover, and dialogs float at dp 24. The system is fully customizable through CSS variables.

Is Layer accessible?

Yes. Every component meets WCAG AA contrast requirements, supports full keyboard navigation, includes visible focus indicators, and respects prefers-reduced-motion. Screen reader compatibility is built into every interactive element.

Can I customize the color theme?

Absolutely. Layer uses CSS custom properties for every color token. Override them to match your brand, or use the built-in dynamic color system to generate a full palette from a single seed color. Dark mode is included and toggles automatically.

Trusted by 2,400+ teams

Ready to ship
faster?

Start with the free tier. No credit card required.
Upgrade when your team needs more.

Get Started Free Talk to Sales

Free forever plan

5-minute setup

Cancel anytime

Contact

Get in touch.

Have questions about Layer? We'd love to hear from you.

Feedback

Snackbar notifications

Material Design's feedback mechanism at dp 6 elevation.

Ship beautiful products, faster.