DocumentationBlog
Documentation
Guide
Getting StartedRoutesStylesMetadataLoadersActionsCookiesDeployment
API
_layout.jspage.jspage.mdxhandler.jsfirebolt.config.js.envuseRouteuseCookieuseLoaderuseActionuseCache<Link><ErrorBoundary>Contextcsscls
Utilities
@firebolt-dev/cors@firebolt-dev/icons@firebolt-dev/snap

Styles

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

components/Account.js
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.

routes/_layout.js
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>
  )
}
© 2024 Firebolt