Skip to content
Design system

Stage

The frame where a component or a customer's design is shown.

import { Stage } from "@flinbu/seed";

A card in Light and Dark

Card
ColorPublished

446 tokens in Light and Dark.

import { Button, Stage, Badge, Card } from "@flinbu/seed";
import { Code } from "lucide-react";

<Stage className="w-full" title="Card" height="16rem" widths={["full", "tablet", "mobile"]} actions={<Button variant="ghost" size="sm" leftIcon={<Code />}>Show code</Button>}>
  <Card className="w-full max-w-sm p-base">
    <div className="flex items-center justify-between gap-sm">
      <span className="text-primary label-label-1-medium">Color</span>
      <Badge variant="success">Published</Badge>
    </div>
    <p className="mt-xs mb-base text-secondary body-body-3-regular">446 tokens in Light and Dark.</p>
    <Button size="sm">Open</Button>
  </Card>
</Stage>

Use it for

  • Component previews.
  • Customer designs in Light and Dark.

Use something else for

  • Seed's own chrome: customer colors stay on the stage.

Props

PropTypeDefaultDescription
title / actionsReactNode–Toolbar.
theme / onThemeChange'light''dark''light'Themes only the frame.
width / widths'full''desktop''tablet''mobile''full'Preview widths.
background'checker''plain''checker'Canvas.
height / align / toolbar…–Layout.

Accessibility

  • A labelled region; theme and width are toggle groups.