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

Using Web Awesome with AI

  • AI-Ready Documentation
  • AI Policy
  • Human-Led, AI-Assisted
On This Page...
  • AI-Ready Documentation
  • AI Policy
  • Human-Led, AI-Assisted

Using Web Awesome with AI

Web Awesome publishes machine-readable documentation so AI coding assistants can understand its components and help you write better code. Whether you're using Claude, ChatGPT, Copilot, Cursor, or another tool, you can give it context about Web Awesome's APIs, properties, events, slots, and more.

AI-Ready Documentation

Link to This Section

We provide two formats for giving AI tools context about Web Awesome. Both formats are generated automatically with every Web Awesome build and are available in your node_modules directory after installing via npm.

Agent Skills Recommended

A structured directory of markdown files that AI tools load progressively, fetching only the documentation relevant to the current task. The best option for tools that support it, such as Claude Code.

LLMs.txt

A single text file containing the full API reference for every component. Works with nearly any AI tool that accepts file uploads, URLs, or pasted context.

AI Policy

Link to This Section

We're a small team, and like most people building things these days, we use AI tools regularly. They help us move faster: exploring ideas, writing boilerplate, catching edge cases, and getting more done in less time.

But Web Awesome is an open-source library that a lot of people rely on, so we want to be clear about how we use AI.

Human-Led, AI-Assisted

Everything in Web Awesome is built and owned by humans. AI is a capable assistant, but it never gets the final say. The humans on our team are always responsible for:

  • The original ideas and vision
  • The architecture and design decisions
  • The critical thinking about what's right for the library and its users
  • The review, testing, and polish at the end

No component, page, or feature ever ships as pure AI output. There's always substantial human direction, judgment, and final approval behind it.

This lets us ship better work more quickly, without giving up the human judgment that production-ready software demands.

Human ideas. Human architecture. Human verification. AI just helps us build what we were going to build anyway… only faster.

The Web Awesome Team

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