{"id":22451435,"url":"https://github.com/stevenpersia/a119","last_synced_at":"2026-03-15T03:48:43.838Z","repository":{"id":34674028,"uuid":"181320107","full_name":"stevenpersia/a119","owner":"stevenpersia","description":"Lightweight React Framework UI.","archived":false,"fork":false,"pushed_at":"2023-01-03T19:43:39.000Z","size":10583,"stargazers_count":4,"open_issues_count":21,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2024-09-23T09:12:13.883Z","etag":null,"topics":["design-system","framework","lightweight","react","reactjs"],"latest_commit_sha":null,"homepage":"https://codesandbox.io/s/n15n00o8z4","language":"CSS","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/stevenpersia.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},"funding":{"github":["stevenpersia"]}},"created_at":"2019-04-14T14:21:01.000Z","updated_at":"2020-10-01T19:37:52.000Z","dependencies_parsed_at":"2023-01-15T08:30:24.140Z","dependency_job_id":null,"html_url":"https://github.com/stevenpersia/a119","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stevenpersia%2Fa119","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stevenpersia%2Fa119/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stevenpersia%2Fa119/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stevenpersia%2Fa119/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/stevenpersia","download_url":"https://codeload.github.com/stevenpersia/a119/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":228114855,"owners_count":17871742,"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":["design-system","framework","lightweight","react","reactjs"],"created_at":"2024-12-06T06:07:54.719Z","updated_at":"2026-03-15T03:48:38.781Z","avatar_url":"https://github.com/stevenpersia.png","language":"CSS","funding_links":["https://github.com/sponsors/stevenpersia"],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\u003cimg alt=\"A119\" src=\"https://raw.githubusercontent.com/stevenpersia/a119/master/github/a119.png\" width=\"600\"/\u003e\u003c/p\u003e\n\u003cp align=\"center\"\u003e\u003cimg alt=\"NPM\" src=\"https://img.shields.io/npm/l/a119.svg?style=flat-square\"\u003e\n\u003cimg alt=\"npm\" src=\"https://img.shields.io/npm/v/a119.svg?style=flat-square\"\u003e\u003c/p\u003e\n\u003cp align=\"center\"\u003e\u003cb\u003eThis project is not maintained anymore :(\u003c/b\u003e\u003c/p\u003e\n\n## Overview\n\n**React Design System.** I'm certainly crazy but I want to create my own UI Framework to develop React applications faster. I will regularly update this readme to show the new components. I'll see what it gives. I'm not in a hurry. A better documentation will come soon. If you like it, feel free to star this repo ! :3\n\n## Demo\nCheck this out and have fun : https://codesandbox.io/s/n15n00o8z4\n\n## Screenshots\n\u003cp align=\"center\"\u003e\n\u003cimg alt=\"avatar\" src=\"https://raw.githubusercontent.com/stevenpersia/a119/master/github/avatar.png\" width=\"500\" /\u003e\n\u003cimg alt=\"avatar-group\" src=\"https://raw.githubusercontent.com/stevenpersia/a119/master/github/avatar-group.png\" width=\"500\" /\u003e\n\u003cimg alt=\"badge\" src=\"https://raw.githubusercontent.com/stevenpersia/a119/master/github/badge.png\" width=\"500\" /\u003e\n\u003cimg alt=\"button\" src=\"https://raw.githubusercontent.com/stevenpersia/a119/master/github/button.png\" width=\"500\" /\u003e\n\u003cimg alt=\"button-group\" src=\"https://raw.githubusercontent.com/stevenpersia/a119/master/github/button-group.png\" width=\"500\" /\u003e\n\u003cimg alt=\"switch\" src=\"https://raw.githubusercontent.com/stevenpersia/a119/master/github/switch.png\" width=\"500\" /\u003e\n\u003cimg alt=\"textfield\" src=\"https://raw.githubusercontent.com/stevenpersia/a119/master/github/textfield.png\" width=\"500\" /\u003e\n\u003cimg alt=\"more\" src=\"https://raw.githubusercontent.com/stevenpersia/a119/master/github/more.png\" width=\"500\" /\u003e\n\u003c/p\u003e\n\n## Installation and usage\n\nInstall package :\n```\nnpm install a119\n```\n\nImport one component :\n```\nimport { Avatar } from \"a119\";\n```\n\nOr multiple components :\n```\nimport { Avatar, AvatarGroup } from \"a119\";\n```\n\n## Props\n\n### Avatar\n| Prop        | Default  | Required | Type     | Example                                  |\n| ----------- | -------- | -------- | -------- | ---------------------------------------- |\n| `src`       | X        | Yes      | string   | X                                        |\n| `alt`       | X        | Yes      | string   | X                                        |\n| `size`      | `medium` | No       | string   | `tiny` `small` `medium` `large` `big`    |\n| `variant`   | `circle` | No       | string   | `square` `circle`                        |\n| `presence`  | X        | No       | string   | `online` `busy` `away` `focus` `offline` |\n| `onClick`   | X        | No       | function | `() =\u003e alert(\"Hello world !\");`          |\n| `className` | X        | No       | string   | X                                        |\n\n### AvatarGroup\nSoon !\n\n### Badge\n| Prop    | Default     | Required | Type   | Example                                                    |\n| ------- | ----------- | -------- | ------ | ---------------------------------------------------------- |\n| `value` | X           | Yes      | number | X                                                          |\n| `type`  | `secondary` | No       | string | `primary` `secondary` `success` `warning` `danger`  `help` |\n\n### Button\n| Prop         | Default     | Required | Type     | Example                                                    |\n| ------------ | ----------- | -------- | -------- | ---------------------------------------------------------- |\n| `text`       | X           | Yes      | string   | X                                                          |\n| `type`       | `secondary` | No       | string   | `primary` `secondary` `success` `warning` `danger`  `help` |\n| `variant`    | X           | No       | string   | `outlined` `dashed` `link`                                 |\n| `className`  | X           | No       | string   | X                                                          |\n| `isDisabled` | `false`     | No       | boolean  | `true` `false`                                             |\n| `isLoading`  | `false`     | No       | boolean  | `true` `false`                                             |\n| `onClick`    | X           | No       | function | `() =\u003e alert(\"Hello world !\");`                            |\n| `fullwidth`  | `false`     | No       | boolean  | `true` `false`                                             |\n\n\n### ButtonGroup\nSoon !\n\n### Switch\nSoon !\n\n### TextField\n| Prop         | Default     | Required | Type     | Example                                                    |\n| ------------ | ----------- | -------- | -------- | ---------------------------------------------------------- |\n| `name`       | X           | No      | string   | X                                                          |\n| `value`       | X | No       | string   | X |\n| `placeholder`    | X           | No       | string   | X                                |\n| `className`  | X           | No       | string   | X                                                          |\n| `isDisabled` | `false`     | No       | boolean  | `true` `false`                                             |\n| `helperText`  | X     | No       | string  | X                                           |\n| `error`    | `false`          | No       | boolean | `true` `false`                           |\n| `success`    | `false`          | No       | boolean | `true` `false`                             |\n| `fullwidth`  | `false`     | No       | boolean  | `true` `false`                                             |\n| `onBlur`  | X     | No       | function  | `() =\u003e alert(\"Hello world !\");`                                           |\n| `onChange`  | X    | No       | function  | `() =\u003e alert(\"Hello world !\");`                                      |\n\n## Star, Fork, Clone \u0026 Contribute\n\nFeel free to contribute on this repository. If my work helps you, please give me back with a star. This means a lot to me and keeps me going!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstevenpersia%2Fa119","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fstevenpersia%2Fa119","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstevenpersia%2Fa119/lists"}