{"id":13877142,"url":"https://github.com/getrailsui/railsui-stimulus","last_synced_at":"2025-04-06T12:11:44.760Z","repository":{"id":246847730,"uuid":"824247583","full_name":"getrailsui/railsui-stimulus","owner":"getrailsui","description":"An ever-growing collection of Stimulus.js components built with Tailwind CSS.","archived":false,"fork":false,"pushed_at":"2024-10-01T17:27:36.000Z","size":1220,"stargazers_count":58,"open_issues_count":1,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-10-01T17:30:57.426Z","etag":null,"topics":["railsui","stimulus","stimulus-js","tailwindcss"],"latest_commit_sha":null,"homepage":"https://getrailsui.github.io/railsui-stimulus/","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/getrailsui.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-07-04T17:15:59.000Z","updated_at":"2024-10-01T17:27:39.000Z","dependencies_parsed_at":"2024-07-05T13:26:55.363Z","dependency_job_id":"9689862b-bc33-4f8e-8edf-251d45d38a48","html_url":"https://github.com/getrailsui/railsui-stimulus","commit_stats":null,"previous_names":["getrailsui/railsui-stimulus"],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/getrailsui%2Frailsui-stimulus","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/getrailsui%2Frailsui-stimulus/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/getrailsui%2Frailsui-stimulus/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/getrailsui%2Frailsui-stimulus/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/getrailsui","download_url":"https://codeload.github.com/getrailsui/railsui-stimulus/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247478324,"owners_count":20945266,"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":["railsui","stimulus","stimulus-js","tailwindcss"],"created_at":"2024-08-06T08:00:41.960Z","updated_at":"2025-04-06T12:11:44.743Z","avatar_url":"https://github.com/getrailsui.png","language":"HTML","funding_links":[],"categories":["HTML"],"sub_categories":[],"readme":"![railsui-stimulus-github](https://github.com/user-attachments/assets/eae7a2d1-ac91-4207-aca0-5ce3dea0fc15)\n\n# Rails UI Stimulus.js Components\n\nA suite of Stimulus.js components built with Tailwind CSS for use in [Rails UI](https://railsui.com). You can use these independently of Rails UI.\n\n[View demo](https://getrailsui.github.io/railsui-stimulus/)\n\n## Pre-requsities\n\nYou'll need to install and configure [Stimulus.js](https://github.com/hotwired/stimulus) in your project before using this package.\n\n## Installation\n\nAdd the module `railsui-stimulus`\n\n```bash\nnpm install railsui-stimulus\n```\n\n```bash\nyarn add railsui-stimulus\n```\n\n```bash\nbun add railsui-stimulus\n```\n\nImport it in your main entrypoint file.\n\n```javascript\n// Start Stimulus\nimport { Application } from '@hotwired/stimulus'\n\nconst application = Application.start()\n\n// Import components adhoc.\nimport {\n  RailsuiClipboard,\n  RailsuiCountUp,\n  RailsuiCombobox,\n  RailsuiDateRangePicker,\n  RailsuiDropdown,\n  RailsuiModal,\n  RailsuiRange,\n  RailsuiReadMore,\n  RailsuiSelectAll,\n  RailsuiTabs,\n  RailsuiToast,\n  RailsuiToggle,\n  RailsuiTooltip,\n} from 'railsui-stimulus'\n\napplication.register('railsui-clipboard', RailsuiClipboard)\napplication.register('railsui-count-up', RailsuiCountUp)\napplication.register('railsui-combobox', RailsuiCombobox)\napplication.register('railsui-date-range-picker', RailsuiDateRangePicker)\napplication.register('railsui-dropdown', RailsuiDropdown)\napplication.register('railsui-modal', RailsuiModal)\napplication.register('railsui-range', RailsuiRange)\napplication.register('railsui-read-more', RailsuiReadMore)\napplication.register('railsui-select-all', RailsuiSelectAll)\napplication.register('railsui-tabs', RailsuiTabs)\napplication.register('railsui-toast', RailsuiToast)\napplication.register('railsui-toggle', RailsuiToggle)\napplication.register('railsui-tooltip', RailsuiTooltip)\n```\n\n## Components\n\n- [Clipboard](docs/clipboard.md)\n- [Count up](docs/count_up.md)\n- [Combobox](docs/combobox.md)\n- [Date range picker](docs/date_range_picker.md)\n- [Dropdown](docs/dropdown.md)\n- [Modal](docs/modal.md)\n- [Range](docs/range.md)\n- [Read more](docs/read_more.md)\n- [Select all](docs/select_all.md)\n- [Tab](docs/tab.md)\n- [Toast](docs/toast.md)\n- [Toggle](docs/toggle.md)\n- [Tooltip](docs/tooltip.md)\n\n## Styles\n\nThe examples provided come from some of the UI from Rails UI. You'll want to tweak this to match your needs, or go check out [Rails UI](https://railsui.com) for drop-in UI for your next Ruby on Rails application.\n\n## Extending\n\nWith Stimulus, you can inherit one component from another. Inherited controllers automatically access the targets defined by their parent class.\n\nIf you override the `connect`, `disconnect`, or any other methods from the parent, call `super.method()` so the parent’s functionality is properly executed.\n\n```javascript\nimport { RailsuiToggle } from 'railsui-stimulus'\n\nexport default class CheckboxToggle extends RailsuiToggle {\n  connect() {\n    super.connect()\n    console.log('toggleable', this.toggleableTarget)\n  }\n}\n```\n\n## Bugs/Contributing\n\nRun `npx serve` locally to preview all components.\n\nBug reports and pull requests are welcome! Head to [https://github.com/getrailsui/railsui-stimulus](https://github.com/getrailsui/railsui-stimulus).\n\n## Build Ruby on Rails apps faster than ever\n\n[Rails UI](https://railsui.com) gives Rails developers instance access to professionally designed templates and components.\n\nLeverage breathtaking UI to fast-track your next idea.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgetrailsui%2Frailsui-stimulus","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgetrailsui%2Frailsui-stimulus","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgetrailsui%2Frailsui-stimulus/lists"}