{ "name": "farvist", "version": "1.1.0", "description": "A lightweight (~20 KB) glassmorphism CSS framework — frosted surfaces, neon glow, gradients, 34 components and dark/light themes. A drop-in alternative to Bootstrap and Tailwind.", "homepage": "https://farvist.com", "license": "MIT", "install": { "cdn": "https://cdn.jsdelivr.net/npm/farvist/dist/farvist.min.css", "js": "https://cdn.jsdelivr.net/npm/farvist/assets/farvist.js", "npm": "npm i farvist" }, "totals": { "classes": 1976, "components": 34, "icons": 55, "recipes": 7 }, "conventions": { "theming": "Dark by default. Add data-theme=\"light\" to to switch at runtime. Colors are CSS custom properties: --fv-primary, --fv-primary-text (readable on dark), --fv-body-color, --fv-muted, --fv-glass-bg, --fv-gradient-primary, etc.", "colors": [ "primary", "secondary", "success", "danger", "warning", "info", "accent", "light", "dark" ], "breakpoints": { "sm": "576px", "md": "768px", "lg": "992px", "xl": "1200px" }, "responsive": "Insert the breakpoint after the prefix: col-md-6, d-lg-flex, text-md-center.", "spacingScale": "0,1,2,3,4,5,6,7 → 0, .25, .5, .75, 1, 1.5, 2, 3rem (e.g. p-4 = 1rem, gap-3 = .75rem).", "notes": "For glass to read, give the page a rich background (e.g. body class=\"bg-mesh-aurora\"). Utilities win the cascade (no !important needed by you).", "js": { "include": " — auto-runs enhance() on load.", "attributes": { "data-fv-open=\"#id\"": "open a ", "data-fv-dismiss": "close the nearest dialog", "data-fv-tab=\"#panelId\"": "switch tabs (arrow-key nav added automatically)", "data-fv-theme-toggle": "flip light/dark theme", "data-fv-nav-toggle": "toggle the collapsed mobile navbar", "data-tooltip=\"text\"": "CSS tooltip; text is exposed to assistive tech" }, "api": "Farvist.toast({title, message, variant:'success'|'danger'|…, timeout}); Farvist.enhance() — call after injecting new DOM so ARIA is re-wired." } }, "utilities": { "col-*": { "desc": "grid columns", "count": 74, "sample": [ "col", "col-1", "col-10", "col-11", "col-12", "col-2", "col-3", "col-4", "col-5", "col-6", "col-7", "col-8", "col-9", "col-auto" ] }, "offset-*": { "desc": "column offsets", "count": 72, "sample": [ "offset-0", "offset-1", "offset-10", "offset-11", "offset-2", "offset-3", "offset-4", "offset-5", "offset-6", "offset-7", "offset-8", "offset-9", "offset-lg-0", "offset-lg-1" ] }, "g-*": { "desc": "grid gutters", "count": 9, "sample": [ "g-0", "g-1", "g-2", "g-3", "g-4", "g-5", "g-6", "g-7", "g-8" ] }, "gx-*": { "desc": "column gutter", "count": 9, "sample": [ "gx-0", "gx-1", "gx-2", "gx-3", "gx-4", "gx-5", "gx-6", "gx-7", "gx-8" ] }, "gy-*": { "desc": "row gutter", "count": 9, "sample": [ "gy-0", "gy-1", "gy-2", "gy-3", "gy-4", "gy-5", "gy-6", "gy-7", "gy-8" ] }, "m-*": { "desc": "margin", "count": 108, "sample": [ "m-0", "m-1", "m-2", "m-3", "m-4", "m-5", "m-6", "m-7", "m-8", "m-auto", "m-lg-0", "m-lg-1", "m-lg-2", "m-lg-3" ] }, "mt-*": { "desc": "margin-top", "count": 108, "sample": [ "mt-0", "mt-1", "mt-2", "mt-3", "mt-4", "mt-5", "mt-6", "mt-7", "mt-8", "mt-auto", "mt-lg-0", "mt-lg-1", "mt-lg-2", "mt-lg-3" ] }, "mb-*": { "desc": "margin-bottom", "count": 108, "sample": [ "mb-0", "mb-1", "mb-2", "mb-3", "mb-4", "mb-5", "mb-6", "mb-7", "mb-8", "mb-auto", "mb-lg-0", "mb-lg-1", "mb-lg-2", "mb-lg-3" ] }, "ms-*": { "desc": "margin-start", "count": 108, "sample": [ "ms-0", "ms-1", "ms-2", "ms-3", "ms-4", "ms-5", "ms-6", "ms-7", "ms-8", "ms-auto", "ms-lg-0", "ms-lg-1", "ms-lg-2", "ms-lg-3" ] }, "me-*": { "desc": "margin-end", "count": 108, "sample": [ "me-0", "me-1", "me-2", "me-3", "me-4", "me-5", "me-6", "me-7", "me-8", "me-auto", "me-lg-0", "me-lg-1", "me-lg-2", "me-lg-3" ] }, "mx-*": { "desc": "margin-x", "count": 108, "sample": [ "mx-0", "mx-1", "mx-2", "mx-3", "mx-4", "mx-5", "mx-6", "mx-7", "mx-8", "mx-auto", "mx-lg-0", "mx-lg-1", "mx-lg-2", "mx-lg-3" ] }, "my-*": { "desc": "margin-y", "count": 54, "sample": [ "my-0", "my-1", "my-2", "my-3", "my-4", "my-5", "my-6", "my-7", "my-8", "my-lg-0", "my-lg-1", "my-lg-2", "my-lg-3", "my-lg-4" ] }, "p-*": { "desc": "padding", "count": 54, "sample": [ "p-0", "p-1", "p-2", "p-3", "p-4", "p-5", "p-6", "p-7", "p-8", "p-lg-0", "p-lg-1", "p-lg-2", "p-lg-3", "p-lg-4" ] }, "pt-*": { "desc": "padding-top", "count": 54, "sample": [ "pt-0", "pt-1", "pt-2", "pt-3", "pt-4", "pt-5", "pt-6", "pt-7", "pt-8", "pt-lg-0", "pt-lg-1", "pt-lg-2", "pt-lg-3", "pt-lg-4" ] }, "pb-*": { "desc": "padding-bottom", "count": 54, "sample": [ "pb-0", "pb-1", "pb-2", "pb-3", "pb-4", "pb-5", "pb-6", "pb-7", "pb-8", "pb-lg-0", "pb-lg-1", "pb-lg-2", "pb-lg-3", "pb-lg-4" ] }, "ps-*": { "desc": "padding-start", "count": 54, "sample": [ "ps-0", "ps-1", "ps-2", "ps-3", "ps-4", "ps-5", "ps-6", "ps-7", "ps-8", "ps-lg-0", "ps-lg-1", "ps-lg-2", "ps-lg-3", "ps-lg-4" ] }, "pe-*": { "desc": "padding-end", "count": 56, "sample": [ "pe-0", "pe-1", "pe-2", "pe-3", "pe-4", "pe-5", "pe-6", "pe-7", "pe-8", "pe-auto", "pe-lg-0", "pe-lg-1", "pe-lg-2", "pe-lg-3" ] }, "px-*": { "desc": "padding-x", "count": 54, "sample": [ "px-0", "px-1", "px-2", "px-3", "px-4", "px-5", "px-6", "px-7", "px-8", "px-lg-0", "px-lg-1", "px-lg-2", "px-lg-3", "px-lg-4" ] }, "py-*": { "desc": "padding-y", "count": 54, "sample": [ "py-0", "py-1", "py-2", "py-3", "py-4", "py-5", "py-6", "py-7", "py-8", "py-lg-0", "py-lg-1", "py-lg-2", "py-lg-3", "py-lg-4" ] }, "d-*": { "desc": "display", "count": 48, "sample": [ "d-block", "d-flex", "d-grid", "d-inline", "d-inline-block", "d-inline-flex", "d-lg-block", "d-lg-flex", "d-lg-grid", "d-lg-inline", "d-lg-inline-block", "d-lg-inline-flex", "d-lg-none", "d-lg-table" ] }, "flex-*": { "desc": "flex", "count": 66, "sample": [ "flex-column", "flex-column-reverse", "flex-fill", "flex-grow-0", "flex-grow-1", "flex-lg-column", "flex-lg-column-reverse", "flex-lg-fill", "flex-lg-grow-0", "flex-lg-grow-1", "flex-lg-nowrap", "flex-lg-row", "flex-lg-row-reverse", "flex-lg-shrink-0" ] }, "justify-*": { "desc": "justify-content", "count": 36, "sample": [ "justify-content-around", "justify-content-between", "justify-content-center", "justify-content-end", "justify-content-evenly", "justify-content-lg-around", "justify-content-lg-between", "justify-content-lg-center", "justify-content-lg-end", "justify-content-lg-evenly", "justify-content-lg-start", "justify-content-md-around", "justify-content-md-between", "justify-content-md-center" ] }, "align-*": { "desc": "align-items", "count": 60, "sample": [ "align-items-baseline", "align-items-center", "align-items-end", "align-items-lg-baseline", "align-items-lg-center", "align-items-lg-end", "align-items-lg-start", "align-items-lg-stretch", "align-items-md-baseline", "align-items-md-center", "align-items-md-end", "align-items-md-start", "align-items-md-stretch", "align-items-sm-baseline" ] }, "gap-*": { "desc": "gap", "count": 9, "sample": [ "gap-0", "gap-1", "gap-2", "gap-3", "gap-4", "gap-5", "gap-6", "gap-7", "gap-8" ] }, "text-*": { "desc": "text color / alignment", "count": 54, "sample": [ "text-accent", "text-body", "text-break", "text-capitalize", "text-center", "text-danger", "text-dark", "text-decoration-none", "text-decoration-underline", "text-end", "text-glow", "text-gradient", "text-gradient-accent", "text-gradient-aurora" ] }, "bg-*": { "desc": "background (colors, gradients, meshes, patterns, spotlights)", "count": 51, "sample": [ "bg-accent", "bg-animated", "bg-body", "bg-danger", "bg-dark", "bg-dots", "bg-drift", "bg-fade", "bg-fade-b", "bg-fade-x", "bg-gradient-accent", "bg-gradient-aurora", "bg-gradient-primary", "bg-gradient-sunset" ] }, "fs-*": { "desc": "font-size", "count": 9, "sample": [ "fs-2xl", "fs-3xl", "fs-4xl", "fs-5xl", "fs-base", "fs-lg", "fs-sm", "fs-xl", "fs-xs" ] }, "fw-*": { "desc": "font-weight", "count": 6, "sample": [ "fw-black", "fw-bold", "fw-light", "fw-medium", "fw-normal", "fw-semibold" ] }, "lh-*": { "desc": "line-height", "count": 3, "sample": [ "lh-1", "lh-base", "lh-lg" ] }, "rounded*": { "desc": "border-radius", "count": 11, "sample": [ "rounded", "rounded-0", "rounded-2xl", "rounded-circle", "rounded-full", "rounded-lg", "rounded-md", "rounded-none", "rounded-pill", "rounded-sm", "rounded-xl" ] }, "border*": { "desc": "border", "count": 15, "sample": [ "border", "border-0", "border-accent", "border-bottom", "border-danger", "border-dark", "border-end", "border-info", "border-light", "border-primary", "border-secondary", "border-start", "border-success", "border-top" ] }, "shadow-*": { "desc": "box-shadow", "count": 5, "sample": [ "shadow-lg", "shadow-md", "shadow-none", "shadow-sm", "shadow-xl" ] }, "glow*": { "desc": "neon glow", "count": 8, "sample": [ "glow", "glow-accent", "glow-danger", "glow-info", "glow-none", "glow-primary", "glow-success", "glow-warning" ] }, "glass*": { "desc": "glass surface", "count": 3, "sample": [ "glass", "glass-flat", "glass-strong" ] }, "w-*": { "desc": "width", "count": 5, "sample": [ "w-100", "w-25", "w-50", "w-75", "w-auto" ] }, "h-*": { "desc": "height", "count": 5, "sample": [ "h-100", "h-25", "h-50", "h-75", "h-auto" ] }, "mw-*": { "desc": "max-width", "count": 1, "sample": [ "mw-100" ] }, "mh-*": { "desc": "max-height", "count": 1, "sample": [ "mh-100" ] }, "opacity-*": { "desc": "opacity", "count": 11, "sample": [ "opacity-0", "opacity-10", "opacity-100", "opacity-20", "opacity-30", "opacity-40", "opacity-50", "opacity-60", "opacity-70", "opacity-80", "opacity-90" ] }, "overflow-*": { "desc": "overflow", "count": 4, "sample": [ "overflow-auto", "overflow-hidden", "overflow-scroll", "overflow-visible" ] }, "position-*": { "desc": "position", "count": 5, "sample": [ "position-absolute", "position-fixed", "position-relative", "position-static", "position-sticky" ] }, "z-*": { "desc": "z-index", "count": 5, "sample": [ "z-dropdown", "z-fixed", "z-modal", "z-sticky", "z-tooltip" ] }, "hover-*": { "desc": "hover effects", "count": 1, "sample": [ "hover-lift" ] }, "animate-*": { "desc": "animation", "count": 1, "sample": [ "animate-float" ] } }, "components": [ { "name": "buttons", "classes": [ "btn", "btn-{color}", "btn-outline-{color}", "btn-gradient-{primary|sunset|aurora}", "btn-glass", "btn-link", "btn-sm", "btn-lg", "btn-block" ], "example": "" }, { "name": "badges", "classes": [ "badge", "badge-{color}", "badge-soft-{color}", "badge-pill" ], "example": "New" }, { "name": "alerts", "classes": [ "alert", "alert-{color}", "alert-heading" ], "example": "
Heads up.
" }, { "name": "cards", "classes": [ "card", "card-body", "card-header", "card-footer", "card-title", "card-text", "card-glow", "card-solid", "hover-lift" ], "example": "

Title

" }, { "name": "chips", "classes": [ "chip", "chip-{color}", "chip-close" ], "example": "Design " }, { "name": "avatar", "classes": [ "avatar", "avatar-{sm|lg|xl}", "avatar-{color}", "avatar-status", "avatar-group" ], "example": "AL" }, { "name": "forms", "classes": [ "form-control", "form-label", "form-text", "form-select", "form-check", "is-invalid", "invalid-feedback", "input-group", "input-group-text" ], "example": "" }, { "name": "range", "classes": [ "form-range" ], "example": "" }, { "name": "switch", "classes": [ "switch" ], "example": "" }, { "name": "table", "classes": [ "table", "table-hover", "table-responsive" ], "example": "
…
" }, { "name": "navbar", "classes": [ "navbar", "navbar-brand", "navbar-nav", "nav-link", "navbar-toggle (data-fv-nav-toggle)", "sticky-top" ], "example": "" }, { "name": "dropdown", "classes": [ "dropdown (
)", "dropdown-menu", "dropdown-menu-end", "dropdown-item", "dropdown-divider" ], "example": "
Menu
…
" }, { "name": "modal", "classes": [ "modal ()", "modal-header", "modal-title", "modal-body", "modal-footer", "modal-close" ], "example": "…" }, { "name": "tabs", "classes": [ "tabs", "tab (data-fv-tab=\"#id\")", "tab-panel" ], "example": "
…
" }, { "name": "accordion", "classes": [ "accordion (
)", "accordion-item", "accordion-header", "accordion-body" ], "example": "
Q
A
" }, { "name": "toast", "classes": [ "(JS only)" ], "example": "Farvist.toast({ title: 'Saved', variant: 'success' })" }, { "name": "tooltip", "classes": [ "data-tooltip=\"text\"" ], "example": "" }, { "name": "progress", "classes": [ "progress", "progress-bar", "progress-striped", "progress-animated" ], "example": "
" }, { "name": "spinner", "classes": [ "spinner", "spinner-{sm|lg}", "spinner-{color}", "spinner-dots" ], "example": "" }, { "name": "skeleton", "classes": [ "skeleton", "skeleton-text", "skeleton-circle" ], "example": "
" }, { "name": "breadcrumb", "classes": [ "breadcrumb", "breadcrumb-item", "active (gets aria-current)" ], "example": "
  1. Now
" }, { "name": "pagination", "classes": [ "pagination", "page-item", "page-link", "active" ], "example": "" }, { "name": "stepper", "classes": [ "stepper", "step", "step-dot", "step-label", "is-active", "is-done" ], "example": "
  1. 1Plan
" }, { "name": "timeline", "classes": [ "timeline", "timeline-item", "timeline-marker", "timeline-{color}", "timeline-title", "timeline-time" ], "example": "
  • …
" }, { "name": "segmented", "classes": [ "segmented (radio group, no JS)" ], "example": "
" }, { "name": "rating", "classes": [ "rating", "rating-empty" ], "example": "★★★★☆" }, { "name": "stat", "classes": [ "stat-value", "stat-label" ], "example": "
8.4k
Users
" }, { "name": "empty-state", "classes": [ "empty-state", "empty-state-icon" ], "example": "
📭

Nothing here yet.

" }, { "name": "list-group", "classes": [ "list-group", "list-group-item" ], "example": "
  • Item
" }, { "name": "callout", "classes": [ "callout", "callout-{color}" ], "example": "
Note.
" }, { "name": "backgrounds", "classes": [ "bg-mesh-{aurora|sunset|ocean|nebula}", "bg-grid", "bg-dots", "bg-graph", "bg-spotlight", "bg-spotlight-{color}", "bg-fade", "bg-drift" ], "example": "" }, { "name": "chat (AI)", "classes": [ "chat", "message", "message-out (user)", "message-body", "message-bubble", "message-meta", "typing" ], "example": "
AI
Hi
" }, { "name": "prompt (AI)", "classes": [ "prompt", "prompt-field", "prompt-actions", "prompt-meta" ], "example": "
" }, { "name": "status (AI)", "classes": [ "status", "status-{online|busy|idle|error}" ], "example": "Agent online" } ], "icons": { "usage": " — inherits currentColor; size via font-size or width/height.", "names": [ "i-alert", "i-arrow-left", "i-arrow-right", "i-bell", "i-bot", "i-brain", "i-calendar", "i-check", "i-chevron-down", "i-chevron-right", "i-clock", "i-code", "i-command", "i-copy", "i-cpu", "i-database", "i-download", "i-edit", "i-external", "i-eye", "i-globe", "i-heart", "i-home", "i-image", "i-info", "i-layers", "i-link", "i-lock", "i-mail", "i-menu", "i-message", "i-message-dots", "i-mic", "i-minus", "i-moon", "i-paperclip", "i-plus", "i-refresh", "i-search", "i-send", "i-settings", "i-sparkles", "i-star", "i-stop", "i-sun", "i-terminal", "i-thumbs-down", "i-thumbs-up", "i-trash", "i-upload", "i-user", "i-users", "i-wand", "i-x", "i-zap" ] }, "recipes": [ { "name": "navbar", "html": "" }, { "name": "hero", "html": "

Build something glassy

A one-line tagline that sells it.

Get startedDocs
" }, { "name": "login-card", "html": "

Sign in

" }, { "name": "pricing-3up", "html": "

Free

$0
Start
Popular

Pro

$39
Buy

Team

$149
Buy
" }, { "name": "chat-ui", "html": "
AI
How can I help?
Assistant
You
Scaffold a page.
" }, { "name": "dashboard-shell", "html": "

Overview

8.4k
Users
" }, { "name": "contact-form", "html": "

Get in touch

" } ] }