Checkout the complete documentation over here -> https://goatui.com
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.
Getting Started
Script tag
- Put a script tag similar to
this
<script type="module" src="https://unpkg.com/@goatui/components@0.9.9/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>
<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://unpkg.com/@goatui/components@0.9.9/dist/goatui/assets/styles/theme.css -->
<!--link rel="stylesheet" href="/custom-theme.css"></link-->
<script type='module' src='https://unpkg.com/@goatui/components@0.9.9/dist/goatui/goatui.esm.js'></script>
</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 |
---|---|---|
Avatar | goat-avatar | π’ |
Badge | goat-badge | π‘ |
Breadcrumb | goat-breadcrumb | π’ |
Button | goat-button | π’ |
Button Group | goat-button-group | π’ |
Card | goat-card | π‘ |
Card Select | goat-cardselect | π΅ |
Checkbox | goat-checkbox | π’ |
Chip | goat-chip | π΅ |
Code Editor | goat-card-editor | π’ |
Code Highlighter | goat-card-highlighter | π’ |
Column | goat-col | π΅ |
Color picker | goat-colorpicker | π΅ |
Date picker | goat-datepicker | π΅ |
Date Time picker | goat-datetimepicker | π΅ |
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-monthpicker | π΅ |
Notification | goat-notification | π’ |
Notification Manager | goat-notification-manager | π‘ |
Observer | goat-observer | π΅ |
Pagination | goat-pagination | π΅ |
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 | π‘ |
Table head | goat-tablehead | π΅ |
Table row | goat-tablerow | π΅ |
Tabs | goat-tabs | π΅ |
Text | goat-text | π‘ |
Textarea | goat-textarea | π’ |
Time picker | goat-timepicker | π΅ |
Toast | goat-toast | π’ |
Toggle | goat-toggle | π΅ |
Tooltip | goat-tooltip | π΅ |
Week picker | goat-weekpicker | π΅ |