{"id":21658991,"url":"https://github.com/react-spectre/react-spectre","last_synced_at":"2025-07-17T21:32:09.090Z","repository":{"id":28086542,"uuid":"116063913","full_name":"react-spectre/react-spectre","owner":"react-spectre","description":"React components for Spectre.css - a Lightweight, Responsive and Modern CSS Framework","archived":false,"fork":false,"pushed_at":"2022-12-09T04:51:58.000Z","size":6417,"stargazers_count":65,"open_issues_count":47,"forks_count":13,"subscribers_count":6,"default_branch":"master","last_synced_at":"2024-11-22T01:02:36.588Z","etag":null,"topics":["component-library","react-components","spectre-css"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","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/react-spectre.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-01-02T22:31:54.000Z","updated_at":"2024-04-19T09:16:10.000Z","dependencies_parsed_at":"2022-07-27T22:48:36.442Z","dependency_job_id":null,"html_url":"https://github.com/react-spectre/react-spectre","commit_stats":null,"previous_names":[],"tags_count":17,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-spectre%2Freact-spectre","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-spectre%2Freact-spectre/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-spectre%2Freact-spectre/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-spectre%2Freact-spectre/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/react-spectre","download_url":"https://codeload.github.com/react-spectre/react-spectre/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":226305108,"owners_count":17603740,"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":["component-library","react-components","spectre-css"],"created_at":"2024-11-25T09:30:13.554Z","updated_at":"2024-11-25T09:30:32.542Z","avatar_url":"https://github.com/react-spectre.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"\u003cdiv align=center\u003e\n\u003cimg src=\".github/react-spectre-logo.png\" width=\"256\" height=\"256\"\u003e\n\n# react-spectre\nReact components for Spectre.css - a Lightweight, Responsive and Modern CSS Framework\n\n[![lerna](https://img.shields.io/badge/maintained%20with-lerna-cc00ff.svg)](https://lernajs.io/)\n[![Build Status](https://travis-ci.org/react-spectre/react-spectre.svg?branch=master)](https://travis-ci.org/react-spectre/react-spectre)\n\n\u003cbr\u003e\u003cbr\u003e\u003cbr\u003e\n\u003c/div\u003e\n\n\u003cdiv align=center\u003e\n\n# This project is under development.\n## Not ready for production use.\n### [Check the roadmap](#roadmap)\n\n\u003c/div\u003e\n\n\u003cbr\u003e\u003cbr\u003e\u003cbr\u003e\n\n## Packages\n\n### Elements\n\n Package | Size (min+gzip) \u003csup\u003e1\u003c/sup\u003e | Components \n :------ | :--------------------------- | :---------\n ||\n [**Elements**](packages/elements) | **\u003c!-- markdown-exec(cmd:./node_modules/.bin/gzip-size ./packages/elements/dist/elements.umd.js) --\u003e3.98 kB\u003c!-- /markdown-exec --\u003e** | **Contains all subsequent elements packages.**\n ||\n [**Typography**](packages/typography) | \u003c!-- markdown-exec(cmd:./node_modules/.bin/gzip-size ./packages/typography/dist/typography.umd.js) --\u003e1.67 kB\u003c!-- /markdown-exec --\u003e | `H1`, `H2`, `H3`, `H4`, `H5`, `H6`, `Label`.\n [**Table**](packages/table) | \u003c!-- markdown-exec(cmd:./node_modules/.bin/gzip-size ./packages/table/dist/table.umd.js) --\u003e1.67 kB\u003c!-- /markdown-exec --\u003e | `Table`, `Header`, `Body`, `Row`, `Heading`, `Cell`.\n [**Button**](packages/button) | \u003c!-- markdown-exec(cmd:./node_modules/.bin/gzip-size ./packages/button/dist/button.umd.js) --\u003e1.74 kB\u003c!-- /markdown-exec --\u003e | `Button`, `Group`.\n [**Form**](packages/form) | \u003c!-- markdown-exec(cmd:./node_modules/.bin/gzip-size ./packages/form/dist/form.umd.js) --\u003e1.82 kB\u003c!-- /markdown-exec --\u003e | `FormGroup`, `Input`, `TextArea`, `Select`, `Radio`, `CheckBox`, `Switch`.\n [**Icon**](packages/icon) | \u003c!-- markdown-exec(cmd:./node_modules/.bin/gzip-size ./packages/icon/dist/icon.umd.js) --\u003e1.49 kB\u003c!-- /markdown-exec --\u003e | `Icon`.\n [**Label**](packages/label) | \u003c!-- markdown-exec(cmd:./node_modules/.bin/gzip-size ./packages/label/dist/label.umd.js) --\u003e1.6 kB\u003c!-- /markdown-exec --\u003e | `Label`.\n [**Media**](packages/media) | \u003c!-- markdown-exec(cmd:./node_modules/.bin/gzip-size ./packages/media/dist/media.umd.js) --\u003e1.82 kB\u003c!-- /markdown-exec --\u003e | `Image`, `Figure`, `Video`, `Container`.\n\n### Layout\n\n Package | Size (min+gzip) \u003csup\u003e1\u003c/sup\u003e | Components \n :------ | :--------------------------- | :---------\n ||\n [**Layout**](packages/layout) | **\u003c!-- markdown-exec(cmd:./node_modules/.bin/gzip-size ./packages/layout/dist/layout.umd.js) --\u003e2.07 kB\u003c!-- /markdown-exec --\u003e** | **Contains all subsequent layout packages.**\n ||\n [**Grid**](packages/grid) | \u003c!-- markdown-exec(cmd:./node_modules/.bin/gzip-size ./packages/grid/dist/grid.umd.js) --\u003e1.77 kB\u003c!-- /markdown-exec --\u003e | `Grid`, `Row`, `Col`.\n [**Navbar**](packages/navbar) | \u003c!-- markdown-exec(cmd:./node_modules/.bin/gzip-size ./packages/navbar/dist/navbar.umd.js) --\u003e1.59 kB\u003c!-- /markdown-exec --\u003e | `Navbar`, `Section`, `Brand`.\n\n\n### Components\n\n Package | Size (min+gzip) \u003csup\u003e1\u003c/sup\u003e | Components\n :------ | :--------------------------- | :---------\n ||\n [**Components**](packages/components) | **\u003c!-- markdown-exec(cmd:./node_modules/.bin/gzip-size ./packages/components/dist/components.umd.js) --\u003e3.11 kB\u003c!-- /markdown-exec --\u003e** | **Contains all subsequent components packages.**\n ||\n [**Accordion**](packages/accordion) | \u003c!-- markdown-exec(cmd:./node_modules/.bin/gzip-size ./packages/accordion/dist/accordion.umd.js) --\u003e1.6 kB\u003c!-- /markdown-exec --\u003e | `Accordion`, `Header`, `Body`.\n [**Autocomplete**](packages/autocomplete) | \u003c!-- markdown-exec(cmd:./node_modules/.bin/gzip-size ./packages/autocomplete/dist/autocomplete.umd.js) --\u003e1.58 kB\u003c!-- /markdown-exec --\u003e | `Autocomplete`, `Input`, `Menu`.\n [**Avatar**](packages/avatar) | \u003c!-- markdown-exec(cmd:./node_modules/.bin/gzip-size ./packages/avatar/dist/avatar.umd.js) --\u003e1.75 kB\u003c!-- /markdown-exec --\u003e | `Avatar`, `Icon`, `Presence`.\n [**Badge**](packages/badge) | \u003c!-- markdown-exec(cmd:./node_modules/.bin/gzip-size ./packages/badge/dist/badge.umd.js) --\u003e1.4 kB\u003c!-- /markdown-exec --\u003e | `Badge`.\n [**Bar**](packages/bar) | \u003c!-- markdown-exec(cmd:./node_modules/.bin/gzip-size ./packages/bar/dist/bar.umd.js) --\u003e1.75 kB\u003c!-- /markdown-exec --\u003e | `Bar`, `Slider`.\n [**Toast**](packages/toast) | \u003c!-- markdown-exec(cmd:./node_modules/.bin/gzip-size ./packages/toast/dist/toast.umd.js) --\u003e1.62 kB\u003c!-- /markdown-exec --\u003e | `Toast`.\n\n**Note:** \u003csup\u003e1\u003c/sup\u003e the gzipped size of the UMD build.\n\n\u003cbr\u003e\u003cbr\u003e\u003cbr\u003e\n\n## Development\n\nIt is recommended to use `yarn` for easy development.\n\n### Setup\n\n 1. `yarn` or `npm install`\n 2. `yarn lerna -- bootstrap` o `npm run lerna -- bootstrap`\n\n### Creating a new package\n\n**The script way**:\n\n```shell\nyarn package:create -- \u003cname-of-package\u003e\n```\n\n**The manual way**:\n\n  1. Create a directory inside [`packages`](packages).\n  2. Copy [`LICENSE`](packages/typography/LICENSE) file from another package.\n  3. Copy [`README.md`](packages/typography/README.md) file from another package and modify it.\n  4. Copy [`assets`](packages/typography/assets) directory from another package.\n  5. Run `yarn init` or `npm package` (don't worry for the version, it will be overriden on publishing).\n  6. Modify the `package.json` file and add `{ \"publishConfig\": { \"access\": \"public\" } }` (this allow the package to be published with lerna as scoped package).\n\n\n\u003cbr\u003e\u003cbr\u003e\u003cbr\u003e\n\n## Roadmap\n\n  - **Elements**\n    - [x] Typography\n    - [x] Tables\n    - [x] Buttons\n    - [x] Forms\n    - [x] Icons\n    - [x] Labels\n    - [ ] ~Code~\n    - [x] Media\n\n  - **Layout**\n    - [x] Flexbox Grid\n    - [x] Responsive\n    - [x] Navbar\n\n  - **Components**\n    - [x] Accordions\n    - [x] Autocomplete\n    - [x] Avatars\n    - [x] Badges\n    - [x] Bars\n    - [ ] Breadcrumbs - [View issue](https://github.com/react-spectre/react-spectre/issues/9)\n    - [x] Cards\n    - [ ] Chips - [View issue](https://github.com/react-spectre/react-spectre/issues/11)\n    - [ ] Empty states - [View issue](https://github.com/react-spectre/react-spectre/issues/12)\n    - [ ] Menus - [View issue](https://github.com/react-spectre/react-spectre/issues/13)\n    - [ ] Modals - [View issue](https://github.com/react-spectre/react-spectre/issues/14)\n    - [ ] Navs - [View issue](https://github.com/react-spectre/react-spectre/issues/15)\n    - [ ] Pagination - [View issue](https://github.com/react-spectre/react-spectre/issues/16)\n    - [x] Panels\n    - [ ] Popovers - [View issue](https://github.com/react-spectre/react-spectre/issues/18)\n    - [x] Steps\n    - [ ] Tabs - [View issue](https://github.com/react-spectre/react-spectre/issues/20)\n    - [ ] Tiles - [View issue](https://github.com/react-spectre/react-spectre/issues/21)\n    - [x] Toasts\n    - [ ] Tooltips - [View issue](https://github.com/react-spectre/react-spectre/issues/23)\n\n  - **Utilities**:\n    - [ ] ~Colors~\n    - [ ] ~Cursors~\n    - [ ] ~Display~\n    - [ ] Divider - [View issue](https://github.com/react-spectre/react-spectre/issues/24)\n    - [ ] Loading - [View issue](https://github.com/react-spectre/react-spectre/issues/25)\n    - [ ] ~Position~\n    - [ ] ~Shapes~\n    - [ ] ~Text~\n\n\u003cdiv align=center\u003e\n\u003cbr\u003e\u003cbr\u003e\u003cbr\u003e\n\nMade with :heart: by [Rubens Mariuzzo](https://github.com/rmariuzzo).\n\n[MIT License](LICENSE)\n\n\u003c/div\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Freact-spectre%2Freact-spectre","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Freact-spectre%2Freact-spectre","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Freact-spectre%2Freact-spectre/lists"}