fragms

One look for every component. Wrap your app once and each Fragms component inside takes the same accent, glow, corners and pace. A prop on a component still wins, and without a theme nothing changes.

Make your own
Reading m3.material.io

The review is on Thursday at ten. It runs for about an hour.

Simmy Send the notes to the team

Undo for 30 seconds

Theme

Corners

Type

Pace

NeedsReact

Source
curl --create-dirs -o src/components/theme.tsx https://fragms.simonveprek.cz/source/theme

Saves src/components/theme.tsx. No setup, works in any React project.

import { FragmsTheme } from "@/components/theme";<FragmsTheme theme={{  accent: "#ff6a3d",  glow: ["#ff6a3d", "#ff2d75", "#ffb020", "#ff9a5c"],  roundness: 1,  pace: 1,  font: "\"Instrument Sans\", ui-sans-serif, system-ui, sans-serif",}}>  <App /></FragmsTheme>
accent

The colour of the agent. Send buttons, cursors, rings, faces and the hold to approve.

CSS colourDefault each component's own
glow

Four colours for anything that glows, like Aura and a listening Composer.

[string, string, string, string]Default aurora
roundness

How round the corners are. 0 is square, 1 the usual, 2 very round.

numberDefault 1
pace

How quick the motion is. Below 1 is calmer, above it livelier.

numberDefault 1
useTheme

Reads the theme around any component of your own, so it can match.

() => ThemeDefault an empty theme

What's new

  1. 2.0
    • First release. One accent, glow, roundness and pace for every component
    • Make your own on the Theme page of the Studio
NextAura