@eth-optimism/ui-components
This is the ui-components
package, a comprehensive library of components built to speed up development for builders on the Superchain. Built on top of the popular shadcn
framework, this library leverages the power of React, Tailwind CSS, and TypeScript to provide a robust and flexible set of components.
See shadcn/ui docs: https://ui.shadcn.com/docs
Web applications can benefit from components in the ui-components
package with the following prerequisites:
The component library works very similarly to shadcn in the sense that it is not bundled + published to npm, rather users can simply pick the components they’d like to use in their applications via copy + pasting the source code directly.
The source code for the components live under the eth-optimism/ui-components/src/components/ui
directory.
package.json
add this line to your dependencies
"@eth-optimism/ui-components": "*",
global.css
file add this line to the top@import '@eth-optimism/ui-components/src/style.css';
tailwind.config.ts
add this line to the content
'./node_modules/@eth-optimism/ui-components/src/**/*.{ts,tsx}',
@eth-optimism/ui-components/src/style.css
to your styles file.ui
folder with the desired component within the eth-optimism/ui-components/src/components/ui
directory.Documentation for the components in the ui-components
package can be found on our storybook site or by following the shadcn docs directly.
In order to see a live representation of the component library, see our storybook site here:
https://storybook-component-library.netlify.app/
If you need help adding stories to components:
https://storybook.js.org/docs/writing-stories