UI Thing

Icon List

Display lists with custom icons and variants for each item.

Usage

Basic Usage

Successfully implemented authentication

Database connection established

API endpoints configured

Mixed Variants

  • Feature is working correctly
  • Needs further testing
  • Bug found in production
  • Documentation pending

    • Custom Icons

  • Completed task
  • In progress
  • Failed step
  • Needs clarification

    • Default Icon Override

  • Premium feature
  • Advanced analytics
  • Priority support

    • Advanced Example

  • Installation: Run npm install ui-thing
  • Configuration: Update your config.json file with necessary settings.
  • Usage: Start the application using npm start and monitor the console for logs.
  • Troubleshooting: If you encounter issues, refer to the FAQ or open an issue on GitHub.

    • Mixed Variants

    Each item can have its own variant:

  • Feature is working correctly
  • Needs further testing
  • Bug found in production
  • Documentation pending

    • Custom Icons

    Override the default icons with custom ones:

    Premium feature

    Advanced analytics

    Priority support

    Per-Item Custom Icons

    Each item can have its own icon:

  • Completed task
  • In progress
  • Failed step
  • Needs clarification

    • Variants

    Success

    User registration completed

    Email verification sent

    Profile created successfully

    Error

    Invalid credentials provided

    Connection timeout

    File upload failed

    Warning

    API rate limit approaching

    Deprecated feature in use

    Cache needs clearing

    Info

    Server maintenance scheduled

    New feature available

    Documentation updated

    Default

    Standard list item

    Another item

    Final item

    Vue Component Usage

    You can also use this as a regular Vue component:

    <template>
  <ProseIconList variant="success">
    <ProseLi>Feature completed</ProseLi>
    <ProseLi>Tests passing</ProseLi>
    <ProseLi variant="warning">Review pending</ProseLi>
  </ProseIconList>
</template>

    Advanced Example

    Combine different features for complex lists:

  • Installation: Run npm install ui-thing

    Download the package

    Install the dependencies

    Go to the project directory

  • Configuration: Set up your nuxt.config.ts
  • Usage: Import components as needed
  • Deploy: Push to production

    • Field & Field Group

    Display component props or configuration options in a beautiful, readable format instead of traditional tables.

    Images

    How to use images in your content with zoom and styling options.