March 2024 - Breadcrumb and Input OTP

New Breadcrumb and Input OTP components.

We've added a new Breadcrumb component and an Input OTP component.

An accessible and flexible breadcrumb component. It has support for collapsed items, custom separators, bring-your-own routing <Link /> and composable with other DWL Components components.

import Link from "next/link"

import {

See more examples

Input OTP

A fully featured input OTP component. It has support for numeric and alphanumeric codes, custom length, copy-paste and accessible. Input OTP is built on top of input-otp by @guilherme_rodz.

[data-input-otp] { --nojs-bg: white !important; --nojs-fg: black !important; background-color: var(--nojs-bg) !important; color: var(--nojs-fg) !important; caret-color: var(--nojs-fg) !important; letter-spacing: .25em !important; text-align: center !important; border: 1px solid var(--nojs-fg) !important; border-radius: 4px !important; width: 100% !important; } @media (prefers-color-scheme: dark) { [data-input-otp] { --nojs-bg: black !important; --nojs-fg: white !important; } }

import {
  InputOTP,
  InputOTPGroup,

Read the docs

If you have a DWL Components account, the new components are available for generation.

On This Page

Breadcrumb Input OTP

Build with DWL Components

Use the copied registry, charts, blocks, and create tools in one place.

Start from the DWL Components create flow and customize from there.

March 2024 - Breadcrumb and Input OTP

Breadcrumb#

Input OTP#

Breadcrumb

Input OTP