# UI TripleD

> Production-ready UI components, blocks, and full pages available in shadcn/ui and Base UI, powered by Framer Motion. Copy-paste components — not an installable npm package.

**Last Updated:** 2026-08-27T22:59:15.603Z

- Components come in **shadcn/ui**, **Base UI**, and **Carbon** variants (the suffix in the name indicates the style system, e.g. `-shadcnui`, `-baseui`, `-carbon`)
- **Copy-paste model** — browse the docs, preview a component, then copy its code directly into your project
- Built with **React 19**, **Next.js 16**, **TypeScript**, **Tailwind CSS 4**, and **Framer Motion**
- Also offers a **Landing Builder** (drag & drop shadcn/ui blocks into landing pages), **Background Builder** (shader & Aurora backgrounds), and **Grid Generator** (Tailwind CSS grids)

## Docs

- [Component Gallery](https://ui.tripled.work/components): Browse all components, blocks, and pages with live previews
- [GitHub Repository](https://github.com/moumen-soliman/uitripled): Source code, issues, and discussions
- [Contributing Guide](https://github.com/moumen-soliman/uitripled/blob/main/CONTRIBUTING.md): How to contribute to UI TripleD

## Table of Contents

- Components (165 items)
- Blocks (74 items)
- Pages (23 items)
- UI Elements (20 items)

## Components

- [Accessible Image Slider Card](https://ui.tripled.work/md/image-slider-card-shadcnui.md): Image carousel card with keyboard support, reduced motion handling, and screen reader-friendly labels
- [Animated Card Stack](https://ui.tripled.work/md/animated-card-stack-baseui.md): Stacked cards that expand on hover (Base UI)
- [Animated Card Stack](https://ui.tripled.work/md/animated-card-stack-shadcnui.md): Stacked cards that expand on hover
- [Cards Slider](https://ui.tripled.work/md/cards-slider-shadcnui.md): Liquid smooth draggable cards slider with shadcn/ui styling and framer-motion animations
- [Cinema Ticket](https://ui.tripled.work/md/cinema-ticket-baseui.md): Cinematic theater ticket with rip effect and barcode (Base UI)
- [Cinema Ticket](https://ui.tripled.work/md/cinema-ticket-shadcnui.md): Cinematic theater ticket with rip effect and barcode
- [Conference Ticket](https://ui.tripled.work/md/conference-ticket-baseui.md): Animated conference ticket with glassmorphism effects and holographic details (Base UI)
- [Conference Ticket](https://ui.tripled.work/md/conference-ticket-shadcnui.md): Animated conference ticket with glassmorphism effects and holographic details
- [Credit Card](https://ui.tripled.work/md/credit-card-baseui.md): 3D animated credit card with flip animation to show CVV (Base UI)
- [Credit Card](https://ui.tripled.work/md/credit-card-shadcnui.md): 3D animated credit card with flip animation to show CVV
- [Detail Task Card](https://ui.tripled.work/md/detail-task-card-baseui.md): Task management detail panel with animated assignee chips and editor controls (Base UI)
- [Detail Task Card](https://ui.tripled.work/md/detail-task-card-shadcnui.md): Task management detail panel with animated assignee chips and editor controls
- [Ecommerce Highlight Card](https://ui.tripled.work/md/ecommerce-highlight-card-baseui.md): Product spotlight card with blurred border, bundle selector, and fulfillment details (Base UI)
- [Ecommerce Highlight Card](https://ui.tripled.work/md/ecommerce-highlight-card-shadcnui.md): Product spotlight card with blurred border, bundle selector, and fulfillment details
- [Glass Blog Card](https://ui.tripled.work/md/glass-blog-card-baseui.md): Glassmorphism blog card with image zoom, author info, and read action (Base UI)
- [Glass Blog Card](https://ui.tripled.work/md/glass-blog-card-shadcnui.md): Glassmorphism blog card with image zoom, author info, and read action
- [Glass Checkout Card](https://ui.tripled.work/md/glass-checkout-card-baseui.md): Glassmorphism checkout card with payment method selector and input fields (Base UI)
- [Glass Checkout Card](https://ui.tripled.work/md/glass-checkout-card-shadcnui.md): Glassmorphism checkout card with payment method selector and input fields
- [Glass Order Summary](https://ui.tripled.work/md/glass-order-summary-baseui.md): Glassmorphism order summary card with item list and checkout button (Base UI)
- [Glass Order Summary](https://ui.tripled.work/md/glass-order-summary-shadcnui.md): Glassmorphism order summary card with item list and checkout button
- [Glass Wallet Card](https://ui.tripled.work/md/glass-wallet-card-baseui.md): Glassmorphism crypto wallet card with balance, trend, and action buttons (Base UI)
- [Glass Wallet Card](https://ui.tripled.work/md/glass-wallet-card-shadcnui.md): Glassmorphism crypto wallet card with balance, trend, and action buttons
- [Hover Expand Card](https://ui.tripled.work/md/hover-expand-card-baseui.md): Card that lifts and expands on hover (Base UI)
- [Hover Expand Card](https://ui.tripled.work/md/hover-expand-card-shadcnui.md): Card that lifts and expands on hover
- [Native User Card](https://ui.tripled.work/md/native-user-card-baseui.md): Compact user profile card with avatar, name, handle, and action button with spring animations (Base UI)
- [Native User Card](https://ui.tripled.work/md/native-user-card-shadcnui.md): Compact user profile card with avatar, name, handle, and action button with spring animations
- [Project Card](https://ui.tripled.work/md/project-card-baseui.md): Glassmorphism project card with links, tags, and hover effects (Base UI)
- [Project Card](https://ui.tripled.work/md/project-card-shadcnui.md): Glassmorphism project card with links, tags, and hover effects
- [Theater Ticket](https://ui.tripled.work/md/theater-ticket-baseui.md): Cinematic theater ticket with rip effect and barcode (Base UI)
- [Theater Ticket](https://ui.tripled.work/md/theater-ticket-shadcnui.md): Cinematic theater ticket with rip effect and barcode

### Components

#### Chat

- [AI Chat Interface](https://ui.tripled.work/md/ai-chat-interface-shadcnui.md): Chat input with attachments, model selector, and accessible controls
- [Chat App](https://ui.tripled.work/md/chat-app-shadcnui.md): Fully functional chat interface with animated messages
- [Floating Chat Widget](https://ui.tripled.work/md/floating-chat-widget-shadcnui.md): Floating chat widget with AI agent selection dropdown and animations
- [Messenger](https://ui.tripled.work/md/messenger-shadcnui.md): Glassmorphism messenger workspace with accessible motion and quick replies

- [AI Loading Skeleton](https://ui.tripled.work/md/ai-loading-skeleton-shadcnui.md): Loading state with diagonal shimmer gradient and opacity wave
- [AI Response Typing Stream](https://ui.tripled.work/md/ai-response-typing-shadcnui.md): Character-by-character typing animation with natural pauses and thinking states
- [Animated Accordion](https://ui.tripled.work/md/animated-accordion-shadcnui.md): Accordion with smooth expand/collapse and rotate arrow
- [Animated Navbar](https://ui.tripled.work/md/animated-navbar-shadcnui.md): Navigation bar with animated underline indicator
- [Animated Pagination](https://ui.tripled.work/md/animated-pagination-shadcnui.md): Pagination with smooth page transition indicator
- [Animated Profile Menu](https://ui.tripled.work/md/animated-profile-menu-shadcnui.md): Floating profile avatar that reveals quick action cards with smooth motion
- [Animated Sidebar](https://ui.tripled.work/md/animated-sidebar-shadcnui.md): Sidebar with slide-in animation and overlay
- [Animated Tooltip](https://ui.tripled.work/md/animated-tooltip-shadcnui.md): Tooltip with delay and slide animation
- [Avatar Group](https://ui.tripled.work/md/avatar-group-shadcnui.md): Stacked avatar group with hover reveal and tooltips
- [Blog Typography](https://ui.tripled.work/md/blog-typography-shadcnui.md): Beautiful blog post typography with text, links, images, blockquotes, and code examples
- [Browse Folder](https://ui.tripled.work/md/browse-folder-baseui.md): Folder browser with animated tabs and content (Base UI)
- [Browse Folder](https://ui.tripled.work/md/browse-folder-shadcnui.md): Folder browser with animated tabs and content
- [Command Palette](https://ui.tripled.work/md/command-palette-shadcnui.md): Command palette with search and keyboard navigation
- [Comment Thread](https://ui.tripled.work/md/comment-thread-shadcnui.md): Nested comment thread with rich interactions and animations
- [Context Menu](https://ui.tripled.work/md/context-menu-shadcnui.md): Right-click context menu with nested items animation
- [Context Menu Bubble](https://ui.tripled.work/md/context-menu-bubble-shadcnui.md): Right-click reveals circular expanding radial menu with icons
- [Course Content Page](https://ui.tripled.work/md/course-content-page-shadcnui.md): Interactive course page with video player, instructor details, curriculum sections, and progress tracking
- [Currency Converter Card](https://ui.tripled.work/md/currency-converter-card-baseui.md): Finance conversion widget with animated inputs, simulated exchange updates, and contextual feedback (Base UI)
- [Currency Converter Card](https://ui.tripled.work/md/currency-converter-card-shadcnui.md): Finance conversion widget with animated inputs, simulated exchange updates, and contextual feedback
- [Drag-to-Confirm Slider](https://ui.tripled.work/md/drag-to-confirm-slider-shadcnui.md): Slider that activates action only when fully dragged to end
- [Expanding Search Dock](https://ui.tripled.work/md/expanding-search-dock-shadcnui.md): Minimal search icon that expands into full input with blur
- [Glassmorphism Statistics Card](https://ui.tripled.work/md/glassmorphism-statistics-card-baseui.md): Interactive statistics card with hover reveal and smooth transitions (Base UI)
- [Glassmorphism Statistics Card](https://ui.tripled.work/md/glassmorphism-statistics-card-shadcnui.md): Interactive statistics card with hover reveal and smooth transitions
- [Interactive Timeline](https://ui.tripled.work/md/interactive-timeline-shadcnui.md): Vertical timeline where elements animate and connect with lines on scroll
- [Mac Searchbar](https://ui.tripled.work/md/mac-searchbar-shadcnui.md): Mac-style searchbar with animated dropdown, glassmorphism effects, and smooth transitions
- [Magnetic Avatar Group](https://ui.tripled.work/md/magnetic-avatar-group-shadcnui.md): Stacked avatars that spread apart on hover showing tooltips
- [Multiple Accounts Switcher](https://ui.tripled.work/md/multiple-accounts-shadcnui.md): Glassmorphic account switcher with animated dropdown and accessible listbox controls
- [News Feed](https://ui.tripled.work/md/news-feed-shadcnui.md): Interactive news feed with categories, search, and animated cards
- [Projects Block](https://ui.tripled.work/md/projects-block-baseui.md): Animated project card with hover effects, image zoom, and link buttons (Base UI)
- [Projects Block](https://ui.tripled.work/md/projects-block-shadcnui.md): Animated project card with hover effects, image zoom, and link buttons
- [Smart Hover Card](https://ui.tripled.work/md/smart-hover-card-shadcnui.md): Card that detects cursor direction and reveals content from that side
- [Stacked Card Carousel](https://ui.tripled.work/md/stacked-card-carousel-shadcnui.md): Three stacked cards that shift and tilt dynamically on hover
- [Synced Lyric Captions](https://ui.tripled.work/md/synced-lyric-captions-shadcnui.md): Bottom-to-top timed captions with play/pause controls and optional audio sync for songs or voiceovers.
- [Volume Component](https://ui.tripled.work/md/volume-component-shadcnui.md): A smooth, draggable volume slider component with framer-motion animations and shadcn styling.
- [Weather Dashboard](https://ui.tripled.work/md/weather-dashboard-shadcnui.md): Immersive weather dashboard with hourly charting, weekly outlook, and live air-quality alerts
- [Web Performance Page](https://ui.tripled.work/md/web-performance-page-shadcnui.md): Real-time analysis of web vitals and performance metrics

#### Dropdown

- [Staggered Dropdown](https://ui.tripled.work/md/staggered-dropdown-shadcnui.md): Dropdown menu with staggered item animations

#### Forms

- [Animated Checkbox](https://ui.tripled.work/md/animated-checkbox-shadcnui.md): Checkbox with checkmark animation
- [Animated Radio](https://ui.tripled.work/md/animated-radio-shadcnui.md): Radio button group with selection ripple
- [Animated Select](https://ui.tripled.work/md/animated-select-shadcnui.md): Select dropdown with smooth open/close animation
- [Glass Account Settings Card](https://ui.tripled.work/md/glass-account-settings-card-shadcnui.md): Account management card with subscription overview and billing actions in glassmorphic style
- [Glass Forgot Password Card](https://ui.tripled.work/md/glass-forgot-password-card-shadcnui.md): Reset-password screen with glassmorphic styling and status messaging
- [Glass Profile Settings Card](https://ui.tripled.work/md/glass-profile-settings-card-shadcnui.md): Glassmorphic profile settings form with avatar upload, bio, and notification preferences
- [Glass Sign-In Card](https://ui.tripled.work/md/glass-sign-in-card-shadcnui.md): Glassmorphic sign-in panel with social auth buttons and email form
- [Glass Sign-Up Card](https://ui.tripled.work/md/glass-sign-up-card-shadcnui.md): Glassmorphic sign-up flow with social providers, email fields, and terms checkbox
- [Glass Verification Code Card](https://ui.tripled.work/md/glass-verification-code-card-shadcnui.md): Verification code entry with glassmorphic inputs, status messaging, and reduced-motion support
- [Simple Calendar](https://ui.tripled.work/md/simple-calendar-shadcnui.md): Calendar picker with date selection animation

#### Inputs

- [AI Glow Input](https://ui.tripled.work/md/ai-glow-input-shadcnui.md): Input field with dynamic glow that pulses based on typing speed - smart motion feedback
- [Floating Label Input](https://ui.tripled.work/md/floating-label-input-shadcnui.md): Input with animated floating label
- [Password Input](https://ui.tripled.work/md/password-input-shadcnui.md): Password input with toggle visibility and strength indicator

#### Lists

- [Animated List](https://ui.tripled.work/md/animated-list-shadcnui.md): List with staggered item animations
- [Draggable List](https://ui.tripled.work/md/draggable-list-shadcnui.md): Reorderable list with drag and drop spring physics

#### Modal

- [Animated Dialog](https://ui.tripled.work/md/animated-dialog-shadcnui.md): Modal dialog with backdrop fade and spring animation
- [Fade & Slide Modal](https://ui.tripled.work/md/fade-slide-modal-shadcnui.md): Modal with fade backdrop and slide-up animation
- [Fluid Modal Transition](https://ui.tripled.work/md/fluid-modal-transition-shadcnui.md): Modal that expands smoothly from clicked trigger element using layoutId

#### Notifications

- [Notification Center](https://ui.tripled.work/md/notification-center-shadcnui.md): Multi-variant notification stack with accessible announcements, actions, and motion states

#### Tabs

- [Animated Tabs](https://ui.tripled.work/md/animated-tabs-shadcnui.md): Tabs with sliding indicator animation

- [Wizard Form](https://ui.tripled.work/md/wizard-form-shadcnui.md): Multi-step wizard form with animated transitions, validation, and progress tracking

- [Bottom Modal](https://ui.tripled.work/md/bottom-modal.md): Cute bottom-centered modal with smooth slide-up animation and glassmorphism design
- [Folder Animation](https://ui.tripled.work/md/folder-animation-carbon.md): Animated folder card with motion blur effect, perfect for showcasing file operations or loading states.
- [Native Action Dropdown](https://ui.tripled.work/md/native-action-dropdown-baseui.md): A click-driven action picker whose multi-level submenu opens beside the row and drills in place with an animated breadcrumb at a fixed width. (Base UI)
- [Native Action Dropdown](https://ui.tripled.work/md/native-action-dropdown-shadcnui.md): A click-driven action picker whose multi-level submenu opens beside the row, jumps straight to the selected item, and drills in place with an animated breadcrumb at a fixed width.
- [Native Avatar Expand](https://ui.tripled.work/md/native-avatar-expand-baseui.md): Avatar component that expands to reveal the name on click with smooth animations. (Base UI)
- [Native Avatar Expand](https://ui.tripled.work/md/native-avatar-expand-shadcnui.md): Avatar component that expands to reveal the name on click with smooth animations.
- [Native Avatar With Name](https://ui.tripled.work/md/native-avatar-with-name-baseui.md): Avatar component that displays a name tooltip on hover with directional animations. (Base UI)
- [Native Avatar With Name](https://ui.tripled.work/md/native-avatar-with-name-shadcnui.md): Avatar component that displays a name tooltip on hover with directional animations.
- [Native Badge](https://ui.tripled.work/md/native-badge.md): Animated badge component with glass, glow, and outline variants for native feel.
- [Native Badge](https://ui.tripled.work/md/native-badge-carbon.md): Animated badge component with glass, glow, and outline variants for native feel.
- [Native Button](https://ui.tripled.work/md/native-button-baseui.md): Glassmorphism-inspired button component based on shadcn/ui with smooth animations and modern styling (Base UI)
- [Native Button](https://ui.tripled.work/md/native-button-shadcnui.md): Glassmorphism-inspired button component based on shadcn/ui with smooth animations and modern styling
- [Native Counter Up](https://ui.tripled.work/md/native-counter-up.md): Animated number counter with smooth easing and accessibility support.
- [Native Counter Up](https://ui.tripled.work/md/native-counter-up-carbon.md): Animated number counter with smooth easing and accessibility support.
- [Native Delete](https://ui.tripled.work/md/native-delete-baseui.md): Delete button that expands to show a confirmation button with smooth animations. (Base UI)
- [Native Delete](https://ui.tripled.work/md/native-delete-shadcnui.md): Delete button that expands to show a confirmation button with smooth animations.
- [Native Dialog](https://ui.tripled.work/md/native-dialog-baseui.md): A glassmorphism-styled dialog component with backdrop blur and smooth animations, inspired by native OS modals. (Base UI)
- [Native Dialog](https://ui.tripled.work/md/native-dialog-shadcnui.md): A glassmorphism-styled dialog component with backdrop blur and smooth animations, inspired by native OS modals.
- [Native Flip Text](https://ui.tripled.work/md/native-flip-text.md): Text that flips through words with a 3D blur transition.
- [Native Flip Text](https://ui.tripled.work/md/native-flip-text-baseui.md): Text that flips through words with a 3D blur transition. (Base UI)
- [Native Flip Text](https://ui.tripled.work/md/native-flip-text-carbon.md): Text that flips through words with a 3D blur transition.
- [Native Flip Text](https://ui.tripled.work/md/native-flip-text-shadcnui.md): Text that flips through words with a 3D blur transition.
- [Native Follow Cursor](https://ui.tripled.work/md/native-follow-cursor.md): Label that smoothly follows the cursor with spring physics and customizable variants.
- [Native Follow Cursor](https://ui.tripled.work/md/native-follow-cursor-carbon.md): Label that smoothly follows the cursor with spring physics and customizable variants.
- [Native Hover Card](https://ui.tripled.work/md/native-hover-card-baseui.md): Avatar card that expands on hover to reveal profile information with smooth animations. (Base UI)
- [Native Hover Card](https://ui.tripled.work/md/native-hover-card-shadcnui.md): Avatar card that expands on hover to reveal profile information with smooth animations.
- [Native Image Checkbox](https://ui.tripled.work/md/native-image-checkbox-baseui.md): Image checkbox component with grayscale filter and checkmark indicator. (Base UI)
- [Native Image Checkbox](https://ui.tripled.work/md/native-image-checkbox-carbon.md): Image checkbox component with grayscale filter and checkmark indicator.
- [Native Image Checkbox](https://ui.tripled.work/md/native-image-checkbox-shadcnui.md): Image checkbox component with grayscale filter and checkmark indicator.
- [Native Likes Counter](https://ui.tripled.work/md/native-likes-counter-baseui.md): An interactive likes counter with avatar stack, popup details, and smooth animations. (Base UI)
- [Native Likes Counter](https://ui.tripled.work/md/native-likes-counter-shadcnui.md): An interactive likes counter with avatar stack, popup details, and smooth animations.
- [Native Liquid Button](https://ui.tripled.work/md/native-liquid-button-baseui.md): Button with animated liquid fill effect, progress tracking, and multiple visual variants for engaging interactions. (Base UI)
- [Native Liquid Button](https://ui.tripled.work/md/native-liquid-button-shadcnui.md): Button with animated liquid fill effect, progress tracking, and multiple visual variants for engaging interactions.
- [Native Magnetic](https://ui.tripled.work/md/native-magnetic.md): Magnetic wrapper that applies a cursor-following effect to any content.
- [Native Magnetic](https://ui.tripled.work/md/native-magnetic-baseui.md): Magnetic wrapper that applies a cursor-following effect to any content. (Base UI)
- [Native Magnetic](https://ui.tripled.work/md/native-magnetic-carbon.md): Magnetic wrapper that applies a cursor-following effect to any content.
- [Native Magnetic](https://ui.tripled.work/md/native-magnetic-shadcnui.md): Magnetic wrapper that applies a cursor-following effect to any content.
- [Native Marquee](https://ui.tripled.work/md/native-marquee-baseui.md): A smooth, infinite scrolling marquee for logos or text. (Base UI)
- [Native Marquee](https://ui.tripled.work/md/native-marquee-shadcnui.md): A smooth, infinite scrolling marquee for logos or text.
- [Native Morphing Button](https://ui.tripled.work/md/native-morphing-button-baseui.md): Floating action button that morphs into a menu of actions. (Base UI)
- [Native Morphing Button](https://ui.tripled.work/md/native-morphing-button-carbon.md): Floating action button that morphs into a menu of actions.
- [Native Morphing Button](https://ui.tripled.work/md/native-morphing-button-shadcnui.md): Floating action button that morphs into a menu of actions.
- [Native Nested List](https://ui.tripled.work/md/native-nested-list-baseui.md): A nested list component with smooth expand/collapse animations. (Base UI)
- [Native Nested List](https://ui.tripled.work/md/native-nested-list-shadcnui.md): A nested list component with smooth expand/collapse animations, perfect for file explorers or navigation menus.
- [Native Notch](https://ui.tripled.work/md/native-notch-baseui.md): Dynamic Island-inspired notch component with smooth spring animations, draggable physics, and expandable content area (Base UI)
- [Native Notch](https://ui.tripled.work/md/native-notch-shadcnui.md): Dynamic Island-inspired notch component with smooth spring animations, draggable physics, and expandable content area
- [Native Notification Bell](https://ui.tripled.work/md/native-notification-bell-baseui.md): Animated notification bell with badge and ringing effect. (Base UI)
- [Native Notification Bell](https://ui.tripled.work/md/native-notification-bell-carbon.md): Animated notification bell with badge and ringing effect.
- [Native Notification Bell](https://ui.tripled.work/md/native-notification-bell-shadcnui.md): Animated notification bell with badge and ringing effect.
- [Native Profile Notch](https://ui.tripled.work/md/native-profile-notch-baseui.md): A dynamic expanding notch component for displaying user profiles with smooth spring animations. (Base UI)
- [Native Profile Notch](https://ui.tripled.work/md/native-profile-notch-shadcnui.md): A dynamic expanding notch component for displaying user profiles with smooth spring animations.
- [Native Start Now](https://ui.tripled.work/md/native-start-now-baseui.md): Animated button with sparkle effects, loading states, and smooth transitions for starting actions. (Base UI)
- [Native Start Now](https://ui.tripled.work/md/native-start-now-shadcnui.md): Animated button with sparkle effects, loading states, and smooth transitions for starting actions.
- [Native Tabs](https://ui.tripled.work/md/native-tabs-baseui.md): A sleek tabs component with a smooth sliding background indicator using Framer Motion layout animations. (Base UI)
- [Native Tabs](https://ui.tripled.work/md/native-tabs-carbon.md): A sleek tabs component with a smooth sliding background indicator using Framer Motion layout animations.
- [Native Tabs](https://ui.tripled.work/md/native-tabs-shadcnui.md): A sleek tabs component with a smooth sliding background indicator using Framer Motion layout animations.
- [Native Tooltip](https://ui.tripled.work/md/native-tooltip-baseui.md): A glassmorphism-styled tooltip with smooth spring animations using Framer Motion. (Base UI)
- [Native Tooltip](https://ui.tripled.work/md/native-tooltip-shadcnui.md): A glassmorphism-styled tooltip with smooth spring animations using Framer Motion.
- [Native Typewriter](https://ui.tripled.work/md/native-typewriter.md): Typewriter effect with speed control, looping, and blinking cursor.
- [Native Typewriter](https://ui.tripled.work/md/native-typewriter-baseui.md): Typewriter effect with speed control, looping, and blinking cursor. (Base UI)
- [Native Typewriter](https://ui.tripled.work/md/native-typewriter-shadcnui.md): Typewriter effect with speed control, looping, and blinking cursor.
- [Native Verified Badge](https://ui.tripled.work/md/native-verified-badge-baseui.md): Verified badge component with multiple variants, sizes, and styles including outline and shield designs. (Base UI)
- [Native Verified Badge](https://ui.tripled.work/md/native-verified-badge-shadcnui.md): Verified badge component with multiple variants, sizes, and styles including outline and shield designs.
- [Social Login Button](https://ui.tripled.work/md/social-login-button-baseui.md): A set of animated social login buttons for major platforms (Github, Google, X, etc.) with various effects. (Base UI)
- [Social Login Button](https://ui.tripled.work/md/social-login-button-shadcnui.md): A set of animated social login buttons for major platforms (Github, Google, X, etc.) with various effects.

- [Interactive Resume Card](https://ui.tripled.work/md/resume-card-baseui.md): Professional resume template with animated sections and interactive elements (Base UI)
- [Interactive Resume Card](https://ui.tripled.work/md/resume-card-shadcnui.md): Professional resume template with animated sections and interactive elements
- [Minimal Resume](https://ui.tripled.work/md/minimal-resume-baseui.md): Vercel-inspired minimal resume with clean typography and grid layout (Base UI)
- [Minimal Resume](https://ui.tripled.work/md/minimal-resume-shadcnui.md): Vercel-inspired minimal resume with clean typography and grid layout
- [Professional Resume](https://ui.tripled.work/md/professional-resume-baseui.md): Clean, formal resume template suitable for corporate applications (Base UI)
- [Professional Resume](https://ui.tripled.work/md/professional-resume-shadcnui.md): Clean, formal resume template suitable for corporate applications
- [Standard Resume](https://ui.tripled.work/md/standard-resume-baseui.md): A standard, professional resume layout with a sidebar, suitable for most industries. (Base UI)
- [Standard Resume](https://ui.tripled.work/md/standard-resume-shadcnui.md): A standard, professional resume layout with a sidebar, suitable for most industries.

## Blocks

- [About Us](https://ui.tripled.work/md/about-us-section-baseui.md): About us section with value cards, icons, and animated reveal effects (Base UI)
- [About Us](https://ui.tripled.work/md/about-us-section-shadcnui.md): About us section with value cards, icons, and animated reveal effects
- [Bento Grid Block](https://ui.tripled.work/md/bento-grid-block-baseui.md): Layered bento grid with imagery, metrics, and smooth motion reveals (Base UI)
- [Bento Grid Block](https://ui.tripled.work/md/bento-grid-block-shadcnui.md): Layered bento grid with imagery, metrics, and smooth motion reveals
- [Blog Block](https://ui.tripled.work/md/blog-block-baseui.md): Animated blog posts grid with staggered cards, date/time indicators, and hover effects (Base UI)
- [Blog Block](https://ui.tripled.work/md/blog-block-shadcnui.md): Animated blog posts grid with staggered cards, date/time indicators, and hover effects
- [Contact Block](https://ui.tripled.work/md/contact-block-baseui.md): Contact form with animated contact info cards, working hours, and interactive icons (Base UI)
- [Contact Block](https://ui.tripled.work/md/contact-block-shadcnui.md): Contact form with animated contact info cards, working hours, and interactive icons
- [Contact Form](https://ui.tripled.work/md/contact-form-section-baseui.md): Contact form section with animated inputs, validation, and form handling (Base UI)
- [Contact Form](https://ui.tripled.work/md/contact-form-section-shadcnui.md): Contact form section with animated inputs, validation, and form handling
- [CTA Block](https://ui.tripled.work/md/cta-block-baseui.md): Call-to-action section with gradient overlay, animated buttons, and status indicator (Base UI)
- [CTA Block](https://ui.tripled.work/md/cta-block-shadcnui.md): Call-to-action section with gradient overlay, animated buttons, and status indicator
- [CTA Hero Block](https://ui.tripled.work/md/cta-hero-block-baseui.md): Engaging hero section with email signup, video preview, and social proof (Base UI)
- [CTA Hero Block](https://ui.tripled.work/md/cta-hero-block-shadcnui.md): Engaging hero section with email signup, video preview, and social proof
- [Dashboard](https://ui.tripled.work/md/dashboard-baseui.md): Interactive stock portfolio dashboard with status cards, data table, and detailed stock information modal (Base UI)
- [Dashboard](https://ui.tripled.work/md/dashboard-shadcnui.md): Interactive stock portfolio dashboard with status cards, data table, and detailed stock information modal
- [FAQ Accordion](https://ui.tripled.work/md/faq-accordion-block-baseui.md): Expandable FAQ section with smooth accordion animations (Base UI)
- [FAQ Accordion](https://ui.tripled.work/md/faq-accordion-block-shadcnui.md): Expandable FAQ section with smooth accordion animations
- [Feature Cards Grid](https://ui.tripled.work/md/feature-cards-block-baseui.md): Three feature cards with icons, hover effects, and glassmorphism styling (Base UI)
- [Feature Cards Grid](https://ui.tripled.work/md/feature-cards-block-shadcnui.md): Three feature cards with icons, hover effects, and glassmorphism styling
- [Feature Comparison Table](https://ui.tripled.work/md/feature-comparison-block-baseui.md): Interactive pricing comparison table with animated checkmarks and plan highlights (Base UI)
- [Feature Comparison Table](https://ui.tripled.work/md/feature-comparison-block-shadcnui.md): Interactive pricing comparison table with animated checkmarks and plan highlights
- [Footer Block](https://ui.tripled.work/md/footer-block-baseui.md): Comprehensive footer with links, newsletter signup, social icons, and scroll-to-top (Base UI)
- [Footer Block](https://ui.tripled.work/md/footer-block-shadcnui.md): Comprehensive footer with links, newsletter signup, social icons, and scroll-to-top
- [Gallery Grid with Lightbox](https://ui.tripled.work/md/gallery-grid-block-baseui.md): Filterable image gallery with animated lightbox and navigation (Base UI)
- [Gallery Grid with Lightbox](https://ui.tripled.work/md/gallery-grid-block-shadcnui.md): Filterable image gallery with animated lightbox and navigation
- [Glassmorphism CTA](https://ui.tripled.work/md/glassmorphism-cta-block-baseui.md): Call-to-action section with glassy card, gradient background, and animated buttons (Base UI)
- [Glassmorphism CTA](https://ui.tripled.work/md/glassmorphism-cta-block-shadcnui.md): Call-to-action section with glassy card, gradient background, and animated buttons
- [Glassmorphism Hero](https://ui.tripled.work/md/glassmorphism-hero-block-baseui.md): Modern hero section with glassmorphism effects, animated background orbs, and CTA buttons (Base UI)
- [Glassmorphism Hero](https://ui.tripled.work/md/glassmorphism-hero-block-shadcnui.md): Modern hero section with glassmorphism effects, animated background orbs, and CTA buttons
- [Glassmorphism Launch Timeline](https://ui.tripled.work/md/glassmorphism-launch-timeline-block-baseui.md): Frictionless launch roadmap with staggered motion, glassmorphism milestones, and paired CTA actions (Base UI)
- [Glassmorphism Launch Timeline](https://ui.tripled.work/md/glassmorphism-launch-timeline-block-shadcnui.md): Frictionless launch roadmap with staggered motion, glassmorphism milestones, and paired CTA actions
- [Glassmorphism Listen App](https://ui.tripled.work/md/glassmorphism-listen-app-block-baseui.md): Music streaming block with glassmorphism player, curated highlights, and animated controls (Base UI)
- [Glassmorphism Listen App](https://ui.tripled.work/md/glassmorphism-listen-app-block-shadcnui.md): Music streaming block with glassmorphism player, curated highlights, and animated controls
- [Glassmorphism Logo Showcase](https://ui.tripled.work/md/glassmorphism-logo-showcase-block-baseui.md): Glassmorphism partner grid with floating motion, brand hints, and collaborative call-to-action (Base UI)
- [Glassmorphism Logo Showcase](https://ui.tripled.work/md/glassmorphism-logo-showcase-block-shadcnui.md): Glassmorphism partner grid with floating motion, brand hints, and collaborative call-to-action
- [Glassmorphism Minimal Metrics](https://ui.tripled.work/md/glassmorphism-minimal-metrics-block-baseui.md): Focused metric cards with glass surfaces, subtle motion, and concierge insight CTA banner (Base UI)
- [Glassmorphism Minimal Metrics](https://ui.tripled.work/md/glassmorphism-minimal-metrics-block-shadcnui.md): Focused metric cards with glass surfaces, subtle motion, and concierge insight CTA banner
- [Glassmorphism Portfolio](https://ui.tripled.work/md/glassmorphism-portfolio-block-baseui.md): Personal portfolio spotlight with profile portrait, narrative highlights, and animated social links (Base UI)
- [Glassmorphism Portfolio](https://ui.tripled.work/md/glassmorphism-portfolio-block-shadcnui.md): Personal portfolio spotlight with profile portrait, narrative highlights, and animated social links
- [Glassmorphism Pricing](https://ui.tripled.work/md/glassmorphism-pricing-block-baseui.md): Pricing cards with glassmorphism effects, hover animations, and feature lists (Base UI)
- [Glassmorphism Pricing](https://ui.tripled.work/md/glassmorphism-pricing-block-shadcnui.md): Pricing cards with glassmorphism effects, hover animations, and feature lists
- [Glassmorphism Product Updates](https://ui.tripled.work/md/glassmorphism-product-update-block-baseui.md): Multi-state changelog cards with glass overlays, status badges, and GitHub integration banner (Base UI)
- [Glassmorphism Product Updates](https://ui.tripled.work/md/glassmorphism-product-update-block-shadcnui.md): Multi-state changelog cards with glass overlays, status badges, and GitHub integration banner
- [Glassmorphism Testimonials](https://ui.tripled.work/md/glassmorphism-testimonials-block-baseui.md): Customer testimonials with glassmorphism cards, star ratings, and hover effects (Base UI)
- [Glassmorphism Testimonials](https://ui.tripled.work/md/glassmorphism-testimonials-block-shadcnui.md): Customer testimonials with glassmorphism cards, star ratings, and hover effects
- [Glowy Waves Hero](https://ui.tripled.work/md/glowy-waves-hero-baseui.md): Hero section with glowy waves effect (Base UI)
- [Glowy Waves Hero](https://ui.tripled.work/md/glowy-waves-hero-shadcnui.md): Hero section with glowy waves effect
- [Hero Block](https://ui.tripled.work/md/hero-block-baseui.md): Personal portfolio hero section with animated avatar, staggered text, social links, and scroll indicator (Base UI)
- [Hero Block](https://ui.tripled.work/md/hero-block-shadcnui.md): Personal portfolio hero section with animated avatar, staggered text, social links, and scroll indicator
- [Interactive Logs Table](https://ui.tripled.work/md/interactive-logs-table-baseui.md): Observability logs panel with animated filters, search, and expandable rows (Base UI)
- [Interactive Logs Table](https://ui.tripled.work/md/interactive-logs-table-shadcnui.md): Observability logs panel with animated filters, search, and expandable rows
- [Kanban Board](https://ui.tripled.work/md/kanban-board-shadcnui.md): Interactive Kanban board with drag-and-drop, glassmorphism styling, and task management features
- [N8N Workflow Block](https://ui.tripled.work/md/n8n-workflow-block-baseui.md): Visual workflow automation builder with animated nodes, connections, and real-time execution monitoring (Base UI)
- [N8N Workflow Block](https://ui.tripled.work/md/n8n-workflow-block-shadcnui.md): Visual workflow automation builder with animated nodes, connections, and real-time execution monitoring
- [New Hero Section](https://ui.tripled.work/md/new-hero-section-baseui.md): Modern hero section with gradient background, animated stats, and call-to-action buttons (Base UI)
- [New Hero Section](https://ui.tripled.work/md/new-hero-section-shadcnui.md): Modern hero section with gradient background, animated stats, and call-to-action buttons
- [Newsletter Signup Block](https://ui.tripled.work/md/newsletter-signup-block-baseui.md): Animated newsletter subscription form with success state and gradient background (Base UI)
- [Newsletter Signup Block](https://ui.tripled.work/md/newsletter-signup-block-shadcnui.md): Animated newsletter subscription form with success state and gradient background
- [Notion Blog Page](https://ui.tripled.work/md/notion-blog-page-baseui.md): Notion-style publishing playbook with rich text, toggles, and supporting visuals (Base UI)
- [Notion Blog Page](https://ui.tripled.work/md/notion-blog-page-shadcnui.md): Notion-style publishing playbook with rich text, toggles, and supporting visuals
- [Our Services](https://ui.tripled.work/md/our-services-section-baseui.md): Services section with service cards, badges, icons, and hover animations (Base UI)
- [Our Services](https://ui.tripled.work/md/our-services-section-shadcnui.md): Services section with service cards, badges, icons, and hover animations
- [Services Grid](https://ui.tripled.work/md/services-grid-block-baseui.md): 8-column responsive services grid with icons, features, and hover effects (Base UI)
- [Services Grid](https://ui.tripled.work/md/services-grid-block-shadcnui.md): 8-column responsive services grid with icons, features, and hover effects
- [Stats Counter Block](https://ui.tripled.work/md/stats-counter-block-baseui.md): Animated statistics counters with icons and gradient backgrounds (Base UI)
- [Stats Counter Block](https://ui.tripled.work/md/stats-counter-block-shadcnui.md): Animated statistics counters with icons and gradient backgrounds
- [Stocks Dashboard](https://ui.tripled.work/md/stocks-dashboard-shadcnui.md): Interactive stock portfolio dashboard with status cards, data table, and detailed stock information modal
- [Team Section Block](https://ui.tripled.work/md/team-section-block-baseui.md): Animated team member cards with avatars, roles, and social links (Base UI)
- [Team Section Block](https://ui.tripled.work/md/team-section-block-shadcnui.md): Animated team member cards with avatars, roles, and social links
- [Testimonials Block](https://ui.tripled.work/md/testimonials-block-baseui.md): Animated testimonials grid with staggered cards, star ratings, and hover effects (Base UI)
- [Testimonials Block](https://ui.tripled.work/md/testimonials-block-shadcnui.md): Animated testimonials grid with staggered cards, star ratings, and hover effects
- [Timeline Block](https://ui.tripled.work/md/timeline-block-baseui.md): Vertical timeline with alternating cards and animated progress line (Base UI)
- [Timeline Block](https://ui.tripled.work/md/timeline-block-shadcnui.md): Vertical timeline with alternating cards and animated progress line

## Pages

### Page

#### About

- [About Us Page](https://ui.tripled.work/md/about-us-page-shadcnui.md): Glassmorphism about page showcasing mission, values, and leadership with motion accents.

- [Auto-Revealing Heading](https://ui.tripled.work/md/auto-revealing-heading-shadcnui.md): Heading that reveals each letter/word with staggered motion on scroll
- [CTA Banner Section](https://ui.tripled.work/md/cta-banner-section-baseui.md): Animated call-to-action banner with gradient background and button animations (Base UI)
- [CTA Banner Section](https://ui.tripled.work/md/cta-banner-section-shadcnui.md): Animated call-to-action banner with gradient background and button animations
- [Dynamic Spotlight CTA](https://ui.tripled.work/md/dynamic-spotlight-cta-shadcnui.md): Floating spotlight follows cursor to reveal gradient CTA text with premium effects
- [FAQ Section](https://ui.tripled.work/md/faq-section-baseui.md): Animated FAQ section with expandable questions and smooth transitions (Base UI)
- [FAQ Section](https://ui.tripled.work/md/faq-section-shadcnui.md): Animated FAQ section with expandable questions and smooth transitions
- [Feature Grid Section](https://ui.tripled.work/md/feature-grid-section-baseui.md): Animated feature grid with staggered card animations and icon reveals (Base UI)
- [Feature Grid Section](https://ui.tripled.work/md/feature-grid-section-shadcnui.md): Animated feature grid with staggered card animations and icon reveals
- [Pricing Section](https://ui.tripled.work/md/pricing-section-baseui.md): Animated pricing cards with hover effects and feature lists (Base UI)
- [Pricing Section](https://ui.tripled.work/md/pricing-section-shadcnui.md): Animated pricing cards with hover effects and feature lists
- [Profile Page](https://ui.tripled.work/md/profile-page-shadcnui.md): User profile with gradient cover, stats, and posts feed
- [Scroll Progress Tracker](https://ui.tripled.work/md/scroll-progress-tracker-shadcnui.md): Fixed progress bar that follows scroll and glows on section changes
- [Scroll Reveal](https://ui.tripled.work/md/scroll-reveal-baseui.md): Section that animates into view on scroll with intersection observer (Base UI)
- [Scroll Reveal](https://ui.tripled.work/md/scroll-reveal-shadcnui.md): Section that animates into view on scroll with intersection observer
- [Stats Section](https://ui.tripled.work/md/stats-section-baseui.md): Animated statistics section with cards and counters (Base UI)
- [Stats Section](https://ui.tripled.work/md/stats-section-shadcnui.md): Animated statistics section with cards and counters
- [Testimonial Section](https://ui.tripled.work/md/testimonial-section-baseui.md): Carousel-style testimonial section with smooth transitions (Base UI)
- [Testimonial Section](https://ui.tripled.work/md/testimonial-section-shadcnui.md): Carousel-style testimonial section with smooth transitions

#### Hero

- [Hero Section](https://ui.tripled.work/md/hero-section-baseui.md): Hero section with staggered text and button reveal (Base UI)
- [Hero Section](https://ui.tripled.work/md/hero-section-shadcnui.md): Hero section with staggered text and button reveal
- [Staggered Text Hero](https://ui.tripled.work/md/staggered-hero-shadcnui.md): Hero section with staggered text reveal

#### Notifications

- [Toast Notification](https://ui.tripled.work/md/toast-notification-shadcnui.md): Animated toast notification popup

## UI Elements

### Data

#### Charts

- [Accessible Cash Flow Chart](https://ui.tripled.work/md/cash-flow-chart.md): Interactive cash flow bar chart with keyboard focus, tooltips, and screen reader support

#### Progress

- [Animated Progress Bar](https://ui.tripled.work/md/animated-progress-shadcnui.md): Progress bar with smooth animation

### Decorative

#### Background

- [Floating Gradient](https://ui.tripled.work/md/floating-gradient-shadcnui.md): Animated floating gradient background effect
- [Gradient Animation](https://ui.tripled.work/md/gradient-animation-shadcnui.md): Smoothly transitioning gradient background
- [Reactive Background Grid](https://ui.tripled.work/md/reactive-background-grid-shadcnui.md): Background pattern that reacts to mouse movement and click ripples

- [Animated Quote Block](https://ui.tripled.work/md/animated-quote-block-shadcnui.md): Quote that types itself in, pauses, then subtly breathes
- [Dynamic Tag Cloud](https://ui.tripled.work/md/dynamic-tag-cloud-shadcnui.md): Floating cluster of tags that drift and rearrange when hovered
- [Floating Info Panel](https://ui.tripled.work/md/floating-info-panel-shadcnui.md): Info tooltip that drifts up/down while fading in/out intermittently
- [Folder Animation](https://ui.tripled.work/md/folder-animation.md): Animated folder card with motion blur effect, perfect for showcasing file operations or loading states
- [Holographic Wall](https://ui.tripled.work/md/holographic-wall-shadcnui.md): Black wall with Pharaonic hieroglyphs and golden cursor light reflection
- [Liquid Cursor](https://ui.tripled.work/md/liquid-cursor-shadcnui.md): A liquid-like cursor effect that mixes colors on movement
- [Spotlight Section](https://ui.tripled.work/md/spotlight-section-shadcnui.md): Container where mouse creates soft radial spotlight following cursor

### Micro

#### Buttons

- [Ripple Click Effect](https://ui.tripled.work/md/ripple-click-button-shadcnui.md): Material design inspired ripple effect on click
- [Scale Hover Button](https://ui.tripled.work/md/scale-hover-button-shadcnui.md): A button that scales up smoothly on hover
- [Shimmer Button](https://ui.tripled.work/md/shimmer-button-shadcnui.md): Button with continuous shimmer effect

- [AI Unlock Animation](https://ui.tripled.work/md/ai-unlock-animation-shadcnui.md): Premium unlock animation with particles, ripples, and loading states
- [Mood Gradient Button](https://ui.tripled.work/md/mood-gradient-button-shadcnui.md): Button with background gradient that shifts based on hover angle

#### Icons

- [Heart Favorite](https://ui.tripled.work/md/heart-favorite-shadcnui.md): Animated heart icon for like/favorite actions

#### Links

- [Preview Details Card](https://ui.tripled.work/md/preview-details-card-shadcnui.md): Link card that reveals a smooth detail preview box on hover

#### Toggles

- [Elastic Toggle Switch](https://ui.tripled.work/md/elastic-switch-shadcnui.md): Toggle switch with elastic spring animation

## Optional

- [Framer Motion Docs](https://www.framer.com/motion/): Animation library used by all components
- [shadcn/ui Docs](https://ui.shadcn.com/docs): Component primitives that shadcn variants build on
- [Base UI Docs](https://base-ui.com/): Headless component primitives that Base UI variants build on
- [Tailwind CSS v4 Docs](https://tailwindcss.com/docs): Utility-first CSS framework used for styling