Components

    # Table of Content

    Validation (YUP)Validation (ZOD)Validation (ZOD Object)DialogModalSelectBoxSearchBoxReactSelectReactTableDropdownMenuCodeuseToastHoverCardBadgeButtonLinkButtonCheckboxContainerHeadingInputInput disabledFileInputLabelLabeledInputLabeledInput disabledInput (Debounce Hook)Input (use-debounce Package)InputDebounceTextAreaTextArea disabledSelectProgressRadioShimmerTabsTabs.panelTableTable.trTable.tdTableSimpleTableTableSimple.trTableTableSimple.tdTextCardSectionShowMoreLoadingDotsLoadingSkeleton

    # Validation (yup)

    # Validation (zod)

    # Validation (zod object)

    RefZod Object

    Zod Object Validation

    # Dialog (Radix)



    opensetOpentitlechildrenisDangeronCloseonConfirmshowIconchildren

    # SelectBox

    labelnamevalueplaceholderonChangeoptions...props

    # ReactSelect

    Search or Select
    classNameinstanceIdoptionsisMultinoOptionsMessagevalueonChangeplaceholdernameclassNamePrefixtheme...props

    # React Table

    NoNameEmailAction
    1Amparo Mooneyamparo@qnekt.com
    Edit
    2Daisy Newmandaisy@stelaecor.com
    Edit
    3Hawkins Donovanhawkins@silodyne.com
    Edit
    4Heath Sosaheath@calcu.com
    Edit
    5Nellie Blevinsnellie@portaline.com
    Edit
    Go to page
    Page 1 of 4

    classNamecolumnsdatapage_sizeborderednoHoveritemPerPagekeywordshowInfochildren

    # Code

    classNamenamecodelang...props

    # useToast (hook)

    # HoverCard

    Hover Me
    classNamechildren...props

    # Badge

    badgedarkredgreenyellowindigopurplepink


    badgedarkredgreenyellowindigopurplepink
    .dark.red.green.yellow.indigo.pink
    classNameisLargechildren...props

    # Button

    .success.danger.secondary.tertary
    classNametypevaluedisabledonClickchildren...props

    # LinkButton

    Link ButtonLink Button SecondaryLink Button Tertary
    .secondary.tertary
    classNamehrefchildren...props

    # Checkbox

    classNamenamelabelvalueonChangecheckeddefaultCheckeddisabled...props

    # Container

    Container

    Container Small

    classNamesmallchildren...props

    # Heading

    Heading 1

    Heading 2

    Heading 3

    Heading 4 (default)

    classNameh1h2h3children...props

    # Input

    classNametypenameplaceholdervaluedefaultValueonChangechildren...props

    # Input disabled

    classNametypenameplaceholdervaluedefaultValueonChangechildren...props

    # Label

    classNamechildren...props

    # LabeledInput

    classNamelabeltypenameplaceholdervaluedefaultValueonChangewrapperClassNamechildren...props

    # LabeledInput disabled

    classNamelabeltypenameplaceholdervaluedefaultValueonChangewrapperClassNamechildren...props

    # Input (Debounce Hook)

    Slower

    classNametypenameplaceholdervalueonChangechildren...props

    # Input (use-debounce Package)

    Slower

    classNametypenameplaceholdervalueonChangechildren...props

    # InputDebounce

    Faster

    classNamelabeltypenameplaceholdervalueonChangeclassNamewrapperClassNamedebounce...props

    # TextArea

    classNamelabelclassNamenameplaceholdervaluedefaultValueonChangeheight...props

    # TextArea disabled

    classNamelabelclassNamenameplaceholdervaluedefaultValueonChangeheight...props

    # FileInput

    classNameclassNamelabelnamevalueonChange...props

    # Select

    classNamelabelnamevalueonChangedefaultValuechildren...props

    # Select.option

    valuechildren...props

    # Progress


    0%

    75 %
    .percentage
    classNamepercent...props

    # Radio

    classNamenamelabelvalueonChangecheckeddefaultCheckeddisabled...props

    # Shimmer

    className

    # Tabs

    Tab Content A

    classNameitemsnamechildren...props

    # Tabs.panel

    Tabs Panel

    classNamechildren...props

    # Table

    NoEmailNameAgeGenderCompanyPhone
    1amparo@qnekt.comAmparo Mooney30femaleQNEKT+62 (807) 567-2875
    2daisy@stelaecor.comDaisy Newman26femaleSTELAECOR+62 (949) 563-3477
    3hawkins@silodyne.comHawkins Donovan28maleSILODYNE+62 (965) 569-3323
    4heath@calcu.comHeath Sosa32maleCALCU+62 (944) 491-3413
    5nellie@portaline.comNellie Blevins21femalePORTALINE+62 (916) 502-2018

    Showing 1 - 5 from 20 data

    classNameheadtotalPagetotalDatacurrentPagenextprevrowPerPagenoPaginationchildren...props

    # Table.tr

    Table.tr

    No data

    classNamechildren...props

    # Table.td

    Table.td

    No data

    classNameshrinkchildren...props

    # TableSimple

    Table 3.1: Badge
    NoColumn 1Column 2Column 3Column 4Column 5
    1badgebadge redbadge darkbadge greenbadge yellow
    2badgebadge redbadge darkbadge greenbadge yellow
    3badgebadge redbadge darkbadge greenbadge yellow
    4badgebadge redbadge darkbadge greenbadge yellow
    5badgebadge redbadge darkbadge greenbadge yellow
    classNameheadborderedcaptionwrapperClassNamechildren...props

    # TableSimple.tr

    TableSimple.tr
    classNamechildren

    # TableSimple.td

    TableSimple.td
    classNameshrinkborderedchildren

    # Text

    Light

    Default

    Medium

    Semibold

    Bold

    Extrabold

    .light.medium.semibold.bold.extrabold
    classNamechildren...props

    # Card

    Card Content

    classNamechildren...props

    # Section

    Section Default

    Section Small

    .small
    classNamechildren...props

    # ShowMore

    Id amet commodo exercitation aliqua irure exercitation adipisicing ipsum cillum elit. Cillum non dolor cillum mollit incididunt tempor quis reprehenderit labore velit sunt anim ipsum quis. Id nostrud ...

    classNamecountchildren...props

    # LoadingDots





    classNamemediumlarge...props

    # LoadingSkeleton