Components

Components are the building blocks that make up your pages and layouts. They're where you define HTML, CSS and (optionally) client-side JS behaviour. Build them quickly using Ladle stories, then compose them into pages and layouts.

Components and their stories live in src/components.

Generate files for a new component with the yarn component command:

$ yarn component MyComponent
# 🖨 Created: src/components/MyComponent/MyComponent.stories.jsx
# 🖨 Created: src/components/MyComponent/MyComponent.jsx
# 🖨 Created: src/components/MyComponent/index.js

Style with Fela

By default, Tropical uses Fela for styling components. You can opt for another of Vite's CSS options if you prefer.

See the Fela docs for more info, but essentially you just write CSS-in-JS that looks like inline styles, which Fela translates into optimised atomic classes:

<div className={css({
  background: 'green',
  borderRadius: 5
})} />
<div className={css({
  background: 'green',
  borderRadius: 7
})} />

// <div class='a b'></div>
// <div class='a c'></div>

This results in tiny, atomic CSS that can be inlined in a server-rendered <style> in each page's <head>.

<head>
  <style>.a{background:green}.b{border-radius:5}.b{border-radius:7}</style>
</head>

No CSS files, unused CSS, no client-side JS runtime required.


Next: Browser JS and the Islands architecture