Migration guide

Information on migrating from Rivet 1 to Rivet 2

npm

The rivet-uits npm package is deprecated.

To use Rivet 2, uninstall rivet-uits and install the rivet-core package instead:

npm uninstall rivet-uits

npm install rivet-core@latest

Hosted assets

Rivet 2 assets are not hosted on assets.uits.iu.edu.

Instead, Rivet 2 assets are hosted on the unpkg CDN:

https://unpkg.com/rivet-core@latest/css/rivet.min.css

https://unpkg.com/rivet-core@latest/js/rivet.min.js

Components

The table below lists all Rivet 1 components and their Rivet 2 equivalents. For components that do not have a direct equivalent in Rivet 2, similar components are suggested.

Some components were deprecated in Rivet 1 and do not appear in Rivet 2. However, example markup is provided for recreating deprecated components if needed using Rivet 2 utility classes.

Rivet component migration chart

Rivet 1	Rivet 2
Alert	Alert
Badge	Badge
Box	Card; Border, spacing, and color utilities
Breadcrumb	Breadcrumbs
Button	Button
Checkboxes	Checkbox
Dropdown	Dropdown
File input	File input
Footer	Footer
Grid	Grid
Header	Header
Input group	Input group
Links	Call to action; Link hub; Sidenav; Typography utilities
Lists	List
Loading indicator	Loading indicator
Media object	Flex utilities
Menu	Subnav
Modal	Dialog
Pagination	Pagination
Panel	Card; Link hub; Border, spacing, and color utilities
Radio buttons	Radio input
Segmented button	Button
Select element	Select input
Step indicator	Step indicator
Tabs	Tabs
Text inputs	Text input; Textarea
Timeline	Timeline
Add-on: Collapsible	Accordion; Disclosure
Add-on: Datepicker	Datepicker (forthcoming)
Add-on: Shell	Layouts
Add-on: Switch	Switch

Add-ons

Rivet 1 add-ons can continue to be used in Rivet 2 projects until replacement components are made available.

Utilities

All utilities available in Rivet 1 are available in Rivet 2.

Rivet 2 also introduces several new utility classes. See the Rivet 2 utilities documentation for more.