Firebolt boasts its own simple yet powerful CSS-in-JS implementation that works flawlessly with React server streaming, allowing you to be productive immediately.

Element Styles

Style any element in your app with the css prop and tagged template literal

import { css } from 'firebolt' import { User } from 'lucide-react' export function Account({ name }) { return ( <div css={css` display: flex; align-items: center; span { margin-left: 8px; } `} > <User /> <span>{name}</span> </div> ) }

For quick little styles you can also just write it directly as a string

<div css='color:red'>

Behind the scenes, Firebolt will compile and auto-prefix your styles, insert them into the <head> and give your element a className to scope the styles.

Global Styles

Global styles can be placed anywhere using a regular old <style> element. Most of the time you'll put this in your root _layout.js component with css-resets, font-faces, themes and variables.

import { css } from 'firebolt' export default function RootLayout({ children }) { return ( <html> <head> <style global={css` :root { --bg: #fff; } @media (prefers-color-scheme: dark) { :root { --bg: #000; } } html { background: var(--bg); } `} /> </head> <body>{children}</body> </html> ) }