Web Awesome (ViUR)

Font Awesome
Try SSR Server-side rendering (SSR) generates component HTML on the server before the page loads, improving SEO and initial load time. Use the switch to see Web Awesome components render with and without SSR.
Search this website ⌘KCtrl+K Light Dark System Docs Select Color Scheme Default Awesome Shoelace Active Brutalist Glossy Matter Mellow Playful Premium Tailspin Docs Select Theme View Project on GitHub Star Project on GitHub
Start Components Docs Help
Web Awesome Font Awesome Build Awesome
Search this site… /
Try SSR Server-side rendering (SSR) generates component HTML on the server before the page loads, improving SEO and initial load time. Use the switch to see Web Awesome components render with and without SSR.
Light Dark System Docs Select Color Scheme Default Awesome Shoelace Active Brutalist Glossy Matter Mellow Playful Premium Tailspin Docs Select Theme

Getting Started

  • Installation
  • Usage
  • Forms
  • Localization
  • Frameworks
  • Using with AI
  • Figma Design Kit ProThis requires access to Web Awesome Pro
  • Server Rendering

Resources

  • Accessibility
  • Browser Support
  • Contributing
  • Patterns ProPatterns require access to Web Awesome Pro
  • Migrating from Shoelace
  • Visual Tests
  • Changelog
  • Help & Support

Theming & Utilities

  • Overview
  • Built-in Themes
  • Color Palettes
  • Design Tokens
  • Customizing & Theming
  • CSS Utilities

ViUR Components

  • Alert
  • Combobox
  • Pagination
  • Table Wrapper

Actions

  • Button
  • Button Group
  • Copy Button
  • Dropdown
    • Dropdown Item

Forms

  • Checkbox
  • Checkbox Group
  • Color Picker
  • Input
  • Known Date
  • Number Input
  • Radio Group
    • Radio
  • Rating
  • Select
    • Option
  • Slider
  • Switch
  • Textarea
  • Time Input
  • Data Grid Planned A Web Awesome Kickstarter stretch goal!

Layout

  • Accordion
    • Accordion Item
  • Card
  • Details
  • Dialog
  • Divider
  • Drawer
  • Page
  • Scroller
  • Split Panel

Navigation

  • Breadcrumb
    • Breadcrumb Item
  • Tab Group
    • Tab
    • Tab Panel
  • Tree
    • Tree Item

Feedback

  • Badge
  • Callout
  • Progress Bar
  • Progress Ring
  • Skeleton
  • Spinner
  • Tag
  • Tooltip

Media

  • Animated Image
  • Avatar
  • Carousel
    • Carousel Item
  • Comparison
  • Icon
  • Markdown
  • QR Code
  • Zoomable Frame

Data Viz

  • Advanced Usage

Helpers

  • Animation
  • Format Bytes
  • Format Date
  • Format Number
  • Include
  • Intersection Observer
  • Mutation Observer
  • Popover
  • Popup
  • Random Content
  • Relative Time
  • Resize Observer

LLMs

  • Why Use It?
  • Accessing the File
  • How to Use It
  • Claude Projects
  • Cursor
  • VS Code + Copilot
  • VS Code + Claude Code
  • Other AI Tools
  • What's Included
  • llms.txt vs Agent Skills
  • Feedback
On This Page...
  • Why Use It?
  • Accessing the File
  • How to Use It
  • Claude Projects
  • Cursor
  • VS Code + Copilot
  • VS Code + Claude Code
  • Other AI Tools
  • What's Included
  • llms.txt vs Agent Skills
  • Feedback
Using Web Awesome with AI LLMs

LLMs

The llms.txt specification is a proposed standard for providing information to large language models (LLMs) in a format they can easily consume. It's like a robots.txt, but instead of telling search engines how to crawl your site, it helps AI assistants understand your project.

Web Awesome publishes an llms.txt file that provides AI tools with structured information about our components, including their APIs, properties, events, methods, slots, and CSS custom properties.

This feature is experimental! The llms.txt format and its contents may change as we refine the output based on feedback and evolving AI capabilities.

Why Use It?

Link to This Section

When working with AI coding assistants like Claude, ChatGPT, Copilot, or Cursor, you can reference the llms.txt file to give the AI context about Web Awesome components. This can lead to more accurate code suggestions and fewer hallucinations when the AI generates Web Awesome code.

Accessing the File

Link to This Section

The llms.txt file is available in every Web Awesome build at:

/dist/llms.txt
/dist-cdn/llms.txt

You can also find it in your node_modules directory if you've installed Web Awesome via npm:

node_modules/@awesome.me/webawesome/dist/llms.txt

How to Use It

Link to This Section

How you reference the file depends on which AI tool you're using.

Claude Projects

Link to This Section

If you're using Claude Projects, you can add the llms.txt URL to your project knowledge. Claude will use this context when helping you write Web Awesome code.

Cursor

Link to This Section

In Cursor, you can add the file to your project's documentation sources via Cursor Settings > Features > Docs. You can also reference the file directly in chat using @Docs after adding it, or paste the content into the chat context.

VS Code + Copilot

Link to This Section

GitHub Copilot in VS Code doesn't have a built-in way to reference external documentation files, but you can:

  1. Copy the llms.txt file into your project's root directory
  2. Open it in a VS Code tab (Copilot considers open files as context)
  3. Use #file in Copilot Chat to explicitly reference it (e.g., #file:llms.txt how do I create a dialog?)

VS Code + Claude Code

Link to This Section

If you're using the Claude Code extension, you can reference the file directly by path:

@node_modules/@awesome.me/webawesome/dist/llms.txt

Or simply ask Claude to read it — Claude Code can access files in your project directly.

Other AI Tools

Link to This Section

Most AI coding assistants allow you to provide context through URLs, file uploads, or direct pasting. Check your tool's documentation for the best way to include external references.

What's Included

Link to This Section

The llms.txt file contains:

  • An overview of Web Awesome and its capabilities
  • Links to documentation sections
  • A complete list of all components with descriptions
  • Detailed API reference for each component including:
    • Slots
    • Properties and their types
    • Methods and their signatures
    • Events
    • CSS custom properties
    • CSS parts
    • CSS states

llms.txt vs Agent Skills

Link to This Section

Web Awesome provides both an Agent Skill and an llms.txt file. Here's when to use each:

Feature llms.txt Agent Skill
Format Single text file Directory with multiple markdown files
Best for Quick context, simple queries Deep integration, complex tasks
Context usage Loads everything at once Progressive disclosure (loads as needed)
Supported by Most AI tools Tools supporting agentskills.io spec

If your AI tool supports Agent Skills, we recommend using the skill for better context efficiency. Otherwise, the llms.txt file is a great option that works with nearly any AI tool.

Feedback

Link to This Section

Since this is experimental, we'd love to hear how it works for you! If you find issues with the generated content or have suggestions for improvement, please open an issue on GitHub.

Go Make Something Awesome
Version 0.17.0 © Fonticons, Inc.
  • Terms
  • Privacy
  • Refunds
  • Core License
  • Pro License

Quick Links

  • Components
  • CSS Utilities
  • Theming
  • Using with AI
  • Changelog
  • Help & Support

Recent Searches

    D'oh! No results for “”

    Suggest on GitHub Ask on Discord
    Navigate Select
    Close Esc