--- title: "One component, many plans" description: "Lesson 10.5 of Creator Terminal's lesson films (Tokens and themes): Make a pricing card a component, give each plan its own name, price and colour, and change what they share once." canonical: "https://terminal.lottiefiles.com/one-component-many-plans/" last_updated: 2026-11-03 --- # One component, many plans > Lesson 10.5 of Creator Terminal's lesson films (Tokens and themes): Make a pricing card a component, give each plan its own name, price and colour, and change what they share once. - The film (1:25): https://terminal.lottiefiles.com/media/10.5-one-component-many-plans/474cd69a6f63/10.5-one-component-many-plans.mp4 - Vertical cut: https://terminal.lottiefiles.com/media/10.5-one-component-many-plans/be0085b77c02/10.5-one-component-many-plans-vertical.mp4 - Captions: https://terminal.lottiefiles.com/media/10.5-one-component-many-plans/b77477b329b8/10.5-one-component-many-plans.vtt - The page: https://terminal.lottiefiles.com/one-component-many-plans/ - The document the film opens: https://terminal.lottiefiles.com/media/10.5-one-component-many-plans/c80279af4f7c/plans.ctd ## Step by step In this tutorial you'll make a pricing page's plan card once and use it for every plan. A component is a part you make once and use again and again, as in Figma; each copy on the stage is an instance. What's inside is shared, so one change reaches every card, while each card keeps values of its own: its plan, its price and its colour. ### Before you start - Creator Terminal, installed and open ([Install Creator Terminal](/install/)). - A card whose varying values are tokens already, values an app can set (see [Your first token](/first-token/)). The film's plan card has three: `plan`, `price` and `accent`, its colour. ### 1. Play the card Press `0` to go to the first frame, then `space` to watch the card come in. Press `space` again to stop. It's the **Starter** plan, at `£9` a month, in orange. ### 2. Make it a component Click the card on the stage (the canvas, in other tools), and press `⌥⌃G` (Option-Control-G). It's a component now. The rail on the right (the Properties panel, in other tools) has a **COMPONENT** section: its name, **Plan card**, how many instances there are, and the tokens each copy can change for itself. ![The rail's COMPONENT section: Plan card, 1 instance, and its plan, accent and price.](https://terminal.lottiefiles.com/media/10.5-one-component-many-plans/ec8c5d56236a/one-component-many-plans-the-rail-s-component-section-plan-card-1.webp) ### 3. Place another, and another 1. Press `⌥⌃D`. Another instance appears right on top of the first, with its values. 2. Drag it to the right, beside the first. 3. Press `⌥⌃D` once more. The third lands the same distance along, keeping the spacing. ![Three copies of the plan card side by side, all Starter at £9.](https://terminal.lottiefiles.com/media/10.5-one-component-many-plans/064b2cadb618/one-component-many-plans-three-copies-of-the-plan-card-side-by.webp) ### 4. Give one values of its own Click the middle card. The rail's **COMPONENT** section lists the main's tokens with this card's values. 1. Click `plan`'s value, type `Pro` and press Return. 2. Click `price`'s value, type `£19` and press Return. 3. Click `accent`'s colour value, type a violet, `#6e56f7`, and press Return. The middle card is the **Pro** plan now, in violet. A green dot beside each value marks it as this card's own, and the `↺` beside it puts the main's back. The other cards keep theirs. ![The middle card's own values in the rail: Pro, a violet accent and £19.](https://terminal.lottiefiles.com/media/10.5-one-component-many-plans/b20730b54706/one-component-many-plans-the-middle-card-s-own-values-in-the.webp) ### 5. Give the third its own Click the last card, and do the same: `Team`, `£49`, and a teal, `#0fa38f`. ### 6. Change it once Now one change for every plan: the button's words. 1. Double-click the words on the middle card's button, **Choose plan**. You're inside the component, on the button's text; what you change here, every card shares. 2. Press Return to type into it, `⌃A` to select its words, and type `Start free trial`. 3. Press `esc` to finish typing, and click an empty part of the stage. Every card follows, and each keeps its own plan, price and colour. ![All three cards with Start free trial on their buttons: Starter, Pro and Team.](https://terminal.lottiefiles.com/media/10.5-one-component-many-plans/dbc6d3884de4/one-component-many-plans-all-three-cards-with-start-free-trial-on.webp) ### 7. Play them Press `0`, then `space`. Three plans come in, from one card. Press `space` to stop. Each card's own values are tokens of their own too, named after the instance and the token, so an app can set them like any other. The middle card's colour, for example: ```js setColorSlot("plan-card-2.accent", [0.43, 0.34, 0.97, 1]) ``` ### What you learned - `⌥⌃G` makes a component; `⌥⌃D` places another instance of it. - The main's tokens are what each instance can change for itself, in the rail's **COMPONENT** section. - An edit inside any instance reaches every one, except where one has a value of its own. [Components](/docs/components/) in the manual has the rest: editing inside, resetting values and the Components shelf. ## In this lesson ### One plan (0:08) Here's a plan card for a pricing page. Press zero, then space, and watch it come in. Space again stops it. Its name, price and colour are tokens already. ### Make it a component (0:20) Click the card, and press Option-Control-G. It's a component now. The rail lists what each copy can change. ### Another, and another (0:29) Option-Control-D places another, right on top. Drag it across. Press it once more, and the third keeps the spacing. ### Values of its own (0:37) Click the middle card. In the rail, give it its own plan, Pro. Its own price, nineteen pounds. And its own colour, a violet. The others keep theirs. ### And the third (0:49) Then the last one. Team, at forty-nine, and a teal. ### Change it once (0:55) Now one change for every plan. Double-click the middle button's words, and press return to type. Press Control-A, and type Start free trial. Every card follows, and each keeps its own plan, price and colour. ### Play them (1:10) Press zero, then space. Three plans, one card. Space to stop.