Packages for building web applications in the Status ecosystem.
https://status-components.vercel.app
273db4ed9a
* a dark grey dropdown button * Create nasty-dots-eat.md |
||
---|---|---|
.changeset | ||
.github/workflows | ||
.husky | ||
.vscode | ||
packages | ||
patches | ||
.editorconfig | ||
.eslintignore | ||
.gitignore | ||
.prettierrc | ||
LICENSE.md | ||
README.md | ||
package.json | ||
tsconfig.base.json | ||
turbo.json | ||
vercel.json | ||
yarn.lock |
README.md
status-web
This monorepo contains packages for building web applications in the Status ecosystem. These packages can be used separately or combined to create consistent and beautiful user interfaces.
Packages
Name | npm |
Description |
---|---|---|
@status-im/components |
Component library built with Radix UI, React Aria, Tailwind CSS. | |
@status-im/js |
Libary for Waku protocol integration and blockchain interactions. | |
@status-im/icons |
Auto-generated icon library based on our design system. | |
@status-im/colors |
Auto-generated color palette based on our design system. | |
@status-im/eslint-config |
Shared ESLint configuration for consistent code style across projects. |
Prerequisites
Required:
Recommended:
- Visual Studio Code
- install extensions listed in
.vscode/extensions.json
for optimal development experience
- install extensions listed in
Stack
- Turborepo: Manages our monorepo and speeds up builds
- TypeScript: Adds type safety to our code
- React: Our main library for building UIs
- Radix UI / React Aria: Provides accessible UI primitives
- Tailwind CSS: Used for styling
- Vite: Our build tool and dev server
- Storybook: For developing and showcasing components
- ESLint: Keeps our code consistent and catches potential issues
- Prettier: Formats our code
- Changesets: Manages versioning and changelogs
Getting Started
-
Clone the repository:
git clone https://github.com/status-im/status-web.git cd status-web
-
Install dependencies:
yarn install
-
Build all packages:
yarn build
-
Run tests:
yarn test
-
Start development mode:
yarn dev
Storybook
To view and interact with the components, you can run Storybook:
yarn storybook
This will start the Storybook server, allowing you to browse and test components in isolation.
Sponsors
This project is sponsored by Browserstack.