> ## Documentation Index
> Fetch the complete documentation index at: https://docs.ollie.shop/llms.txt
> Use this file to discover all available pages before exploring further.

# Components

> React apps written in TypeScript

Ollie Shop works with Templates, which is nothing but a pre-defined set of slots. In each Slot goes a Component. This way you can change compoennts wihtout having to worry about re-buidling your checkout.

<Info>
  Take a look at our [onboarding tutorial](/ollie-shop/get-started/quickstart) and learn how create and deploy a custom component
</Info>

## Component Architecture

Components follow a simple pattern:

```typescript index.tsx theme={"system"}
import { useCheckoutSession, useStoreInfo } from "@ollie-shop/sdk";

export default function MyComponent() {
  import React from "react";
  // Access live checkout data
  const { session } = useCheckoutSession();
  const { theme } = useStoreInfo();
  
  return (
    <div style={{ color: theme.colors.primary }}>
			<h3>Welcome {session.customer?.firstName}!</h3>
			<p>Cart total: ${(session.totals.total / 100).toFixed(2)}</p>
		</div>
  );
}
```

## Creating Components

Components are created through the admin dashboard:

<Frame>
  <img src="https://mintcdn.com/ollie/UatGh8GLCugPlVFB/ollie-shop/imgs/component-create-form.png?fit=max&auto=format&n=UatGh8GLCugPlVFB&q=85&s=af6e4101d10f2856ed67ff46f3427b50" alt="Component creation form showing name, active toggle, slot selection, and version selection" width="1502" height="1212" data-path="ollie-shop/imgs/component-create-form.png" />
</Frame>

1. `Name` - Descriptive component name
2. `Slot` - Where the component will appear
3. `Version` - Which store version to deploy to
4. `Status` - Active/inactive