@d2

AI prompt template grid with creative prompts, summarizer, story, poetry and study presets.

Glassmorphic AI content generator card with content type and tone pickers and a prompt field.

Pro version content creation card

Hotel booking dashboard with guest and vacancy stats, booking search and a check-in and check-out table.

Bento grid for an education program platform with admin overview, faculty view and a program form.

Tabbed AI prompt input with assistant, blog and pro modes plus file upload.

A responsive grid of GitHub repositories with language, stars and forks — pass your own list or leave the sample rows in.

Startup mentorship landing hero with a headline, call to action and mentor avatar group.

E-commerce product card on the D2 card primitive: colour swatches that cross-fade the photo, a wishlist heart that swaps with a blur, a derived sale badge and …

Responsive three-tier pricing cards with feature comparison and popular plan highlighting

Premium landing page hero with a serif accent headline, badge and mentor avatar group.

Modern landing page hero section with badge, headline and avatar social proof.

AI writing assistant panel with assistant, blog and pro modes and a prompt field.

AI feature showcase with smart summarizer, creative prompts, document analysis and engagement metrics cards.

A four-panel notification bento: a pure-CSS metallic bell on a lit dot-matrix field, recent activity feed, unread counter and delivery-channel toggles, with dr…

A five-card feature bento with metallic-gradient glyphs on lifting icon tiles, a dot-matrix texture and color-dodged glow revealed on hover, and a holographic …

A flat 3×2 feature grid on thin edge-masked rules — no cards, no fills. Each cell pairs a recessed keycap icon tile with a sans-serif title and monospace descr…

A four-card services bento on marching dashed blueprint frames. Hover blooms each card's icon from blue to the D2 holographic gradient, scrambles the Clean Cod…

A four-card studio bento on a masked dot field. Each card is a Figma gradient export carrying its own glass fill and 16px border; an ambilight sampled from the…

Brushed-metal text: a bright band travels across the glyphs like a reflection, not a glow. Wraps any inline content, flips its stops per theme, and holds still…

A frosted-glass progress pill with technical-drawing leader lines bracketing a monospace readout. Three levels of chrome — full, bar, plain — and two fill styl…

A matte chip button with a holographic rim: three blurred glows pinned under the top edge, a bounce light along the bottom, and a gradient-clipped label and ma…

A vertically stacked set of interactive headings that each reveal a section of content.

Displays a callout for user attention.

A modal dialog that interrupts the user with important content and expects a response.

Displays content within a desired ratio.

A file attachment chip with a preview, name, size and a remove action.

An image element with a fallback for representing the user.

Displays a badge or a component that looks like a badge.

Displays the path to the current resource using a hierarchy of links.

A chat message bubble that aligns and colours itself by sender.

Displays a button or a component that looks like a button.

A container that groups related buttons together with consistent styling.

A date field component that allows users to enter and edit a date.

Displays a card with header, content, and footer.

A carousel with motion and swipe built using Embla.

Beautiful charts built using Recharts, themed from CSS variables.

A control that allows the user to toggle between checked and not checked.

An interactive component which expands and collapses a panel.

Autocomplete input and command palette with a list of suggestions.

Fast, composable, unstyled command menu for React.

Displays a menu to the user, such as a set of actions or functions, triggered by a right click.

A window overlaid on either the primary window or another dialog window, rendering the content underneath inert.

A provider that sets the reading direction, left-to-right or right-to-left, for the components beneath it.

A drawer component that slides in from the bottom or sides of the screen.

Displays a menu to the user, such as a set of actions or functions, triggered by a button.

Use the Empty component to display an empty state.

Combine labels, controls, and help text to compose accessible form fields and grouped inputs.

Building forms with React Hook Form and Zod.

For sighted users to preview content available behind a link.

Displays a form input field or a component that looks like an input field.

Add addons, buttons and helper content to inputs.

Accessible one-time password component with copy paste functionality.

A versatile component to display any content: media, title, description and actions.

Used to display textual user input from a keyboard.

Renders an accessible label associated with controls.

A small inline marker for flagging state, such as unread, new or pinned.

A visually persistent menu common in desktop applications that provides quick access to a consistent set of commands.

A chat message row: avatar, author, timestamp and content.

A chat transcript scroller that sticks to the newest message and offers a jump-to-latest button.

A styled native HTML select element with consistent design system integration.

A collection of links for navigating websites.

Pagination with page navigation, next and previous links.

Displays rich content in a portal, triggered by a button.

Displays an indicator showing the completion progress of a task.

A set of checkable buttons, known as radio buttons, where no more than one can be checked at a time.

Accessible resizable panel groups and layouts with keyboard support.

Augments native scroll functionality for custom, cross-browser styling.

Displays a list of options for the user to pick from, triggered by a button.

Visually or semantically separates content.

Extends the Dialog component to display content that complements the main content of the screen.

A composable, themeable and customizable sidebar component.

Use to show a placeholder while content is loading.

An input where the user selects a value from within a given range.

An opinionated toast component for React.

An indicator that can be used to show a loading state.

A control that allows the user to toggle between checked and not checked.

A responsive table component.

A set of layered sections of content, known as tab panels, that are displayed one at a time.

Displays a form textarea or a component that looks like a textarea.

A two-state button that can be either on or off.

A set of two-state buttons that can be toggled on or off.

A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.

A hook that reports whether the viewport is below the mobile breakpoint.

The card surface pricing-01 is built on: header, content, footer and a title/description pair.

The pixel-grid spinner engine every spinner preset builds on.

An animated SVG illustration: a RAW chip charges and sends power along six wires to the tiles around it. Plain SVG and CSS, light and dark.

The RAW chip from Power Chip on its own: a static SVG illustration with no dependencies.

A night tile: a crescent moon rises over a bank of clouds, then the clouds sway in parallax while a sparkle twinkles and two stars blink. Plays twice once it s…

A night window: a pale moon rises from behind dark hills in a round pane of stars, then the hills roll like a swell, the stars twinkle in three sets and the ha…

A tipped night card on dashed layout guides: a crescent moon rises from behind a bank of clouds, then a small cloud drifts across it while the banks sway in pa…

A 5×5 pixel-grid loading spinner: 25 frames at 75ms (1875ms loop).

A 4×4 pixel-grid loading spinner: 12 frames at 110ms (1320ms loop).

A 5×5 pixel-grid loading spinner: 16 frames at 110ms (1760ms loop).

A 4×4 pixel-grid loading spinner: 16 frames at 90ms (1440ms loop).

A 5×5 pixel-grid loading spinner: 8 frames at 120ms (960ms loop).

A 4×4 pixel-grid loading spinner: 4 frames at 160ms (640ms loop).

A 4×4 pixel-grid loading spinner: 4 frames at 180ms (720ms loop).

A 4×4 pixel-grid loading spinner: 6 frames at 180ms (1080ms loop).

A 4×4 pixel-grid loading spinner: 5 frames at 180ms (900ms loop).

A 3×3 pixel-grid loading spinner: 3 frames at 260ms (780ms loop).