{"id":20873721,"url":"https://github.com/dbtek/tailwind-elements","last_synced_at":"2025-05-12T13:34:22.895Z","repository":{"id":57141177,"uuid":"123779819","full_name":"dbtek/tailwind-elements","owner":"dbtek","description":"Reusable DOM elements built with Tailwind CSS","archived":false,"fork":false,"pushed_at":"2018-04-24T12:12:42.000Z","size":19,"stargazers_count":5,"open_issues_count":0,"forks_count":0,"subscribers_count":4,"default_branch":"master","last_synced_at":"2024-11-12T20:24:18.259Z","etag":null,"topics":["choo","components","css","functional","nanocomponent","tailwindcss","template-literals"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/dbtek.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-03-04T10:54:46.000Z","updated_at":"2022-04-19T10:23:44.000Z","dependencies_parsed_at":"2022-09-05T04:00:14.548Z","dependency_job_id":null,"html_url":"https://github.com/dbtek/tailwind-elements","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dbtek%2Ftailwind-elements","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dbtek%2Ftailwind-elements/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dbtek%2Ftailwind-elements/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dbtek%2Ftailwind-elements/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dbtek","download_url":"https://codeload.github.com/dbtek/tailwind-elements/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":225138172,"owners_count":17426734,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["choo","components","css","functional","nanocomponent","tailwindcss","template-literals"],"created_at":"2024-11-18T06:26:56.839Z","updated_at":"2024-11-18T06:26:57.486Z","avatar_url":"https://github.com/dbtek.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Tailwind Elements\n[![npm version][2]][3] [![build status][4]][5]\n[![downloads][8]][9] [![js-standard-style][10]][11]\n\nDOM elements built with [Tailwind CSS](https://tailwindcss.com) using [bel](/schama/bel). Work in progress.\n\n### Install\n```\n$ npm i tailwind-elements\n// or\n$ yarn add tailwind-elements\n```\n\n## Elements\n\nUse elements by importing them accordingly like `require('tailwind-elements/$element')`.\n\n### header(title, subtitle)\nSimple title with optional subtitle.\n\n### input(attributes)\nForm input element.  \n\n**Params**\n- attributes.type: {String} Input type.  \n- attributes.name: {String} Input name.  \n- attributes.placeholder: {String} Input placeholder.  \n- attributes.value: Input value.  \n- attributes.onChange: {Function} Input value change listener.  \n- attributes.required: {Boolean} Whether input is required or not.  \n- attributes.className: {String} Additional css classes.  \n\n### textarea(attributes)\nForm textarea element.  \n\n**Params**\n- attributes.name: {String} Input name.  \n- attributes.placeholder: {String} Input placeholder.  \n- attributes.value: Input value.  \n- attributes.onChange: {Function} Input value change listener.  \n- attributes.className: {String} Additional css classes.  \n\n### select(attributes)\nSelect element.\n\n**Params**  \n- attributes.name: {String} Input name.  \n- attributes.value: Input value.  \n- attributes.onChange: {Function} Input value change listener.  \n- attributes.className: {String} Additional css classes.  \n\n### inputContainer(label, input)\nForm elements wrapping element.\n\n**Params**  \n- label: {String} Input label.  \n- input: {HTMLElement} input element.\n\n**Example**  \n```js\nvar inputContainer = require('tailwind-elements/input-container')\nvar input = require('tailwind-elements/input')\n\ninputContainer('First Name', input({\n  name: 'first-name',\n  required: true\n}))\n```\n\n### navbar(props)\nNavigation bar. Please see [navigation example](https://tailwindcss.com/docs/examples/navigation)\n\n**Params**  \n- props.brand: {String | HTMLElement} Branding text / element.\n- props.items: {Array} Array of navigation items.\n  - item.label: {String} Nav label.\n  - item.href: {String} Nav link.\n- props.loginItem: {String | HTMLElement} Login info text / element.\n\n\n### steps(items)\nProgress steps element.\n\n**Params**  \n- items: {Array} Step items.\n  - item.label: {String | HTMLElement} Step label.\n  - item.href: {String} Step link.\n  - item.onClick: {Function} Click handler for the step.\n  - item.active: {Boolean} Whether the step is active or not.\n\n### Dropdown\nDropdown component. Based on [nanocomponent](https://github.com/choojs/nanocomponent).\n\n**Params**\n- props.label: {String | HTMLElement} Dropdown label.\n- props.className: {String} Additional css classes.  \n- props.items: [Array] Array of dropdown items.\n\n### dropdownMenuItem(props)\nDropdown menu item element.  \n**Params**  \n- props.label: {String | HTMLElement} Menu item label.\n- props.onClick: {Function} Click handler for the menu item.\n- item.href: {String} Menu item link.\n\n**Example**\n```js\nvar Dropdown = require('tailwind-elements/Dropdown')\nvar dropdownMenuItem = require('tailwind-elements/dropdown-menu-item')\n\nnew Dropdown({\n  label: User,\n  items: [\n    dropdownMenuItem({ label: 'My Account', href: '/account/profile' }),\n    dropdownMenuItem({ label: 'Logout', href: '/account/logout' })\n  ]\n})\n```\n\n## License\nMIT\n\n## Author\nIsmail Demirbilek - [@dbtek](https://twitter.com/dbtek)\n\n\n[0]: https://img.shields.io/badge/stability-experimental-orange.svg?style=flat-square\n[1]: https://nodejs.org/api/documentation.html#documentation_stability_index\n[2]: https://img.shields.io/npm/v/tailwind-elements.svg?style=flat-square\n[3]: https://npmjs.org/package/tailwind-elements\n[4]: https://img.shields.io/travis/dbtek/tailwind-elements/master.svg?style=flat-square\n[5]: https://travis-ci.org/dbtek/tailwind-elements\n[6]: https://img.shields.io/codecov/c/github/dbtek/tailwind-elements/master.svg?style=flat-square\n[7]: https://codecov.io/github/dbtek/tailwind-elements\n[8]: http://img.shields.io/npm/dm/tailwind-elements.svg?style=flat-square\n[9]: https://npmjs.org/package/tailwind-elements\n[10]: https://img.shields.io/badge/code%20style-standard-brightgreen.svg?style=flat-square\n[11]: https://github.com/feross/standard","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdbtek%2Ftailwind-elements","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdbtek%2Ftailwind-elements","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdbtek%2Ftailwind-elements/lists"}