@goatui/components NPM

npm

GOAT UI

GOAT UI contains most used web components built using Stencil. So you don't need to include any additional framework dependencies, You can simply import required component js, and right away start using it.

Checkout the complete documentation over here -> https://goatui.com

Getting Started

Script tag

Put a script tag similar to this <script type="module" src="https://cdn.jsdelivr.net/npm/@goatui/components@1.41.0/dist/goatui/goatui.esm.js"></script> in the head of your index.html
Include default font Roboto in the page
Then you can use the element anywhere in your template, JSX, html etc

<!doctype html>
<html lang='en'>
<head>
  <meta charset='utf-8' />
  <meta name='viewport' content='width=device-width' />
  <title>Goat UI Component</title>

  <!-- include your custom theme variable values, view variable names at https://cdn.jsdelivr.net/npm/@goatui/components@1.41.0/dist/goatui/assets/styles/theme.css -->
  <!--link rel="stylesheet" href="/custom-theme.css"></link-->
  <script type='module' src='https://cdn.jsdelivr.net/npm/@goatui/components@1.41.0/dist/goatui/goatui.esm.js'></script>

  <style>
    @import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital@0;1&family=IBM+Plex+Sans+Condensed:ital@0;1&family=IBM+Plex+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&family=IBM+Plex+Serif:ital@0;1&display=swap');

    :root {
      --font-family-base: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;
    }
  </style>
</head>
<body>
<goat-button size='lg' color='primary'>Click me</goat-button>
</body>
</html>

Components

🟢 ready (feature complete for now)
🟡 beta (changes possible, not feature complete)
🔴 not ready (unstyled / no functions)
🔵 planned (created, but empty files)

Name	Component	State
Accordion	goat-accordion	🟢
Avatar	goat-avatar	🟢
Badge	goat-badge	🟢
Breadcrumb	goat-breadcrumb	🟢
Button	goat-button	🟢
Button Group	goat-button-group	🟢
Calendar	goat-calendar	🟢
Card	goat-card	🟡
Card Select	goat-cardselect	🔵
Checkbox	goat-checkbox	🟢
Code Editor	goat-card-editor	🟢
Code Highlighter	goat-card-highlighter	🟢
Column	goat-col	🔵
Color picker	goat-colorpicker	🔵
Date picker	goat-date-picker	🟡
Date Time picker	goat-datetime-picker	🔵
Dialog	goat-dialog	🔵
Dropdown	goat-dropdown	🟡
Empty State	goat-empty-state	🟡
Filepicker	goat-filepicker	🔵
Flow Designer	goat-flow-designer	🔵
Form Control	goat-form-control	🟡
Grid	goat-grid	🔵
Group	goat-group	🔵
Header	goat-header	🟢
Icon	goat-icon	🟢
Input	goat-input	🟢
Link	goat-link	🟢
Modal	goat-modal	🟢
Menu	goat-menu	🟡
Month picker	goat-month-picker	🔵
Notification	goat-notification	🟢
Notification Manager	goat-notification-manager	🟡
Observer	goat-observer	🔵
Pagination	goat-pagination	🔵
Progress	goat-progress	🟢
Radio Group	goat-radiogroup	🔵
Row	goat-row	🔵
Select	goat-select	🟢
Slider	goat-slider	🟡
Spinner	goat-spinner	🟢
Spoiler	goat-spoiler	🔵
Stepper	goat-stepper	🔵
Table	goat-table	🟡
Tabs	goat-tabs	🟢
Tag / Chip	goat-tag	🟢
Text	goat-text	🟢
Textarea	goat-textarea	🟢
Time picker	goat-time-picker	🟡
Tree View	goat-tree-view	🟡
Toast	goat-toast	🟢
Toggle	goat-toggle	🟢
Tooltip	goat-tooltip	🟢
Week picker	goat-week-picker	🔵