{"id":25838061,"url":"https://github.com/liamrdawson/verso-ui","last_synced_at":"2026-04-10T02:51:00.708Z","repository":{"id":54386649,"uuid":"334749191","full_name":"liamrdawson/verso-ui","owner":"liamrdawson","description":"A UI component library built for image-oriented React applications.","archived":false,"fork":false,"pushed_at":"2021-02-21T20:21:33.000Z","size":1080,"stargazers_count":2,"open_issues_count":5,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-05-22T03:51:17.598Z","etag":null,"topics":["atomic-design","color","components","design","design-system","emotion","layout","react","react-testing-library","storybook","style","theme","typography","ui","unit-testing","verso-ui"],"latest_commit_sha":null,"homepage":"http://npmjs.com/package/verso-ui","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/liamrdawson.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-01-31T20:23:26.000Z","updated_at":"2023-03-04T05:01:44.000Z","dependencies_parsed_at":"2022-08-13T14:10:22.634Z","dependency_job_id":null,"html_url":"https://github.com/liamrdawson/verso-ui","commit_stats":null,"previous_names":["liamrdawson/components"],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/liamrdawson%2Fverso-ui","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/liamrdawson%2Fverso-ui/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/liamrdawson%2Fverso-ui/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/liamrdawson%2Fverso-ui/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/liamrdawson","download_url":"https://codeload.github.com/liamrdawson/verso-ui/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/liamrdawson%2Fverso-ui/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":259219712,"owners_count":22823577,"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":["atomic-design","color","components","design","design-system","emotion","layout","react","react-testing-library","storybook","style","theme","typography","ui","unit-testing","verso-ui"],"created_at":"2025-03-01T03:31:33.534Z","updated_at":"2026-04-10T02:51:00.679Z","avatar_url":"https://github.com/liamrdawson.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Verso UI\n\nVerso UI is a library for creating themable user interfaces based on atomic design principles.\n\nBuilt for image oriented websites and applications, where you can pass in custom tokens and themes to customize colours, typography, layout and styles. Built in TypeScript, Verso UI comes with its own type definitions to work in a variety of scalable applications and libraries.\n\n## Jump To:\n\n**[Get Started](#-Get-Started)**\n\n**[Raise an Issue / Request a Feature](#-Raise-an-issue-/-request-a-feature)**\n\n**[Run Locally](#-Developing-Verso-UI-Locally)**\n\n## Get Started\n\n```bash\n  npm i verso-ui\n```\n\n```jsx\nimport { Text } from 'verso-ui'\n\n//  Verso UI will ask for custom values required to render\nexport default (props) =\u003e (\n  \u003cText\u003e\u003c/Text\u003e //Type '{ children: string; }' is missing the following properties from type 'TextProps': fontWeight, fontSize, element\n)\n\nexport default (props) =\u003e (\n  \u003cText fontWeight=\"light\" fontSize=\"medium\" element=\"p\"\u003e\n    {props.children}\n  \u003c/Text\u003e\n)\n```\n\n### Supported Components\n\nHere's a list of components available from Verso UI:\n\n\u003cdetails\u003e\n\u003csummary\u003eAtoms\u003c/summary\u003e\n\u003cbr\u003e\n\u003cul\u003e\n  \u003cli\u003ePrimaryButton\u003c/li\u003e\n  \u003cli\u003eSecondaryButton\u003c/li\u003e\n  \u003cli\u003eTertiaryButton\u003c/li\u003e\n  \u003cli\u003eTextInput\u003c/li\u003e\n  \u003cli\u003eTextArea\u003c/li\u003e\n  \u003cli\u003eHeading\u003c/li\u003e\n  \u003cli\u003eText\u003c/li\u003e\n\u003c/ul\u003e\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003eMolecules\u003c/summary\u003e\n\u003cbr\u003e\n\u003cul\u003e\n  \u003cli\u003eContactForm\u003c/li\u003e\n  \u003cli\u003eNav\u003c/li\u003e\n\u003c/ul\u003e\n\u003c/details\u003e\n\n## Raise an Issue / Request a Feature\n\n### Defects / Bugs\n\nIf you have been using Verso UI in one of your own projects and would like to draw attention to a bug or a defect, please select the projects **Bug / Defect** saved reply. Please provide as much detailed information as possible, including a description of the problem, reporduction steps and acceptance criteria for any future Pull Request related to this issue.\n\n## Developing Verso UI Locally\n\nIf you have been using Verso UI and there's a feature you would like to see in this library, please select the projects **Task / Epic** saved reply. Please provide as much detailed information as possible about what you would like to see. Please provide a description of the feature and its purpose and an acceptance criteria for any future Pull Request related to this request.\n\n### Set up in isolation\n\nTo start your development environment for Verso UI, run:\n\n1. npm run dev\n2. npm run storybook\n\nThis will start of the project in webpacks development mode, where the local build is updates as you update the code. Storybook will also start up on `localhost:6006` so that you can work on the components in an isolated environment.\n\n### Set up within another application\n\nTo get started with Verso UI and develop components in the context of a consuming application (as opposed to Storybooks isolated setup), run:\n\n**/Verso-UI**\n\n- `npm link`\n- `npm run dev`\n\n**/consumingApp**\n\n- `npm link verso-ui`\n\nVerso UI requires a copy of React and React-Dom as devDependencies so that [Jest](https://jestjs.io/) and [React Testing Library](https://testing-library.com/docs/react-testing-library/intro/) can run locally and also within the projects CI pipeline as Pull Requests occur and also so that React components can render.\n\n#### Invalid Hook Call Warning\n\nIf you receive this error, it's because two version's of React are present. To fix this you need to make sure that Verso UI and the consuming project are both using the same version of React. You have a couple of options to get this working, depending on your projects setup.\n\n- Resolve your module aliases with Webpack in your consuming application by adding the following to your webpack config:\n  ```js\n    //  In webpack.config.js\n      resolve: {\n        alias: {\n          react: path.resolve('node_modules/react'),\n          'react-dom': path.resolve('node_modules/react'),\n        },\n      },\n  ```\n- Link your local running Verso UI library to your consumers version of react by running `npm link path/to/consumer/node_modules/react`.\n\n\u003e ℹ️ [See React's official docs on this problem for more information.](https://reactjs.org/warnings/invalid-hook-call-warning.html)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fliamrdawson%2Fverso-ui","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fliamrdawson%2Fverso-ui","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fliamrdawson%2Fverso-ui/lists"}