Forest & Fern Components

Component collection / First growth

Everyday pieces.
Same forest.

Tables, charts, cards, and a little room for conversation. Familiar patterns with the Forest & Fern feel.

TablesChartsModals & popups Accordions & tabsCards & tagsLayoutBranding

Make it feel like you.

Try the same surfaces across every pattern. Text and controls stay clear; your reduced-motion preference takes priority.

01 · Tables

Useful details, clearly arranged.

6 projects

Choose a column heading to sort. On smaller screens, scroll within the table to see every column.

Projects taking root
Status

02 · Charts

The story behind the numbers.

Revenue through the season

May–October · mock data

Monthly revenue, line chart Revenue rises from $72,000 in May to $128,400 in October, with a dip in July. Exact values are in the data table below.
A growing season, with a small dip in July. October revenue reached $128,400.
View revenue data
Monthly revenue in US dollars
Month Revenue
May $72,000
June $88,000
July $82,000
August $106,000
September $114,000
October $128,400

03 · Modals & popups

A moment of focus. A small next step.

Modal dialog

Give an idea a name.

A focused form with space for a decision. Save it, cancel, or press Escape to return.

Contextual popup

A few handy actions.

Keep small choices nearby. Open the popup, choose an action, or tap outside to dismiss.

Organic Studio · demo actions

Try a project dialog or open the action popup.

A new beginning

Name your next project. This demo keeps the result here and sends nothing.

04 · Accordions & tabs

One thing at a time.

A few useful answers

Can I use this without a framework?

Yes. Add the CSS and use native HTML. Your app keeps its own behavior.

What happens on a small screen?

Layouts wrap, tables scroll locally, and overlays stay within the viewport.

Can I turn off the movement?

Choose “Still” above. Your system’s reduced-motion setting always takes priority.

A place for every detail

OverviewNotesActivity

Organic Studio

A small creative workspace, ready for its next season.

Active project

Field notes

Keep the first release focused. Start with the tools people reach for every day.

Recent activity

Today · Added the first component collection.

05 · Cards, pills & tags

Little pieces with room to breathe.

A project card

Grow something useful.

Compose a title, a little context, and one clear next step.

Design3 collaborators
Visit the dashboard

Quick choices

Tags describe. Toggle pills make a choice.

6 projectsReady to share

Selected: Design.

06 · Layout

Structure that follows the space.

Good company

Stack for vertical rhythm. Cluster for wrapping actions. Grid for cards that adapt to their container.

StackSteady vertical spacing
GridColumns that fit
Everything has its place.

07 · A quiet signature

A little life in the corner.

Min Wen

Your site’s mark, with a slow, gentle drift.

Movement pauses while this tab is hidden and respects reduced motion.

Take these patterns with you.

Each pattern uses the same tokens and native HTML. Keep your app’s own data and behavior, and bring the forest along.

Component recipes & API ↗