Nondeterministic Programming Methodology
    Wondering what’s next for npm?Check out our public roadmap! »

    @chakra-xui/stat
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.2 • Public • Published

    Stat

    As the name implies, the Stat component is used to display some statistics.

    Installation

    yarn add @chakra-xui/stat
    
    # or
    
    npm i @chakra-xui/stat

    Import components

    import {
      Stat,
      StatArrow,
      StatLabel,
      StatGroup,
      StatNumber,
      StatUpArrow,
      StatHelpText,
      StatDownArrow,
    } from "@chakra-xui/stat"

    Usage

    <Stat>
      <StatLabel>Collected Fees</StatLabel>
      <StatNumber>£0.00</StatNumber>
      <StatHelpText>Feb 12 - Feb 28</StatHelpText>
    </Stat>
    
    
    <StatGroup>
      <Stat>
        <StatLabel>Sent</StatLabel>
        <StatNumber>345,670</StatNumber>
        <StatHelpText>
          23.36%
        </StatHelpText>
      </Stat>
    
      <Stat>
        <StatLabel>Clicked</StatLabel>
        <StatNumber>45</StatNumber>
        <StatHelpText>
          9.05%
        </StatHelpText>
      </Stat>
    </StatGroup>

    Stat with Indicator

    <StatGroup>
      <Stat>
        <StatLabel>Sent</StatLabel>
        <StatNumber>345,670</StatNumber>
        <StatHelpText>
          <StatArrow type="increase" />
          23.36%
        </StatHelpText>
      </Stat>
    </StatGroup>

    Install

    npm i @chakra-xui/stat

    DownloadsWeekly Downloads

    1

    Version

    1.0.2

    License

    MIT

    Unpacked Size

    39 kB

    Total Files

    13

    Last publish

    Collaborators

    • avatar