{"id":23527247,"url":"https://github.com/andrewsuzuki/otep","last_synced_at":"2025-05-14T10:21:08.142Z","repository":{"id":74100921,"uuid":"90654370","full_name":"andrewsuzuki/otep","owner":"andrewsuzuki","description":"User interface library for React","archived":false,"fork":false,"pushed_at":"2017-07-29T17:02:06.000Z","size":1405,"stargazers_count":0,"open_issues_count":5,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-19T08:13:38.873Z","etag":null,"topics":["components","css-in-js","framework","glamor","grid","react","ui"],"latest_commit_sha":null,"homepage":"andrewsuzuki.com/otep","language":"JavaScript","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/andrewsuzuki.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-05-08T17:24:50.000Z","updated_at":"2017-05-12T03:59:13.000Z","dependencies_parsed_at":"2023-05-23T02:00:25.962Z","dependency_job_id":null,"html_url":"https://github.com/andrewsuzuki/otep","commit_stats":{"total_commits":107,"total_committers":1,"mean_commits":107.0,"dds":0.0,"last_synced_commit":"6848544841e5a7c649aa0f265fbaddabc1a27b8d"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andrewsuzuki%2Fotep","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andrewsuzuki%2Fotep/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andrewsuzuki%2Fotep/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andrewsuzuki%2Fotep/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/andrewsuzuki","download_url":"https://codeload.github.com/andrewsuzuki/otep/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254120178,"owners_count":22017954,"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":["components","css-in-js","framework","glamor","grid","react","ui"],"created_at":"2024-12-25T20:13:33.221Z","updated_at":"2025-05-14T10:21:08.084Z","avatar_url":"https://github.com/andrewsuzuki.png","language":"JavaScript","readme":"![otep logo](/logo/logo.png?raw=true \"otep\")\n\nUser interface library for React.\n\n##### Notice\n\nThis is currently alpha software, prone to breaking changes. Use at your own risk!\n\n## Examples\n\n### Hero\n\n```jsx\nimport { Hero, HeroTitle, HeroSubtitle } from 'otep'\n\nconst Example = () =\u003e\n  \u003cHero\u003e\n    \u003cHeroTitle\u003eWelcome\u003c/HeroTitle\u003e\n    \u003cHeroSubtitle\u003eThis is a welcome page.\u003c/HeroSubtitle\u003e\n  \u003c/Hero\u003e\n```\n\n### Grid, Forms, and Tiles\n\n```jsx\nimport {\n  Section,\n  Container,\n  Row,\n  Column,\n  H2,\n  Field,\n  Label,\n  Control,\n  RadioSet,\n  Tile,\n} from 'otep'\n\nconst Example = () =\u003e\n  \u003cSection\u003e\n    \u003cContainer\u003e\n      \u003cRow\u003e\n        \u003cColumn tablet=\"two-thirds\"\u003e\n          \u003cH2\u003eContact\u003c/H2\u003e\n          \u003cField horizontal\u003e\n            \u003cLabel\u003eChoose one\u003c/Label\u003e\n            \u003cControl\u003e\n              \u003cRadioSet\n                items={[\n                  { label: 'Foo', value: 'foo' },\n                  { label: 'Bar', value: 'bar' },\n                  { label: 'Baz', value: 'baz' },\n                ]}\n              /\u003e\n            \u003c/Control\u003e\n          \u003c/Field\u003e\n        \u003c/Column\u003e\n        \u003cColumn tablet=\"one-third\"\u003e\n          \u003cTile bold brand=\"primary\"\u003e\n            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed eiusmod tempor incididunt ut labore et dolore magna aliqua.\n          \u003c/Tile\u003e\n        \u003c/Column\u003e\n      \u003c/Row\u003e\n    \u003c/Container\u003e\n  \u003c/Section\u003e\n```\n\n## Installation\n\n```\n# Yarn\nyarn add otep\n\n# NPM\nnpm install --save otep\n```\n\n## Usage\n\n### Step one\n\nSet up the `OtepProvider` container component near the top of your element tree, and provide it with a theme.\n\n`OtepProvider` provides the supplied theme to its descendants via context, and also injects\nglobal styles (both reset styles and theme-based plain-element styles).\n\n```jsx\nimport React from 'react'\nimport ReactDOM from 'react-dom'\n\nimport { OtepProvider, themes } from 'otep'\n\nimport App from './App'\n\n\nconst myTheme = {\n  ...themes.standard,\n  // extend the standard theme at will!\n}\n\n\n// example\nconst Root = () =\u003e\n  \u003cOtepProvider theme={theme}\u003e\n    \u003cApp /\u003e\n  \u003c/OtepProvider\u003e\n\n\n// example\nReactDOM.render(\n  \u003cRoot /\u003e,\n  document.getElementById('root'),\n)\n```\n\n### Step Two\n\nImport components and use them!\n\nIndividual component documentation coming soon.\n\n```jsx\nimport React from 'react'\n\nimport {\n  Section,\n  Container,\n  Row,\n  Column,\n  Button,\n} from 'otep'\n\n\nexport default App = () =\u003e\n  \u003cSection\u003e\n    \u003cContainer\u003e\n      \u003cRow\u003e\n        \u003cColumn tablet=\"one-half\"\u003e\n          \u003cButton\u003eClick me\u003c/Button\u003e\n        \u003c/Column\u003e\n        \u003cColumn tablet=\"one-half\"\u003e\n          \u003cButton\u003eClick me too\u003c/Button\u003e\n        \u003c/Column\u003e\n      \u003c/Row\u003e\n    \u003c/Container\u003e\n  \u003c/Section\u003e\n\n```\n\n## Contributing\n\n1. Fork it!\n2. Create your feature branch: `git checkout -b my-new-feature`\n3. Commit your changes: `git commit -am 'Add some feature'`\n4. Push to the branch: `git push origin my-new-feature`\n5. Submit a pull request\n\n## Credits\n\n* Andrew Suzuki - @andrewsuzuki - [andrewsuzuki.com](http://andrewsuzuki.com)\n\n## License\n\nMIT\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fandrewsuzuki%2Fotep","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fandrewsuzuki%2Fotep","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fandrewsuzuki%2Fotep/lists"}