diff --git a/package.json b/package.json
index f5e3455..a5abde7 100644
--- a/package.json
+++ b/package.json
@@ -3,6 +3,11 @@
   "version": "1.3.0",
   "description": "Preact + Photon = <3",
   "main": "preact-photon.js",
+  "types": "src/index.d.ts",
+  "files": [
+    "src/*.d.ts",
+    "preact-photon.js"
+  ],
   "scripts": {
     "build": "babel -f $npm_package_main -s -o $npm_package_main < src/index.js",
     "test": "eslint src test && mocha --compilers js:babel/register test/**/*.js",
diff --git a/src/entypo-icons.d.ts b/src/entypo-icons.d.ts
new file mode 100644
index 0000000..27d41e4
--- /dev/null
+++ b/src/entypo-icons.d.ts
@@ -0,0 +1,287 @@
+declare module "preact-photon" {
+  export type IconIdentifier =
+    | "note"
+    | "note-beamed"
+    | "music"
+    | "search"
+    | "flashlight"
+    | "mail"
+    | "heart"
+    | "heart-empty"
+    | "star"
+    | "star-empty"
+    | "user"
+    | "users"
+    | "user-add"
+    | "video"
+    | "picture"
+    | "camera"
+    | "layout"
+    | "menu"
+    | "check"
+    | "cancel"
+    | "cancel-circled"
+    | "cancel-squared"
+    | "plus"
+    | "plus-circled"
+    | "plus-squared"
+    | "minus"
+    | "minus-circled"
+    | "minus-squared"
+    | "help"
+    | "help-circled"
+    | "info"
+    | "info-circled"
+    | "back"
+    | "home"
+    | "link"
+    | "attach"
+    | "lock"
+    | "lock-open"
+    | "eye"
+    | "tag"
+    | "bookmark"
+    | "bookmarks"
+    | "flag"
+    | "thumbs-up"
+    | "thumbs-down"
+    | "download"
+    | "upload"
+    | "upload-cloud"
+    | "reply"
+    | "reply-all"
+    | "forward"
+    | "quote"
+    | "code"
+    | "export"
+    | "pencil"
+    | "feather"
+    | "print"
+    | "retweet"
+    | "keyboard"
+    | "comment"
+    | "chat"
+    | "bell"
+    | "attention"
+    | "alert"
+    | "vcard"
+    | "address"
+    | "location"
+    | "map"
+    | "direction"
+    | "compass"
+    | "cup"
+    | "trash"
+    | "doc"
+    | "docs"
+    | "doc-landscape"
+    | "doc-text"
+    | "doc-text-inv"
+    | "newspaper"
+    | "book-open"
+    | "book"
+    | "folder"
+    | "archive"
+    | "box"
+    | "rss"
+    | "phone"
+    | "cog"
+    | "tools"
+    | "share"
+    | "shareable"
+    | "basket"
+    | "bag"
+    | "calendar"
+    | "login"
+    | "logout"
+    | "mic"
+    | "mute"
+    | "sound"
+    | "volume"
+    | "clock"
+    | "hourglass"
+    | "lamp"
+    | "light-down"
+    | "light-up"
+    | "adjust"
+    | "block"
+    | "resize-full"
+    | "resize-small"
+    | "popup"
+    | "publish"
+    | "window"
+    | "arrow-combo"
+    | "down-circled"
+    | "left-circled"
+    | "right-circled"
+    | "up-circled"
+    | "down-open"
+    | "left-open"
+    | "right-open"
+    | "up-open"
+    | "down-open-mini"
+    | "left-open-mini"
+    | "right-open-mini"
+    | "up-open-mini"
+    | "down-open-big"
+    | "left-open-big"
+    | "right-open-big"
+    | "up-open-big"
+    | "down"
+    | "left"
+    | "right"
+    | "up"
+    | "down-dir"
+    | "left-dir"
+    | "right-dir"
+    | "up-dir"
+    | "down-bold"
+    | "left-bold"
+    | "right-bold"
+    | "up-bold"
+    | "down-thin"
+    | "left-thin"
+    | "right-thin"
+    | "up-thin"
+    | "ccw"
+    | "cw"
+    | "arrows-ccw"
+    | "level-down"
+    | "level-up"
+    | "shuffle"
+    | "loop"
+    | "switch"
+    | "play"
+    | "stop"
+    | "pause"
+    | "record"
+    | "to-end"
+    | "to-start"
+    | "fast-forward"
+    | "fast-backward"
+    | "progress-0"
+    | "progress-1"
+    | "progress-2"
+    | "progress-3"
+    | "target"
+    | "palette"
+    | "list"
+    | "list-add"
+    | "signal"
+    | "trophy"
+    | "battery"
+    | "back-in-time"
+    | "monitor"
+    | "mobile"
+    | "network"
+    | "cd"
+    | "inbox"
+    | "install"
+    | "globe"
+    | "cloud"
+    | "cloud-thunder"
+    | "flash"
+    | "moon"
+    | "flight"
+    | "paper-plane"
+    | "leaf"
+    | "lifebuoy"
+    | "mouse"
+    | "briefcase"
+    | "suitcase"
+    | "dot"
+    | "dot-2"
+    | "dot-3"
+    | "brush"
+    | "magnet"
+    | "infinity"
+    | "erase"
+    | "chart-pie"
+    | "chart-line"
+    | "chart-bar"
+    | "chart-area"
+    | "tape"
+    | "graduation-cap"
+    | "language"
+    | "ticket"
+    | "water"
+    | "droplet"
+    | "air"
+    | "credit-card"
+    | "floppy"
+    | "clipboard"
+    | "megaphone"
+    | "database"
+    | "drive"
+    | "bucket"
+    | "thermometer"
+    | "key"
+    | "flow-cascade"
+    | "flow-branch"
+    | "flow-tree"
+    | "flow-line"
+    | "flow-parallel"
+    | "rocket"
+    | "gauge"
+    | "traffic-cone"
+    | "cc"
+    | "cc-by"
+    | "cc-nc"
+    | "cc-nc-eu"
+    | "cc-nc-jp"
+    | "cc-sa"
+    | "cc-nd"
+    | "cc-pd"
+    | "cc-zero"
+    | "cc-share"
+    | "cc-remix"
+    | "github"
+    | "github-circled"
+    | "flickr"
+    | "flickr-circled"
+    | "vimeo"
+    | "vimeo-circled"
+    | "twitter"
+    | "twitter-circled"
+    | "facebook"
+    | "facebook-circled"
+    | "facebook-squared"
+    | "gplus"
+    | "gplus-circled"
+    | "pinterest"
+    | "pinterest-circled"
+    | "tumblr"
+    | "tumblr-circled"
+    | "linkedin"
+    | "linkedin-circled"
+    | "dribbble"
+    | "dribbble-circled"
+    | "stumbleupon"
+    | "stumbleupon-circled"
+    | "lastfm"
+    | "lastfm-circled"
+    | "rdio"
+    | "rdio-circled"
+    | "spotify"
+    | "spotify-circled"
+    | "qq"
+    | "instagram"
+    | "dropbox"
+    | "evernote"
+    | "flattr"
+    | "skype"
+    | "skype-circled"
+    | "renren"
+    | "sina-weibo"
+    | "paypal"
+    | "picasa"
+    | "soundcloud"
+    | "mixi"
+    | "behance"
+    | "google-circles"
+    | "vkontakte"
+    | "smashing"
+    | "sweden"
+    | "db-shape"
+    | "logo-db"
+}
diff --git a/src/index.d.ts b/src/index.d.ts
new file mode 100644
index 0000000..2527b3a
--- /dev/null
+++ b/src/index.d.ts
@@ -0,0 +1,233 @@
+import { h, Component, AnyComponent, Attributes } from "preact"
+
+declare module "preact-photon" {
+  type E = JSX.IntrinsicElements
+  type RenderFunction = <P, S>(props: P & Attributes, state: S) => JSX.Element
+
+  interface IStylable {
+    class?: string
+  }
+
+  /** App "footer" bar, shown at the bottom of a window.
+   *	@class
+   */
+  export class Footer extends Component<E["footer"]> {
+    public render: RenderFunction
+  }
+
+  /** App "header" bar, shown at the top of a window.
+   *	@class
+   */
+  export class Header extends Component<E["header"]> {
+    public render: RenderFunction
+  }
+
+  /** Toolbar title.
+   *	@class
+   */
+  export class Title extends Component<E["h1"]> {
+    public render: RenderFunction
+  }
+
+  /** Group buttons together.
+   *	@class
+   *	@example
+   *	<ButtonGroup>
+   *		<Button>One</Button>
+   *		<Button>Two</Button>
+   *	</ButtonGroup>
+   */
+  export class ButtonGroup extends Component<E["div"]> {
+    public render: RenderFunction
+  }
+
+  /** Buttons. They are clickable.
+   *	@class
+   *	@param props.icon				If supplied, shows the given named icon to the left of the button text
+   *	@param props.primary  	Make the button display as a default action
+   *	@example
+   *	<Button>Label Text</Button>
+   *	@example
+   *	<Button icon="home">Home</Button>
+   *	@example
+   *	<Button large>Large Button</Button>
+   *	@example
+   *	<Button mini>Small Button</Button>
+   *	@example
+   *	<Button primary>Preferred Action</Button>
+   *	@example
+   *	<Button type="positive">Green</Button>
+   *	@example
+   *	<Button type="negative">Red</Button>
+   *	@example
+   *	<Button type="warning">Yellow</Button>
+   */
+  export class Button extends Component<
+    {
+      icon?: string
+      primary?: boolean
+      large?: boolean
+      mini?: boolean
+      dropdown?: boolean
+      form?: boolean
+      type?: "positive" | "negative" | "warning"
+    } & E["button"]
+  > {
+    public render: RenderFunction
+  }
+
+  /** A named icon/glyph from the nice built-in list of icons.
+   *	@class
+   *	@example
+   *	<Icon name="close" />
+   */
+  export class Icon extends Component<
+    { text?: string; name: IconIdentifier } & E["span"]
+  > {
+    public render: RenderFunction
+  }
+
+  /** Groups tabs together into a horizontal.
+   *	@class
+   *	@example
+   *	<TabGroup>
+   *		<Tab>One</Tab>
+   *		<Tab>Two</Tab>
+   *	</TabGroup>
+   */
+  export class TabGroup extends Component<E["div"]> {
+    public static Item: typeof Tab
+    public render: RenderFunction
+  }
+
+  /** For building MDIs. Has a close button by default, add `close="false"` to turn it off.
+   *	@class
+   *	@example
+   *	<Tab>title</Tab>
+   *	@example
+   *	<Tab close="false">title</Tab>
+   */
+  export class Tab extends Component<{ close?: false | "false" } & E["div"]> {
+    public render: RenderFunction
+  }
+
+  /** Group of sidebar navigation items
+   *	@class
+   *	@example
+   *	<NavGroup>
+   *		<NavGroup.Title>Faves</NavGroup.Title>
+   *		<NavGroup.Item>Foo</NavGroup.Item>
+   *	</NavGroup>
+   */
+  export class NavGroup extends Component<E["nav"]> {
+    public static Title: typeof NavGroupTitle
+    public static Item: typeof NavGroupItem
+    public render: RenderFunction
+  }
+
+  /** Title for a group of navigation items.
+   *	@class
+   *	@example
+   *	<NavGroup.Title>Faves</NavGroup.Title>
+   */
+  export class NavGroupTitle extends Component<E["h5"]> {
+    public render: RenderFunction
+  }
+
+  /** A single navigation item with optional icon.
+   *	@class
+   *	@example
+   *	<NavGroup.Item>Home</NavGroup.Item>
+   *	@example
+   *	<NavGroup.Item icon="folder">Documents</NavGroup.Item>
+   */
+  export class NavGroupItem extends Component<
+    { icon: IconIdentifier } & E["span"]
+  > {
+    public render: RenderFunction
+  }
+
+  /** Group of list items
+   *	@class
+   *	@example
+   *	<ListGroup>
+   *		<ListGroup.Header>
+   *			<input class="form-control" type="text" placeholder="Search...">
+   *		</ListGroup.Header>
+   *		<ListGroup.Item>Foo</ListGroup.Item>
+   *	</ListGroup>
+   */
+  export class ListGroup extends Component<E["ul"]> {
+    public static Header: typeof ListGroupHeader
+    public static Item: typeof ListGroupItem
+    public render: RenderFunction
+  }
+
+  /** Top header item in a list group.
+   *	@class
+   *	@example
+   *	<ListGroup.Header>
+   *		<input class="form-control" type="text" placeholder="Search...">
+   *	</ListGroup.Header>
+   */
+  export class ListGroupHeader extends Component<E["li"]> {
+    public render: RenderFunction
+  }
+
+  /** A single navigation item with optional icon.
+   *	@class
+   *	@example
+   *	<ListGroup.Item>Home</ListGroup.Item>
+   */
+  export class ListGroupItem extends Component<E["li"]> {
+    public render: RenderFunction
+  }
+
+  /** HTML `<form>` */
+  export class Form extends Component<E["form"]> {
+    public static Group: typeof FormGroup
+    public static CheckBox: typeof FormCheckBox
+    public static Radio: typeof FormRadio
+    public static Actions: typeof FormActions
+    public render: RenderFunction
+  }
+
+  /** Basically `<fieldset>` */
+  export class FormGroup extends Component<E["div"]> {
+    public render: RenderFunction
+  }
+
+  /** Basically `<input type="checkbox">` */
+  export class FormCheckBox extends Component<
+    {
+      name: string
+      checked?: boolean
+      value?: string | number | string[]
+      label?: AnyComponent
+    } & E["div"]
+  > {
+    public render: RenderFunction
+  }
+
+  /** Basically `<input type="radio">` */
+  export class FormRadio extends Component<
+    {
+      name: string
+      checked?: boolean
+      value?: string | number | string[]
+      label?: AnyComponent
+    } & E["div"]
+  > {
+    public render: RenderFunction
+  }
+
+  /** Group buttons at the bottom of a form. */
+  export class FormActions extends Component<E["div"]> {
+    public render: RenderFunction
+  }
+
+  /** Just an enhanced `<table>` */
+  export class Table extends Component<{ striped?: boolean } & E["table"]> {
+    public render: RenderFunction
+  }
+}
diff --git a/src/index.js b/src/index.js
index 530e212..ac48e1a 100644
--- a/src/index.js
+++ b/src/index.js
@@ -14,54 +14,14 @@ let componentNode = (Name, classes) => component( ({ children, ...props }) => (
 	<Name {...props} class={c(props.class, classes)}>{children}</Name>
 ));
 
-/** App "footer" bar, shown at the bottom of a window.
- *	@class
- */
 export const Header = componentNode('header', ['toolbar toolbar-header']);
 
-/** App "header" bar, shown at the top of a window.
- *	@class
- */
 export const Footer = componentNode('footer', ['toolbar toolbar-footer']);
 
-/** Toolbar title.
- *	@class
- */
 export const Title = componentNode('h1', 'title');
 
-
-/** Group buttons together.
- *	@class
- *	@example
- *	<ButtonGroup>
- *		<Button>One</Button>
- *		<Button>Two</Button>
- *	</ButtonGroup>
- */
 export const ButtonGroup = componentNode('div', 'btn-group');
 
-/** Buttons. They are clickable.
- *	@class
- *	@param {object} props
- *	@param {string} [icon]				If supplied, shows the given named icon to the left of the button text
- *	@param {boolean} [primary=false]	Make the button display as a default action
- *	@example
- *	<Button>Label Text</Button>
- *	@example
- *	<Button icon="home">Home</Button>
- *	@example
- *	<Button large>Large Button</Button>
- *	@example
- *	<Button mini>Small Button</Button>
- *	@example
- *	<Button primary>Preferred Action</Button>
- *	@example
- *	<Button type="positive">Green</Button>
- *	@example
- *	<Button type="negative">Red</Button>
- *	@example
- *	<Button type="warning">Yellow</Button>
- */
 export const Button = component( ({
 	class: className,
 	children,
@@ -87,34 +47,12 @@ export const Button = component( ({
 	</button>
 ));
 
-
-/** A named icon/glyph from the nice built-in list of icons.
- *	@class
- *	@example
- *	<Icon name="close" />
- */
 export const Icon = component( ({ class:className, text, name, children, ...props }) => (
 	<span {...props} class={c(className, `icon icon-${name}`, text && 'icon-text')}>{ children }</span>
 ));
 
-
-/** Groups tabs together into a horizontal.
- *	@class
- *	@example
- *	<TabGroup>
- *		<Tab>One</Tab>
- *		<Tab>Two</Tab>
- *	</TabGroup>
- */
 export const TabGroup = componentNode('div', 'tab-group');
 
-/** For building MDIs. Has a close button by default, add `close="false"` to turn it off.
- *	@class
- *	@example
- *	<Tab>title</Tab>
- *	@example
- *	<Tab close="false">title</Tab>
- */
 export const Tab = component( ({ class:className, close, children, ...props }) => (
 	<div class={c(className, 'tab-item')}>
 		{ String(close)==='false' ? null : <Icon name="cancel" class="icon-close-tab" /> }
@@ -124,31 +62,10 @@ export const Tab = component( ({ class:className, close, children, ...props }) =
 
 TabGroup.Item = Tab;
 
-
-/** Group of sidebar navigation items
- *	@class
- *	@example
- *	<NavGroup>
- *		<NavGroup.Title>Faves</NavGroup.Title>
- *		<NavGroup.Item>Foo</NavGroup.Item>
- *	</NavGroup>
- */
 export const NavGroup = componentNode('nav', 'nav-group');
 
-/** Title for a group of navigation items.
- *	@class
- *	@example
- *	<NavGroup.Title>Faves</NavGroup.Title>
- */
 NavGroup.Title = componentNode('h5', 'nav-group-title');
 
-/** A single navigation item with optional icon.
- *	@class
- *	@example
- *	<NavGroup.Item>Home</NavGroup.Item>
- *	@example
- *	<NavGroup.Item icon="folder">Documents</NavGroup.Item>
- */
 NavGroup.Item = component( ({ class:className, icon, children, ...props }) => (
 	<span {...props} class={c(className, 'nav-group-item')}>
 		{ icon ? (<Icon name={icon} />) : null }
@@ -156,43 +73,16 @@ NavGroup.Item = component( ({ class:className, icon, children, ...props }) => (
 	</span>
 ));
 
-
-/** Group of list items
- *	@class
- *	@example
- *	<ListGroup>
- *		<ListGroup.Header>
- *			<input class="form-control" type="text" placeholder="Search...">
- *		</ListGroup.Header>
- *		<ListGroup.Item>Foo</ListGroup.Item>
- *	</ListGroup>
- */
 export const ListGroup = componentNode('ul', 'list-group');
 
-/** Top header item in a list group.
- *	@class
- *	@example
- *	<ListGroup.Header>
- *		<input class="form-control" type="text" placeholder="Search...">
- *	</ListGroup.Header>
- */
 ListGroup.Header = componentNode('li', 'list-group-header');
 
-/** A single navigation item with optional icon.
- *	@class
- *	@example
- *	<ListGroup.Item>Home</ListGroup.Item>
- */
 ListGroup.Item = componentNode('li', 'list-group-item');
 
-
-/** HTML `<form>` */
 const Form = componentNode('form');
 
-/** Basically `<fieldset>` */
 Form.Group = componentNode('div', 'form-group');
 
-/** Basically `<input type="checkbox">` */
 Form.CheckBox = component( ({ class:className, name, checked, value, label, children, ...props }) => (
 	<div {...props} class={c(className, 'checkbox')}>
 		<label>
@@ -203,7 +93,6 @@ Form.CheckBox = component( ({ class:className, name, checked, value, label, chil
 	</div>
 ));
 
-/** Basically `<input type="radio">` */
 Form.Radio = component( ({ class:className, name, checked, value, label, children, ...props }) => (
 	<div {...props} class={c(className, 'radio')}>
 		<label>
@@ -214,36 +103,10 @@ Form.Radio = component( ({ class:className, name, checked, value, label, childre
 	</div>
 ));
 
-/** Group buttons at the bottom of a form. */
 Form.Actions = componentNode('div', 'form-actions');
 
-
-/** Just an enhanced `<table>` */
 export const Table = component( ({ class:className, striped, children, ...props }) => (
 	<table {...props} class={c(className, striped && 'table-striped')}>
 		{ children }
 	</table>
 ));
-
-
-// export class Header extends Component {
-// 	render({ toolbar, title, children }) {
-// 		return (
-// 			<header class="toolbar toolbar-header">
-// 				{ title ? (<h1 class="title">{ title }</h1>) : null }
-// 				{ children }
-// 			</header>
-// 		);
-// 	}
-// }
-//
-// export class Button extends Component {
-// 	render({ icon, children }) {
-// 		return (
-// 			<button class="btn btn-default">
-// 				{ icon ? (<Icon icon="home" text />) : null }
-// 				{ children }
-// 			</button>
-// 		);
-// 	}
-// }