{"id":17954714,"url":"https://github.com/nukeop/react-ui-cards","last_synced_at":"2025-04-04T07:09:32.928Z","repository":{"id":28875796,"uuid":"117599362","full_name":"nukeop/react-ui-cards","owner":"nukeop","description":"Ready to use card components for React (rewritten in Typescript)","archived":false,"fork":false,"pushed_at":"2024-06-07T10:31:47.000Z","size":7209,"stargazers_count":237,"open_issues_count":8,"forks_count":62,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-03-28T06:08:26.179Z","etag":null,"topics":["card","card-component","hacktoberfest","react"],"latest_commit_sha":null,"homepage":"https://nukeop.github.io/react-ui-cards/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/nukeop.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","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},"funding":{"github":"nukeop"}},"created_at":"2018-01-15T21:52:59.000Z","updated_at":"2025-02-11T15:50:06.000Z","dependencies_parsed_at":"2024-06-18T15:31:36.118Z","dependency_job_id":"a570335d-aad4-4946-8a02-1a497e832d76","html_url":"https://github.com/nukeop/react-ui-cards","commit_stats":{"total_commits":159,"total_committers":12,"mean_commits":13.25,"dds":0.7610062893081762,"last_synced_commit":"1b69d23cec4ee2dc094834120f6ae0650688aab3"},"previous_names":[],"tags_count":8,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nukeop%2Freact-ui-cards","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nukeop%2Freact-ui-cards/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nukeop%2Freact-ui-cards/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nukeop%2Freact-ui-cards/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nukeop","download_url":"https://codeload.github.com/nukeop/react-ui-cards/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247135147,"owners_count":20889421,"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":["card","card-component","hacktoberfest","react"],"created_at":"2024-10-29T10:19:36.980Z","updated_at":"2025-04-04T07:09:32.898Z","avatar_url":"https://github.com/nukeop.png","language":"TypeScript","funding_links":["https://github.com/sponsors/nukeop"],"categories":[],"sub_categories":[],"readme":"# react-ui-cards ![CI](https://github.com/nukeop/react-ui-cards/actions/workflows/ci.yml/badge.svg)\n\nVarious stylish card components for React.\nFocused on being ready to use with little modifications. Supply your data and you're good to go.\n\n## Live demo\nhttps://nukeop.github.io/react-ui-cards\n\n## npm\nhttps://www.npmjs.com/package/react-ui-cards\n\n## Installation and usage example\nMinified and gzipped bundle size: 52kb.\n```bash\n$ npm install --save react-ui-cards\n```\n\n```typescript\nimport { UserCard } from 'react-ui-cards';\n\nexport const Example = () =\u003e \u003cUserCard\n    float\n    href='https://github.com/nukeop'\n    header='https://i.imgur.com/vRAtM3i.jpg'\n    avatar='https://i.imgur.com/XJxqvsU.jpg'\n    name='Frank Hepsfield'\n    positionName='Software Engineering Manager'\n/\u003e\n```\n\n## Development\n### Getting started\nAfter cloning the repo, run the following commands to start Storybook in development mode with hot reload:\n\n```shell\n$ npm install\n$ npm run storybook\n```\n\n### Running tests\nThe repo is configured so that it generates snapshot tests from Storybook stories. To run them, use:\n\n```shell\n$ npm test\n```\n\n### Contributing\nAll contributions are welcome. You can either add something to existing cards, or create a completely new card type.\n\n## Card types\nIn addition to what's listed for each card type, all cards can take the following additional props:\n\n- `className` to apply additional classes to the card\n- `float` (boolean) to enable animation on hover\n- Other props are passed down to the enclosing div element so you can e.g. add custom callbacks for onClick and other events.\n\n### User cards\nCards representing users or people.\n\n| attribute    | type        | description                                                                                             |\n|--------------|-------------|---------------------------------------------------------------------------------------------------------|\n| href         | string/null | optional url the card will link to when clicked                                                         |\n| header       | string      | url to the image that will be displayed in the upper part of the card                                   |\n| avatar       | string      | url to the image that will be displayed in the center of the card                                       |\n| name         | string      | user's name                                                                                             |\n| positionName | string      | user's role                                                                                             |\n| stats        | array/null  | an optional array of objects with attributes 'name' and 'value' - this is displayed in the card's footer |\n\n![User card](https://i.imgur.com/2QMNcjY.png)\n\n### Product cards\nCards representing products available for purchase.\n\n| attribute   | type    \t| description                                                   |\n|-------------|-----------------|---------------------------------------------------------------|\n| photos      | array   \t| array of urls to photos of the product                        |\n| price       | string  \t| the price that will be displayed in the upper lefthand corner |\n| productName | string  \t| name of the product                                           |\n| description | string  \t| a short description of the product                            |\n| rating      | integer \t| rating of the product (0-5). Not implemented yet.             |\n| url         | string  \t| url the button will link to                  \t\t\t|\n| buttonText  | string/null     | optional button text\t\t\t\t        \t|\n\n![Product card](https://i.imgur.com/qDCMzwV.png)\n\n### Tagged content cards\nCards showcasing any content that can be described with a single thumbnail and a list of tags.\n\n| attribute   | type        | description                                                                                                           |\n|-------------|-------------|-----------------------------------------------------------------------------------------------------------------------|\n| href        | string/null | optional url the card will link to when clicked                                                                       |\n| thumbnail   | string      | url to the image that will be displayed in the center part of the card and as the background                          |\n| title       | string      | title of the card                                                                                                     |\n| description | string      | short description of the content, try to not exceed one line                                                          |\n| tags        | array/null  | an array of strings that will be converted to pill-style tags and displayed in the lower righthand corner of the card |\n\n![Tagged content card](https://i.imgur.com/SyakUBF.png)\n\n### Flipping card\nA card with a front and back side. Flips over on hover. Any React component can be displayed on either side.\n\nThis card is a bit different than the other ones - it has no attributes. To define it, you have to create a nested structure and pass your content as children:\n\n  ```javascript\n\t  \u003cFlippingCard\u003e\n          \u003cFlippingCardBack\u003e\n\t\t\t  Content that will be displayed on the back of the card\n\t\t  \u003c/FlippingCardBack\u003e\n\t\t  \u003cFlippingCardFront\u003e\n\t\t\t  Content that will be displayed on the front of the card\n\t\t  \u003c/FlippingCardFront\u003e\n\t\u003c/FlippingCard\u003e\n  ```\n\nSee demo page for an example in action.\n\n### Recipe card\nCards you can use to show dishes' names, time they take to cook and how big the portions are. Heart sign can be used as \"Add to favorite\" button.\n\n| attribute   | type         | description                                                            |\n|-------------|--------------|------------------------------------------------------------------------|\n| href        | string/null  | optional url the card will link to when clicked                        |\n| thumbnail   | string       | url to the image that will be displayed at the top of other elements   |\n| title       | string       | name of the dish                                                       |\n| time        | string       | amount of time it will take to prepare the dish                        |\n| servings    | string       | estimation of portions' size                                           |\n\n![Recipe card](https://i.imgur.com/PfE6Cf0.png)\n\n\n\n### News header card\nCards you can use on the news site, shows the title, author and date it was published. Click on image to see the exact news.\n\n| attribute | type        | description                                               |\n|-----------|-------------|-----------------------------------------------------------|\n| href      | string/null | optional url the card will link to when clicked           |\n| thumbnail | string      | url to the image that will be displayed in the background |\n| author    | string      | author of aricle linked in href                           |\n| date      | string      | date of publishing                                        |\n| tags      | string      | optional. array of string to be rendered as tags          |\n\n![News header card](https://i.imgur.com/3fZKPyS.png)\n\n### Cryptocurrency card\nCards that show cryptocurrency-related data, including a chart. Can be used for showing other data, such as fiat currency or stock market prices.\n\n| attribute         | type              | description                                                                      |\n|-------------------|-------------------|----------------------------------------------------------------------------------|\n| currencyName      | string            | Name of the cryptocurrency                                                       |\n| currencyPrice     | string            | Current price, displayed as provided, which means you have to format it yourself |\n| icon              | node              | Icon representing the currency, it's displayed at 24x24 px                       |\n| currencyShortName | string            | Symbol such as BTC, ETH, etc                                                     |\n| trend             | string            | Recent price change. Just as with the price, no formatting is performed          |\n| trendDirection    | integer(-1, 0, 1) | Indicates whether the trend is positive, negative, or if there's no change       |\n| chartColor        | string            | Color of the line on the chart                                                   |\n| chartData         | array\\[integer\\]  | An array of integer values to be displayed on the chart                          |\n\n![Cryptocurrency card](http://i.imgur.com/7yGpFnw.png)\n\n### Payment card\nCard that represents a credit card, a debit card, or other similar cards. Flips on hover to reveal the back.\n\n| attribute         | type           | description                                                                                                                                                      |\n|-------------------|----------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| background        | string         | Valid CSS background string. If not provided, a default background is used.                                                                                      |\n| backgroundPattern | string/null    | Lets you select one of the patterns to display in the background. Can be either \"worldMap\", \"triangles\", or \"spiral\". Null results in no pattern being displayed |\n| issuerIcon        | string/element | Card issuer icon. Either a link to the image with an icon, or a React element to render                                                                          |\n| number            | string         | Payment card number                                                                                                                                              |\n| date              | string         | The \"valid thru\" date                                                                                                                                            |\n| name              | string         | Name displayed on the card                                                                                                                                       |\n| cvv               | string         | CVV code displayed on the back of the card                                                                                                                       |\n\n![Payment cards](http://i.imgur.com/0Nb9K1B.png)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnukeop%2Freact-ui-cards","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnukeop%2Freact-ui-cards","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnukeop%2Freact-ui-cards/lists"}