Theming · Prop library

Components

The standardised building blocks of the site, with their props and a live aesthetic preview. Chrome is constant; palette, surface and type come from the cascade. For the full lighting · surface · shape · rhythm · filter editor, open the cascade playground →

★ LessonCard

Exemplar · breaks the standard scale

A lesson as a strip of film — standardised chrome, aesthetic-governed body.

★

Data Portraits

Meet the room and the machine — what generative AI is and how next-word prediction works.

LessonCard

import { LessonCard } from '@kino/components'

prop	type	what it does
title	string	Lesson title — the headline.
pattern	string \| null	Defining pattern, rendered as the subtitle.
code	string \| null	Small mono badge (e.g. "D1·1").
image	string \| null	Section image painted into the slide (wins over icon).
icon	string \| null	Lucide icon slug for the slide when there is no image.
href	string \| null	Click target — wraps the card in an <a>.
look	string \| null	Aesthetic-theme slug; sets [data-grade] so the lesson's look governs the card.
accent	string \| null	Accent colour for the rim + slide frame.
showcase	boolean	Exemplar treatment — larger, accented, rule-breaking hero.

Preview aesthetic

Re-skins the standard examples below via [data-grade]. Lighting, surface and the rest live in the cascade playground.

01 LessonCard · standard

governed by preview aesthetic

Agent Ethics

Draw JARVIS's refusal boundaries — define what it won't do and defend your guardrails.

Agent Tool Use

Give JARVIS hands — connect external actions using function calling and real tool integration.

Hello World

Where AI already touches the world — and how to make it fetch you real information.

Deployment

Push JARVIS live — deploy a web chat widget to a public endpoint with wifi fallback.

Film Ideation

Pressure-test a story idea for its dramatic engine with AI brainstorming.

Hero Shots & Cinematography

Identify the few keyframe moments that carry your story forward.

02 Cards · actions · forms · menus

Card

A themed container — surface, role, padding, accent.

Button

Input · Select · Textarea

DropdownMenu

Prop reference

Card

import { Card } from '@kino/components'

prop	type	what it does
surface	SurfaceSlug \| null	Surface finish (paper, glass, neon-pad…). Sets data-surface.
role	RoleSlug \| null	Semantic intent (primary, warning…). Sets data-role.
padding	string \| boolean	Inner padding; false = 0, true/undefined = surface default.
accent	string	Accent line colour (--dev-card-accent).
accentPosition	'none'\|'left'\|'top'\|'border'\|'glow'	Where the accent appears.

Button

import { Button } from '@kino/components'

prop	type	what it does
role	RoleSlug \| null	Colour/meaning; omit → primary.
emphasis	'solid'\|'soft'\|'outline'\|'ghost'	Visual weight.
size	'sm'\|'md'\|'lg'	Control size.
href	string	Renders an <a> instead of a <button>.
disabled	boolean	Disabled state.

Input

import { Input } from '@kino/components'

prop	type	what it does
value	string \| number	Bindable value.
placeholder	string	Placeholder text (native attr).
invalid	boolean	Invalid styling.

Select

import { Select } from '@kino/components'

prop	type	what it does
options	{ value, label }[]	Option list.
value	string	Bindable selected value.
placeholder	string	Empty-state label.

Textarea

import { Textarea } from '@kino/components'

prop	type	what it does
value	string	Bindable value.
rows	number	Initial row count (default 3).
autoResize	boolean	Grow with content.

DropdownMenu

import { DropdownMenu } from '@kino/components'

prop	type	what it does
items	{ label, icon?, href?, onclick? }[]	Menu rows.
trigger	Snippet	The clickable trigger.
align	'start' \| 'end'	Menu alignment.