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
- Put a script tag similar to
this
<script type="module" src="https://cdn.jsdelivr.net/npm/@goatui/components@2.0.0-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@2.0.0-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@2.0.0-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>- 🟢 ready (feature complete for now)
- 🟡 beta (changes possible, not feature complete)
- 🔴 not ready (unstyled / no functions)
- 🔵 planned (created, but empty files)
| Name | Component | State |
|---|---|---|
| Color picker | goat-colorpicker | 🔴 |
| Checkbox | goat-checkbox | 🟢 |
| Date picker | goat-date-picker | 🟡 |
| Date Time picker | goat-datetime-picker | 🔴 |
| Filepicker | goat-filepicker | 🔴 |
| Input | goat-input | 🟢 |
| Month picker | goat-month-picker | 🔴 |
| Number | goat-number | 🟢 |
| Select | goat-select | 🟢 |
| Textarea | goat-textarea | 🟢 |
| Time picker | goat-time-picker | 🟡 |
| Week picker | goat-week-picker | 🔴 |
| 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 | 🔴 |
| Code Editor | goat-card-editor | 🟢 |
| Code Highlighter | goat-card-highlighter | 🟢 |
| Column | goat-col | 🔴 |
| Dropdown | goat-dropdown | 🟡 |
| Empty State | goat-empty-state | 🟡 |
| Flow Designer | goat-flow-designer | 🔵 |
| Form Control | goat-form-control | 🟡 |
| Grid | goat-grid | 🔴 |
| Group | goat-group | 🔴 |
| Header | goat-header | 🟢 |
| Icon | goat-icon | 🟢 |
| Link | goat-link | 🟢 |
| Modal | goat-modal | 🟢 |
| Menu | goat-menu | 🟡 |
| Notification | goat-notification | 🟢 |
| Notification Manager | goat-notification-manager | 🟡 |
| Observer | goat-observer | 🔴 |
| Pagination | goat-pagination | 🔴 |
| Progress | goat-progress | 🟢 |
| Radio Group | goat-radiogroup | 🔴 |
| Row | goat-row | 🔴 |
| 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 | 🟢 |
| Tree View | goat-tree-view | 🟡 |
| Toast | goat-toast | 🟢 |
| Toggle | goat-toggle | 🟢 |
| Tooltip | goat-tooltip | 🟢 |
| Name | Component | State |
|---|---|---|
| Doughnut Chart | goat-chart-doughnut | 🟢 |
| Pie Chart | goat-chart-pie | 🟢 |