Overview
@storacha/console-toolkit-react-styled currently only provides authentication components. Partner developers need a complete set of pre-styled UI components matching the official Storacha console — so they can build a fully functional app by importing components and a single CSS file, with zero styling work required.
This epic covers building the full styled component library and a complete working example (examples/full-app-styled) that demonstrates the entire integration from login through space management, file uploads, and account settings.
Goal
Ship a styled component library covering the full Storacha console UI — layout shell, space management, file upload/sharing, and account settings. Each component wraps the existing headless @storacha/console-toolkit-react components and adds console-exact styling.
examples/full-app-styled is built incrementally alongside the components in each PR so that by the end of this epic it serves as a complete, working reference integration that any partner developer can copy from.
Design System
All components strictly follow the official Storacha console design system sourced from tailwind.config.ts and globals.css:
Example — examples/full-app-styled
The example is the primary proof that the library works end-to-end. It must:
- Import everything exclusively from
@storacha/console-toolkit-react-styled —
never from @storacha/console-toolkit-react or any other Storacha package directly
- Import a single CSS file —
@storacha/console-toolkit-react-styled/styles.css —
and require zero partner-written CSS
- Stay minimal — example code shows component composition only, no custom logic
or styling
- Grow with each sub-issue PR until it covers the complete console experience:
login → space list → upload files → view files → account settings
Acceptance Criteria
Overview
@storacha/console-toolkit-react-styledcurrently only provides authentication components. Partner developers need a complete set of pre-styled UI components matching the official Storacha console — so they can build a fully functional app by importing components and a single CSS file, with zero styling work required.This epic covers building the full styled component library and a complete working example (
examples/full-app-styled) that demonstrates the entire integration from login through space management, file uploads, and account settings.Goal
Ship a styled component library covering the full Storacha console UI — layout shell, space management, file upload/sharing, and account settings. Each component wraps the existing headless
@storacha/console-toolkit-reactcomponents and adds console-exact styling.examples/full-app-styledis built incrementally alongside the components in each PR so that by the end of this epic it serves as a complete, working reference integration that any partner developer can copy from.Design System
All components strictly follow the official Storacha console design system sourced from
tailwind.config.tsandglobals.css:Example —
examples/full-app-styledThe example is the primary proof that the library works end-to-end. It must:
@storacha/console-toolkit-react-styled—never from
@storacha/console-toolkit-reactor any other Storacha package directly@storacha/console-toolkit-react-styled/styles.css—and require zero partner-written CSS
or styling
login → space list → upload files → view files → account settings
Acceptance Criteria
only from
@storacha/console-toolkit-react-styledexamples/full-app-styledis a complete, working reference app by end of epicpnpm run cipasses on every sub-issue PR — no PR merges with broken lint,types, tests, or build