UI Component

      Interactive demonstration of all components with test IDs

      Component Test Summary

      Input: "empty"
      Checkbox: off
      Switch: off
      Toasts: 0

      Buttons

      #buttons

      Badges

      #badges
      Default
      Secondary
      Outline
      Destructive

      Alerts

      #alerts

      Form Inputs

      #inputs

      Toggle Controls

      #toggles

      Slider & Progress

      #sliders

      OTP Input

      #otp

      Value: empty

      Calendar

      #calendar
      SuMoTuWeThFrSa

      Selected: Loading...

      Toasts & Notifications

      #notifications

      Total toasts triggered: 0

      Dialogs & Overlays

      #overlays

      Card Component

      #card

      Card Title

      Card description text

      Card content goes here.

      Card footer

      Tabs

      #tabs
      Content for Tab 1

      Accordion & Collapsible

      #accordion

      Table

      #table
      Sample invoice data
      InvoiceStatusAmount
      INV001
      Paid
      $250.00
      INV002
      Pending
      $150.00

      Pagination

      #pagination

      Current page: 1

      Avatar & Skeleton

      #avatar
      CNAB

      Hover Card

      #hovercard

      Command Palette

      #command

      Resizable Panels

      #resizable
      Panel A
      Panel B

      Scroll Area

      #scrollarea
      Scrollable item 1
      Scrollable item 2
      Scrollable item 3
      Scrollable item 4
      Scrollable item 5
      Scrollable item 6
      Scrollable item 7
      Scrollable item 8
      Scrollable item 9
      Scrollable item 10
      Scrollable item 11
      Scrollable item 12
      Scrollable item 13
      Scrollable item 14
      Scrollable item 15
      Scrollable item 16
      Scrollable item 17
      Scrollable item 18
      Scrollable item 19
      Scrollable item 20

      Aspect Ratio

      #aspectratio
      16:9 Aspect Ratio

      Chart

      #chart