https://github.com/hack4impact-uiuc/bridge
Hack4Impact UIUC Design System + React Components
https://github.com/hack4impact-uiuc/bridge
components design design-system hack4impact react styling
Last synced: 4 months ago
JSON representation
Hack4Impact UIUC Design System + React Components
- Host: GitHub
- URL: https://github.com/hack4impact-uiuc/bridge
- Owner: hack4impact-uiuc
- License: mit
- Created: 2020-05-01T22:39:34.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2023-01-26T20:39:19.000Z (over 3 years ago)
- Last Synced: 2025-08-19T08:42:44.272Z (10 months ago)
- Topics: components, design, design-system, hack4impact, react, styling
- Language: JavaScript
- Homepage: https://uiuc.hack4impact.org/design
- Size: 4.34 MB
- Stars: 12
- Watchers: 8
- Forks: 4
- Open Issues: 31
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
Hack4Impact UIUC Design System + React Component Library
## Installation
```
npm install @hack4impact-uiuc/bridge
```
or
```
yarn add @hack4impact-uiuc/bridge
```
## Usage
Import the CSS directly into your project (`src/index.js`) if your asset packager supports it:
```javascript
import '@hack4impact-uiuc/bridge/dist/styles.css'
```
Import required h4i-design components within `src/App.js` file or your custom component files:
```javascript
import { Button } from '@hack4impact-uiuc/bridge';
```
Now you are ready to use the imported components, such as:
```javascript
import React from 'react';
import { Button } from '@hack4impact-uiuc/bridge';
const App = () => (
alert('Button clicked!')}>APPLY NOW
)
export default App
```
### Theming
Components use Hack4Impact's Design theme by default (`src/theme.js`) but you can provide your own theme using styled-component's [](https://styled-components.com/docs/advanced). You can either fully replace the theme or replace parts of the theme by placing your custom theme through a prop to our components or through `` in the root of the application.
### Server-side Rendering
This library depends on [styled-components](https://styled-components.com/). Thus, if you are server rendering React or using a framework like next.js or gatsby, follow styled-component's [server rendering setup](https://styled-components.com/docs/advanced#server-side-rendering).
## Local Development
We use Storybook to hot-reload and test our components during development. You can edit the [`playground/Playground.js`](playground/Playground.js) file to import and test the components you are working on. Please do not commit any work on the file so other developers can use the same file to test.
To run:
```
yarn
yarn storybook
```
Check out our [Contributing Guidelines](CONTRIBUTING.md) for code style, testing, component dev, etc
## Design Library
For design work, use the [Figma component library](https://www.figma.com/file/S4SnLb6KD7OWe5G0UPboBN/Bridge-Hack4Impact-UIUC-Design-System-Library?node-id=359%3A280) which includes all text styles, components, complete color palette, and proper box shadows as implemented in the React library. Any changes to the master components are reflected through all instances of that component throughout your designs.
To use the library, make a copy into your workspace and create a new page for your designs. All components are accessible through the "Assets" tab as you design on any page.
Refer to the [Bridge website](https://bridge-ui.now.sh/) for complete design guidelines.
## Authors
- Timothy Ko ([@tko22](https://github.com/tko22))
- Jackie Osborn ([@jackieo5023](https://github.com/jackieo5023))
- David Wang ([@davidenwang](https://github.com/davidenwang))
- Chloe Chan ([Product Designer](https://chloechan.me/))
## License
[MIT](https://opensource.org/licenses/MIT)
Copyright (c) 2020-present, Timothy Ko