@goatui/components
v1.39.0
Published
A light weight web component library
Downloads
4,828
Maintainers
shivajivarmaReadme
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/[email protected]/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/[email protected]/dist/goatui/assets/styles/theme.css -->
<!--link rel="stylesheet" href="/custom-theme.css"></link-->
<script type='module' src='https://cdn.jsdelivr.net/npm/@goatui/[email protected]/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] (https://goatui.com/components/tooltip) | goat-tooltip | 🟢 | | Week picker | goat-week-picker | 🔵 |