Dev Design Library

D2Studio UI components

D2 Studio Shadcn Blocks Registry

Components
112
Framework
React
Stack
React, TypeScript, Tailwind
License
MIT
GitHub stars
4
Source
https://github.com/rajaaltus/d2studio-ui
Website
https://ui.d2studio.dev
Install
npx shadcn@latest add https://d2studio.dev/r/{name}.json

All D2Studio UI components

  • Accordion: A vertically stacked set of interactive headings that each reveal a section of content.
  • AI Block: AI prompt template grid with creative prompts, summarizer, story, poetry and study presets.
  • AI Content Creator Card: Pro version content creation card
  • AI Content Creator Card v2: Glassmorphic AI content generator card with content type and tone pickers and a prompt field.
  • Siri Prompt Input: Tabbed AI prompt input with assistant, blog and pro modes plus file upload.
  • AI Writing Assistant: AI writing assistant panel with assistant, blog and pro modes and a prompt field.
  • Alert: Displays a callout for user attention.
  • Alert Dialog: A modal dialog that interrupts the user with important content and expects a response.
  • Aspect Ratio: Displays content within a desired ratio.
  • Attachment: A file attachment chip with a preview, name, size and a remove action.
  • Avatar: An image element with a fallback for representing the user.
  • Badge: Displays a badge or a component that looks like a badge.
  • Bento 01: Bento grid for an education program platform with admin overview, faculty view and a program form.
  • Bento 02: A five-card feature bento with metallic-gradient glyphs on lifting icon tiles, a dot-matrix texture and color-dodged glow revealed on…
  • Bento 03: 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…
  • Bento 04: A four-card services bento on marching dashed blueprint frames. Hover blooms each card's icon from blue to the D2 holographic gradient…
  • Bento 05: 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…
  • Block 01: AI feature showcase with smart summarizer, creative prompts, document analysis and engagement metrics cards.
  • Brand Showcase: A logo wall that rotates instead of scrolling. A marquee asks the eye to track a moving target; this holds a page of six still long enough…
  • Breadcrumb: Displays the path to the current resource using a hierarchy of links.
  • Bubble: A chat message bubble that aligns and colours itself by sender.
  • Button: Displays a button or a component that looks like a button.
  • Beam Button: A glass pill with a beam travelling along its lower edge. The chip under it is deliberately quiet, one tinted plate and a hairline border…
  • Button Group: A container that groups related buttons together with consistent styling.
  • Matte Button: A matte chip button with a holographic rim: three blurred glows pinned under the top edge, a bounce light along the bottom, and a…
  • Calendar: A date field component that allows users to enter and edit a date.
  • Card: Displays a card with header, content, and footer.
  • Product Card: 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…
  • Carousel: A carousel with motion and swipe built using Embla.
  • Chart: Beautiful charts built using Recharts, themed from CSS variables.
  • Checkbox: A control that allows the user to toggle between checked and not checked.
  • Collapsible: An interactive component which expands and collapses a panel.
  • Combobox: Autocomplete input and command palette with a list of suggestions.
  • Command: Fast, composable, unstyled command menu for React.
  • Context Menu: Displays a menu to the user, such as a set of actions or functions, triggered by a right click.
  • Panel CTA: One inverted panel, centred copy and two actions, the plain one. Two blurred lobes bleed in from opposite corners and are clipped by the…
  • D2 Card: The card surface pricing-01 is built on: header, content, footer and a title/description pair.
  • Dashboard 01: Hotel booking dashboard with guest and vacancy stats, booking search and a check-in and check-out table.
  • Diagram Grid: A bento scaffold rather than a finished bento: nine slots in the scattered arrangement an integration diagram wants, with one emphasised…
  • Dialog: A window overlaid on either the primary window or another dialog window, rendering the content underneath inert.
  • Direction: A provider that sets the reading direction, left-to-right or right-to-left, for the components beneath it.
  • File Upload: A single upload row mid-flight: a PDF badge, the filename, a thin progress rail and the byte count under it. The bar is a plain width…
  • Drawer: A drawer component that slides in from the bottom or sides of the screen.
  • Dropdown Menu: Displays a menu to the user, such as a set of actions or functions, triggered by a button.
  • Empty: Use the Empty component to display an empty state.
  • Field: Combine labels, controls, and help text to compose accessible form fields and grouped inputs.
  • Agent Workflow: A three-step agent workflow, caught mid-run: one step done, one spinning, one still pending. Each row dims as a whole rather than muting…
  • Form: Building forms with React Hook Form and Zod.
  • Top GitHub Repos: A responsive grid of GitHub repositories with language, stars and forks — pass your own list or leave the sample rows in.
  • Hero 01: Startup mentorship landing hero with a headline, call to action and mentor avatar group.
  • Container Hero: A one-screen hero on a plain background: a 20ft shipping container built as a real box in CSS 3D, three quarters on, hangs from a crane…
  • Hero Section 01: Premium landing page hero with a serif accent headline, badge and mentor avatar group.
  • Hero Section 02: Modern landing page hero section with badge, headline and avatar social proof.
  • Hover Card: For sighted users to preview content available behind a link.
  • ID Card: An event badge on a D2 strap: a portrait, name, role and a short about, with contact links at the foot. The strap is a rope under gravity…
  • Input: Displays a form input field or a component that looks like an input field.
  • Input Group: Add addons, buttons and helper content to inputs.
  • Input OTP: Accessible one-time password component with copy paste functionality.
  • Item: A versatile component to display any content: media, title, description and actions.
  • Kbd: Used to display textual user input from a keyboard.
  • Label: Renders an accessible label associated with controls.
  • Cascade Wall: brand-showcase's rolling wall with the blur put back. The frame never moves and only the marks do: each cell is a window over a column…
  • Logo Marquee: A logo rail that never stops, and one the main thread never touches. The travel is a Web Animations API transform rather than a per-frame…
  • Logo Rack: The logo row with nothing moving in it: marks sitting still in ruled cells, which is the same shape a rack of machines comes in. A rail…
  • Marker: A small inline marker for flagging state, such as unread, new or pinned.
  • Menubar: A visually persistent menu common in desktop applications that provides quick access to a consistent set of commands.
  • Message: A chat message row: avatar, author, timestamp and content.
  • Message Scroller: A chat transcript scroller that sticks to the newest message and offers a jump-to-latest button.
  • Metallic Shimmer: Brushed-metal text: a bright band travels across the glyphs like a reflection, not a glow. Wraps any inline content, flips its stops per…
  • Moon Tile: 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…
  • Moon Window: 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…
  • Moon Card: 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…
  • Native Select: A styled native HTML select element with consistent design system integration.
  • Navigation Menu: A collection of links for navigating websites.
  • Notification Bento: A four-panel notification bento: a pure-CSS metallic bell on a lit dot-matrix field, recent activity feed, unread counter and…
  • Pagination: Pagination with page navigation, next and previous links.
  • Pixel Spinner: The pixel-grid spinner engine every spinner preset builds on.
  • Popover: Displays rich content in a portal, triggered by a button.
  • Power Chip: 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.
  • Pricing Cards: Responsive three-tier pricing cards with feature comparison and popular plan highlighting
  • Progress: Displays an indicator showing the completion progress of a task.
  • Progress Bar: A frosted-glass progress pill with technical-drawing leader lines bracketing a monospace readout. Three levels of chrome — full, bar…
  • Radio Group: A set of checkable buttons, known as radio buttons, where no more than one can be checked at a time.
  • RAW Chip: The RAW chip from Power Chip on its own: a static SVG illustration with no dependencies.
  • Resizable: Accessible resizable panel groups and layouts with keyboard support.
  • Scroll Area: Augments native scroll functionality for custom, cross-browser styling.
  • Select: Displays a list of options for the user to pick from, triggered by a button.
  • Separator: Visually or semantically separates content.
  • Sheet: Extends the Dialog component to display content that complements the main content of the screen.
  • Sidebar: A composable, themeable and customizable sidebar component.
  • Skeleton: Use to show a placeholder while content is loading.
  • Slider: An input where the user selects a value from within a given range.
  • Sonner: An opinionated toast component for React.
  • Spinner: An indicator that can be used to show a loading state.
  • Spinner Billboard Tiles: A 4×4 pixel-grid loading spinner: 5 frames at 180ms (900ms loop).
  • Spinner Col Wave 5: A 5×5 pixel-grid loading spinner: 8 frames at 120ms (960ms loop).
  • Spinner Dual Ring 5: A 5×5 pixel-grid loading spinner: 16 frames at 110ms (1760ms loop).
  • Spinner Rain 4: A 4×4 pixel-grid loading spinner: 4 frames at 180ms (720ms loop).
  • Spinner Ring 4 Cw: A 4×4 pixel-grid loading spinner: 12 frames at 110ms (1320ms loop).
  • Spinner Ripple Out: A 3×3 pixel-grid loading spinner: 3 frames at 260ms (780ms loop).
  • Spinner Spiral In 5: A 5×5 pixel-grid loading spinner: 25 frames at 75ms (1875ms loop).
  • Spinner Swell Roll: A 4×4 pixel-grid loading spinner: 4 frames at 160ms (640ms loop).
  • Spinner Tide Roll: A 4×4 pixel-grid loading spinner: 6 frames at 180ms (1080ms loop).
  • Spinner Vortex In: A 4×4 pixel-grid loading spinner: 16 frames at 90ms (1440ms loop).
  • Switch: A control that allows the user to toggle between checked and not checked.
  • Table: A responsive table component.
  • Tabs: A set of layered sections of content, known as tab panels, that are displayed one at a time.
  • Textarea: Displays a form textarea or a component that looks like a textarea.
  • Toggle: A two-state button that can be either on or off.
  • Toggle Group: A set of two-state buttons that can be toggled on or off.
  • Tooltip: A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.
  • Usage Split: Token usage split three ways across one shared track. The segments sit in a single rail rather than three of their own, because the point…

Browse by category