Last update: June 24, 2025

VcHint Component¶

The VcHint component is a simple atom used to display supplementary information or guidance text throughout the VC-Shell framework. It provides consistent styling for secondary text that guides users with additional context, instructions, or notes.

Storybook¶

VcHint Storybook

Basic Usage¶

<template>
  <VcHint>This is a helpful hint for the user.</VcHint>
</template>

<script lang="ts" setup>
import { VcHint } from '@vc-shell/framework';
</script>

Slots¶

Slot	Description
`default`	Content to display inside the hint

CSS Variables¶

The hint component uses CSS variables for theming, which can be customized:

:root {
  --hint-color: var(--neutrals-500);    /* Text color for hint content */
  --hint-font-size: 12px;               /* Font size for hint text */
}

Examples¶

Basic Hint¶

<template>
  <VcHint>This field is optional.</VcHint>
</template>

<script lang="ts" setup>
import { VcHint } from '@vc-shell/framework';
</script>

Hint with Rich Text Content¶

<template>
  <VcHint>
    This field is optional. Learn more in our
    <a href="#" class="tw-text-[var(--primary-500)] tw-underline">documentation</a>.
  </VcHint>
</template>

<script lang="ts" setup>
import { VcHint } from '@vc-shell/framework';
</script>

Multiple Hints for Requirements¶

<template>
  <div>
    <div class="tw-font-medium tw-mb-1">Password requirements:</div>
    <VcHint>• Must be at least 8 characters long</VcHint>
    <VcHint>• Must include at least one number</VcHint>
    <VcHint>• Must include at least one special character</VcHint>
  </div>
</template>

<script lang="ts" setup>
import { VcHint } from '@vc-shell/framework';
</script>

File Upload Instructions¶

<template>
  <div>
    <div class="tw-font-medium tw-mb-1">File upload:</div>
    <VcHint>Maximum file size: 5MB</VcHint>
    <VcHint>Supported formats: JPG, PNG, PDF</VcHint>
  </div>
</template>

<script lang="ts" setup>
import { VcHint } from '@vc-shell/framework';
</script>

Hint with Warning¶

<template>
  <VcHint class="tw-flex tw-items-center">
    <span class="tw-text-[var(--warning-500)] tw-mr-1">⚠️</span>
    This action cannot be undone.
  </VcHint>
</template>

<script lang="ts" setup>
import { VcHint } from '@vc-shell/framework';
</script>

Customized Hint¶

<template>
  <VcHint class="tw-italic tw-text-[var(--info-500)]">
    Pro tip: You can use keyboard shortcuts for faster navigation.
  </VcHint>
</template>

<script lang="ts" setup>
import { VcHint } from '@vc-shell/framework';
</script>