Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/getrailsui/railsui-stimulus
An ever-growing collection of Stimulus.js components built with Tailwind CSS.
https://github.com/getrailsui/railsui-stimulus
railsui stimulus stimulus-js tailwindcss
Last synced: 2 days ago
JSON representation
An ever-growing collection of Stimulus.js components built with Tailwind CSS.
- Host: GitHub
- URL: https://github.com/getrailsui/railsui-stimulus
- Owner: getrailsui
- Created: 2024-07-04T17:15:59.000Z (5 months ago)
- Default Branch: main
- Last Pushed: 2024-10-01T17:27:36.000Z (about 2 months ago)
- Last Synced: 2024-10-01T17:30:57.426Z (about 2 months ago)
- Topics: railsui, stimulus, stimulus-js, tailwindcss
- Language: HTML
- Homepage: https://getrailsui.github.io/railsui-stimulus/
- Size: 1.16 MB
- Stars: 58
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Rails UI Stimulus.js Components
A 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.
[View demo](https://getrailsui.github.io/railsui-stimulus/)
## Pre-requsities
You'll need to install and configure [Stimulus.js](https://github.com/hotwired/stimulus) in your project before using this package.
## Installation
Add the module `railsui-stimulus`
```bash
npm install railsui-stimulus
```
Import it in your main entrypoint file.
```javascript
// Start Stimulus
import { Application } from '@hotwired/stimulus'
const application = Application.start()
// Import components adhoc.
import {
RailsuiClipboard,
RailsuiCountUp,
RailsuiDateRangePicker,
RailsuiDropdown,
RailsuiModal,
RailsuiRange,
RailsuiSelectAll,
RailsuiTabs,
RailsuiToast,
RailsuiToggle,
RailsuiTooltip,
} from 'railsui-stimulus'
application.register('railsui-clipboard', RailsuiClipboard)
application.register('railsui-count-up', RailsuiCountUp)
application.register('railsui-date-range-picker', RailsuiDateRangePicker)
application.register('railsui-dropdown', RailsuiDropdown)
application.register('railsui-modal', RailsuiModal)
application.register('railsui-range', RailsuiRange)
application.register('railsui-select-all', RailsuiSelectAll)
application.register('railsui-tabs', RailsuiTabs)
application.register('railsui-toast', RailsuiToast)
application.register('railsui-toggle', RailsuiToggle)
application.register('railsui-tooltip', RailsuiTooltip)
```
## Components
- [Clipboard](docs/clipboard.md)
- [Count up](docs/count_up.md)
- [Date range picker](docs/date_range_picker.md)
- [Dropdown](docs/dropdown.md)
- [Modal](docs/modal.md)
- [Range](docs/range.md)
- [Select all](docs/select_all.md)
- [Tab](docs/tab.md)
- [Toast](docs/toast.md)
- [Toggle](docs/toggle.md)
- [Tooltip](docs/tooltip.md)
## Styles
The 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.
## Extending
With Stimulus, you can inherit one component from another. Inherited controllers automatically access the targets defined by their parent class.
If you override the `connect`, `disconnect`, or any other methods from the parent, call `super.method()` so the parent’s functionality is properly executed.
```javascript
import { RailsuiToggle } from 'railsui-stimulus'
export default class CheckboxToggle extends RailsuiToggle {
connect() {
super.connect()
console.log('toggleable', this.toggleableTarget)
}
}
```
## Bugs/Contributing
Run `npx serve` locally to preview all components.
Bug reports and pull requests are welcome! Head to [https://github.com/getrailsui/railsui-stimulus](https://github.com/getrailsui/railsui-stimulus).
## Build Ruby on Rails apps faster than ever
[Rails UI](https://railsui.com) gives Rails developers instance access to professionally designed templates and components.
Leverage breathtaking UI to fast-track your next idea.