diff --git a/README.md b/README.md
index 9627883..57f5fb9 100644
--- a/README.md
+++ b/README.md
@@ -144,11 +144,13 @@ import { Accordion } from 'webcoreui/react'
 - [Checkbox](https://github.com/Frontendland/webcoreui/tree/main/src/components/Checkbox)
 - [ConditionalWrapper](https://github.com/Frontendland/webcoreui/tree/main/src/components/ConditionalWrapper)
 - [Icon](https://github.com/Frontendland/webcoreui/tree/main/src/components/Icon)
+- [Input](https://github.com/Frontendland/webcoreui/tree/main/src/components/Input)
 - [Progress](https://github.com/Frontendland/webcoreui/tree/main/src/components/Progress)
 - [Radio](https://github.com/Frontendland/webcoreui/tree/main/src/components/Radio)
 - [Rating](https://github.com/Frontendland/webcoreui/tree/main/src/components/Rating)
 - [Spinner](https://github.com/Frontendland/webcoreui/tree/main/src/components/Spinner)
 - [Switch](https://github.com/Frontendland/webcoreui/tree/main/src/components/Switch)
+- [Table](https://github.com/Frontendland/webcoreui/tree/main/src/components/Table)
 - [Tabs](https://github.com/Frontendland/webcoreui/tree/main/src/components/Tabs)
 - [Timeline](https://github.com/Frontendland/webcoreui/blob/main/src/pages/timeline.astro)
 - [Toast](https://github.com/Frontendland/webcoreui/tree/main/src/components/Toast)
diff --git a/scripts/buildTypes.js b/scripts/buildTypes.js
index a76389a..b3e94e6 100644
--- a/scripts/buildTypes.js
+++ b/scripts/buildTypes.js
@@ -41,6 +41,7 @@ const buildTypes = type => {
                 'Icon',
                 'Rating',
                 'Spinner',
+                'Table',
                 'TimelineItem',
                 'Progress'
             ]
diff --git a/scripts/createComponent.js b/scripts/createComponent.js
index 0216063..7db50aa 100644
--- a/scripts/createComponent.js
+++ b/scripts/createComponent.js
@@ -91,20 +91,12 @@ const templates = {
         import Svelte${component} from '@components/${component}/${component}.svelte'
         import React${component} from '@components/${component}/${component}.tsx'
 
-        const sections = [
-            {
-                title: 'Astro ${lowerCaseComponent}s',
-                component: Astro${component}
-            },
-            {
-                title: 'Svelte ${lowerCaseComponent}s',
-                component: Svelte${component}
-            },
-            {
-                title: 'React ${lowerCaseComponent}s',
-                component: React${component}
-            }
-        ]
+        import { getSections } from '@helpers'
+
+        const sections = getSections({
+            title: '${lowerCaseComponent}s',
+            components: [Astro${component}, Svelte${component}, React${component}]
+        })
         ---
 
         <Layout>
diff --git a/src/components/Input/Input.astro b/src/components/Input/Input.astro
new file mode 100644
index 0000000..b93bffb
--- /dev/null
+++ b/src/components/Input/Input.astro
@@ -0,0 +1,52 @@
+---
+import type { InputProps } from './input'
+import ConditionalWrapper from '@components/ConditionalWrapper/ConditionalWrapper.astro'
+
+import './input.scss'
+
+interface Props extends InputProps {}
+
+const {
+    type = 'text',
+    theme,
+    label,
+    subText,
+    fill,
+    className,
+    ...rest
+} = Astro.props
+
+const classes = [
+    'w-input',
+    theme,
+    fill && 'fill',
+    className
+]
+
+const useLabel = !!(label || subText || Astro.slots.has('icon'))
+---
+
+<ConditionalWrapper condition={useLabel}>
+    <label slot="wrapper" class="w-input-label">
+        {label && (
+            <div class="label">{label}</div>
+        )}
+        <ConditionalWrapper condition={Astro.slots.has('icon')}>
+            <div class="input-wrapper" slot="wrapper">
+                children
+            </div>
+            <slot name="icon" />
+            children
+        </ConditionalWrapper>
+        {subText && (
+            <div class="subtext">
+                <Fragment set:html={subText} />
+            </div>
+        )}
+    </label>
+    <input
+        type={type}
+        class:list={classes}
+        {...rest}
+    />
+</ConditionalWrapper>
diff --git a/src/components/Input/Input.svelte b/src/components/Input/Input.svelte
new file mode 100644
index 0000000..4f1caa0
--- /dev/null
+++ b/src/components/Input/Input.svelte
@@ -0,0 +1,52 @@
+<script lang="ts">
+    import type { InputProps } from './input'
+    import ConditionalWrapper from '@components/ConditionalWrapper/ConditionalWrapper.svelte'
+    import './input.scss'
+
+    export let type: InputProps['type'] = 'text'
+    export let theme: InputProps['theme'] = null
+    export let label: InputProps['label'] = ''
+    export let subText: InputProps['subText'] = ''
+    export let fill: InputProps['fill'] = false
+    export let className: InputProps['className'] = ''
+    export let onChange: (e: any) => any = () => {}
+    export let onKeyUp: (e: any) => any = () => {}
+
+    const classes = [
+        'w-input',
+        theme,
+        fill && 'fill',
+        className
+    ].filter(Boolean).join(' ')
+
+    const useLabel = !!(label || subText || $$slots.icon)
+</script>
+
+<ConditionalWrapper
+    condition={useLabel}
+    element="label"
+    class="w-input-label"
+>
+    {#if label}
+        <div class="label">{label}</div>
+    {/if}
+    <ConditionalWrapper
+        condition={$$slots.icon}
+        element="div"
+        class="input-wrapper"
+    >
+        <slot name="icon" />
+        <input
+            type={type}
+            class={classes}
+            on:change={onChange}
+            on:keyup={onKeyUp}
+            {...$$restProps}
+        />
+    </ConditionalWrapper>
+    {#if label}
+        <div class="subtext">
+            {@html subText}
+        </div>
+    {/if}
+</ConditionalWrapper>
diff --git a/src/components/Input/Input.tsx b/src/components/Input/Input.tsx
new file mode 100644
index 0000000..ee0b406
--- /dev/null
+++ b/src/components/Input/Input.tsx
@@ -0,0 +1,59 @@
+import React from 'react'
+import type { ReactInputProps } from './input'
+import ConditionalWrapper from '@components/ConditionalWrapper/ConditionalWrapper.tsx'
+
+import './input.scss'
+
+const Input = ({
+    type = 'text',
+    theme,
+    label,
+    subText,
+    fill,
+    icon,
+    value,
+    className,
+    ...rest
+}: ReactInputProps) => {
+    const classes = [
+        'w-input',
+        theme,
+        fill && 'fill',
+        className
+    ].filter(Boolean).join(' ')
+
+    const useLabel = !!(label || subText || icon)
+
+    return (
+        <ConditionalWrapper condition={useLabel} wrapper={children => (
+            <label className="w-input-label">
+                {children}
+            </label>
+        )}>
+            {label && (
+                <div className="label">{label}</div>
+            )}
+            <ConditionalWrapper condition={!!icon} wrapper={children => (
+                <div className="input-wrapper">
+                    {children}
+                </div>
+            )}>
+                {icon && icon}
+                <input
+                    type={type}
+                    className={classes}
+                    defaultValue={value}
+                    {...rest}
+                />
+            </ConditionalWrapper>
+            {subText && (
+                <div
+                    className="subtext"
+                    dangerouslySetInnerHTML={{ __html: subText }}
+                />
+            )}
+        </ConditionalWrapper>
+    )
+}
+
+export default Input
diff --git a/src/components/Input/input.scss b/src/components/Input/input.scss
new file mode 100644
index 0000000..e34fbe5
--- /dev/null
+++ b/src/components/Input/input.scss
@@ -0,0 +1,83 @@
+@import '../../scss/config.scss';
+
+.w-input {
+    border-radius: 2px;
+    padding: 5px 10px;
+    border: 1px solid #252525;
+    background: transparent;
+    font-family: Regular;
+    color: #FFF;
+    line-height: 20px;
+    width: 100%;
+    color-scheme: dark;
+
+    &[disabled] {
+        cursor: no-drop;
+        color: #555;
+    }
+
+    &::file-selector-button {
+        background: transparent;
+        border: 0;
+        color: #FFF;
+    }
+
+    &[type="color"] {
+        padding: 0;
+    }
+
+    &.info {
+        border-color: #48dbfb;
+    }
+
+    &.success {
+        border-color: #1dd1a1;
+    }
+
+    &.warning {
+        border-color: #f7aa61;
+    }
+
+    &.alert {
+        border-color: #ee5253;
+    }
+
+    &.fill {
+        background: #252525;
+    }
+}
+
+.w-input-label {
+    display: flex;
+    flex-direction: column;
+
+    .label {
+        font-size: 16px;
+        color: #BBB;
+        margin-bottom: 5px;
+    }
+
+    .input-wrapper {
+        display: flex;
+        gap: 10px;
+        align-items: center;
+        position: relative;
+
+        input {
+            padding-left: 40px;
+        }
+
+        svg {
+            position: absolute;
+            left: 10px;
+            width: 20px;
+            height: 20px;
+        }
+    }
+
+    .subtext {
+        font-size: 14px;
+        color: #555;
+        margin-top: 5px;
+    }
+}
diff --git a/src/components/Input/input.ts b/src/components/Input/input.ts
new file mode 100644
index 0000000..e3df34d
--- /dev/null
+++ b/src/components/Input/input.ts
@@ -0,0 +1,44 @@
+export type InputProps = {
+    type?: 'text'
+        | 'email'
+        | 'password'
+        | 'number'
+        | 'tel'
+        | 'url'
+        | 'search'
+        | 'file'
+        | 'date'
+        | 'datetime-local'
+        | 'month'
+        | 'week'
+        | 'time'
+        | 'color'
+    theme?: 'info'
+        | 'success'
+        | 'warning'
+        | 'alert'
+        | null
+    value?: string | number
+    name?: string
+    placeholder?: string
+    label?: string
+    disabled?: boolean
+    subText?: string
+    fill?: boolean
+    maxLength?: number
+    min?: number
+    max?: number
+    step?: number
+    multiple?: boolean
+    pattern?: string
+    required?: boolean
+    autofocus?: boolean
+    autocomplete?: 'on' | 'off'
+    className?: string
+    [key: string]: any
+}
+
+export type ReactInputProps = {
+    icon?: string
+    children?: React.ReactNode
+} & InputProps
diff --git a/src/components/Table/Table.astro b/src/components/Table/Table.astro
new file mode 100644
index 0000000..08e62a5
--- /dev/null
+++ b/src/components/Table/Table.astro
@@ -0,0 +1,60 @@
+---
+import type { TableProps } from './table'
+import './table.scss'
+
+interface Props extends TableProps {}
+
+const {
+    headings,
+    footer,
+    data,
+    hover,
+    striped,
+    offsetStripe,
+    compact,
+    className
+} = Astro.props
+
+const classes = [
+    'w-table',
+    hover && 'hover',
+    striped && `striped-${striped}s`,
+    offsetStripe && 'offset',
+    compact && 'compact',
+    className
+]
+---
+
+<div class:list={classes}>
+    <table>
+        {headings?.length && (
+            <thead>
+                <tr>
+                    {headings.map(heading => (
+                        <th>{heading}</th>
+                    ))}
+                </tr>
+            </thead>
+        )}
+        <tbody>
+            {data.map(row => (
+                <tr>
+                    {row.map(column => (
+                        <td>
+                            <Fragment set:html={column} />
+                        </td>
+                    ))}
+                </tr>
+            ))}
+        </tbody>
+        {footer?.length && (
+            <tfoot>
+                <tr>
+                    {footer.map(data => (
+                        <td>{data}</td>
+                    ))}
+                </tr>
+            </tfoot>
+        )}
+    </table>
+</div>
diff --git a/src/components/Table/Table.svelte b/src/components/Table/Table.svelte
new file mode 100644
index 0000000..20ea62d
--- /dev/null
+++ b/src/components/Table/Table.svelte
@@ -0,0 +1,54 @@
+<script lang="ts">
+    import type { TableProps } from './table'
+    import './table.scss'
+
+    export let headings: TableProps['headings'] = []
+    export let footer: TableProps['footer'] = []
+    export let data: TableProps['data'] = []
+    export let hover: TableProps['hover'] = false
+    export let striped: TableProps['striped'] = null
+    export let offsetStripe: TableProps['offsetStripe'] = false
+    export let compact: TableProps['compact'] = false
+    export let className: TableProps['className'] = ''
+
+    const classes = [
+        'w-table',
+        hover && 'hover',
+        striped && `striped-${striped}s`,
+        offsetStripe && 'offset',
+        compact && 'compact',
+        className
+    ].filter(Boolean).join(' ')
+</script>
+
+<div class={classes}>
+    <table>
+        {#if headings?.length}
+            <thead>
+                <tr>
+                    {#each headings as heading}
+                        <th>{heading}</th>
+                    {/each}
+                </tr>
+            </thead>
+        {/if}
+        <tbody>
+            {#each data as row}
+                <tr>
+                    {#each row as column}
+                        <td>{@html column}</td>
+                    {/each}
+                </tr>
+            {/each}
+        </tbody>
+        {#if footer?.length}
+            <tfoot>
+                <tr>
+                    {#each footer as data}
+                        <td>{data}</td>
+                    {/each}
+                </tr>
+            </tfoot>
+        {/if}
+    </table>
+</div>
diff --git a/src/components/Table/Table.tsx b/src/components/Table/Table.tsx
new file mode 100644
index 0000000..301a5c8
--- /dev/null
+++ b/src/components/Table/Table.tsx
@@ -0,0 +1,63 @@
+import React from 'react'
+import type { TableProps } from './table'
+
+import './table.scss'
+
+const Table = ({
+    headings,
+    footer,
+    data,
+    hover,
+    striped,
+    offsetStripe,
+    compact,
+    className
+}: TableProps) => {
+    const classes = [
+        'w-table',
+        hover && 'hover',
+        striped && `striped-${striped}s`,
+        offsetStripe && 'offset',
+        compact && 'compact',
+        className
+    ].filter(Boolean).join(' ')
+
+    return (
+        <div className={classes}>
+            <table>
+                {headings?.length && (
+                    <thead>
+                        <tr>
+                            {headings.map((heading, index) => (
+                                <th key={index}>{heading}</th>
+                            ))}
+                        </tr>
+                    </thead>
+                )}
+                <tbody>
+                    {data.map((row, rowIndex) => (
+                        <tr key={rowIndex}>
+                            {row.map((column, columnIndex) => (
+                                <td
+                                    key={columnIndex}
+                                    dangerouslySetInnerHTML={{ __html: column }}
+                                />
+                            ))}
+                        </tr>
+                    ))}
+                </tbody>
+                {footer?.length && (
+                    <tfoot>
+                        <tr>
+                            {footer.map((data, index) => (
+                                <td key={index}>{data}</td>
+                            ))}
+                        </tr>
+                    </tfoot>
+                )}
+            </table>
+        </div>
+    )
+}
+
+export default Table
diff --git a/src/components/Table/table.scss b/src/components/Table/table.scss
new file mode 100644
index 0000000..cf6384d
--- /dev/null
+++ b/src/components/Table/table.scss
@@ -0,0 +1,65 @@
+@import '../../scss/config.scss';
+
+.w-table {
+    overflow-x: auto;
+
+    table {
+        width: 100%;
+        border-collapse: collapse;
+        text-align: left;
+        font-size: 16px;
+    }
+
+    thead,
+    tfoot {
+        font-family: Bold;
+    }
+
+    th,
+    td {
+        padding: 5px 10px;
+        white-space: nowrap;
+    }
+
+    thead,
+    tr {
+        border-bottom: 1px solid #252525;
+
+        &:last-child {
+            border-bottom: 0;
+        }
+    }
+
+    a {
+        text-decoration: underline;
+    }
+
+    tfoot,
+    &.hover tr:hover,
+    &.striped-rows tbody tr:nth-child(odd),
+    &.striped-rows.offset tbody tr:nth-child(even),
+    &.striped-columns td:nth-child(odd),
+    &.striped-columns.offset td:nth-child(even) {
+        background: #111;
+    }
+
+    &.striped-rows tr,
+    &.striped-rows thead,
+    &.striped-columns tr,
+    &.striped-columns thead {
+        border-bottom: 0;
+    }
+
+    &.striped-rows.offset tbody tr:nth-child(odd),
+    &.striped-rows.offset tfoot,
+    &.striped-columns.offset td:nth-child(odd),
+    &.striped-columns tfoot {
+        background: transparent;
+    }
+
+    &.compact {
+        th, td {
+            padding: 3px 10px;
+        }
+    }
+}
diff --git a/src/components/Table/table.ts b/src/components/Table/table.ts
new file mode 100644
index 0000000..947680b
--- /dev/null
+++ b/src/components/Table/table.ts
@@ -0,0 +1,10 @@
+export type TableProps = {
+    headings?: string[]
+    footer?: string[]
+    data: string[][]
+    hover?: boolean
+    striped?: 'column' | 'row' | null
+    offsetStripe?: boolean
+    compact?: boolean
+    className?: string
+}
diff --git a/src/helpers.js b/src/helpers.js
new file mode 100644
index 0000000..bafd477
--- /dev/null
+++ b/src/helpers.js
@@ -0,0 +1,26 @@
+export const getSections = ({
+    title,
+    components,
+    showSubTitle = false
+}) => {
+    return [
+        {
+            title: `Astro ${title}`,
+            component: components[0],
+        },
+        {
+            title: `Svelte ${title}`,
+            component: components[1],
+            ...(showSubTitle && {
+                subTitle: 'For interactive examples, visit <a href="/svelte">Svelte Playground</a>',
+            })
+        },
+        {
+            title: `React ${title}`,
+            component: components[2],
+            ...(showSubTitle && {
+                subTitle: 'For interactive examples, visit <a href="/react">React Playground</a>',
+            })
+        }
+    ]
+}
diff --git a/src/pages/alert.astro b/src/pages/alert.astro
index 39f59d8..3a9079f 100644
--- a/src/pages/alert.astro
+++ b/src/pages/alert.astro
@@ -6,20 +6,12 @@ import AstroAlert from '@components/Alert/Alert.astro'
 import SvelteAlert from '@components/Alert/Alert.svelte'
 import ReactAlert from '@components/Alert/Alert.tsx'
 
-const sections = [
-    {
-        title: 'Astro alerts',
-        component: AstroAlert
-    },
-    {
-        title: 'Svelte alerts',
-        component: SvelteAlert
-    },
-    {
-        title: 'React alerts',
-        component: ReactAlert
-    }
-]
+import { getSections } from '@helpers'
+
+const sections = getSections({
+    title: 'alerts',
+    components: [AstroAlert, SvelteAlert, ReactAlert]
+})
 ---
 
 <Layout>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index d949453..0a04afb 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -9,11 +9,13 @@ import Badge from '@components/Badge/Badge.astro'
 import Button from '@components/Button/Button.astro'
 import Checkbox from '@components/Checkbox/Checkbox.astro'
 import Icon from '@components/Icon/Icon.astro'
+import Input from '@components/Input/Input.astro'
 import Progress from '@components/Progress/Progress.astro'
 import Radio from '@components/Radio/Radio.astro'
 import Rating from '@components/Rating/Rating.astro'
 import Spinner from '@components/Spinner/Spinner.astro'
 import Switch from '@components/Switch/Switch.astro'
+import Table from '@components/Table/Table.astro'
 import Tabs from '@components/Tabs/Tabs.astro'
 import Timeline from '@components/Timeline/Timeline.astro'
 import TimelineItem from '@components/TimelineItem/TimelineItem.astro'
@@ -111,6 +113,9 @@ const tabItems = [{
                 color="#f2c262"
             />
         </CardWrapper>
+        <CardWrapper title="Input" href="/input">
+            <Input placeholder="Please enter your email." />
+        </CardWrapper>
         <CardWrapper title="Progress" href="/progress">
             <Progress value={33} />
         </CardWrapper>
@@ -129,6 +134,12 @@ const tabItems = [{
         <CardWrapper title="Switch" href="/switch">
             <Switch toggled={true} />
         </CardWrapper>
+        <CardWrapper title="Table" href="/table">
+            <Table
+                headings={['ID', 'Name']}
+                data={[['1', 'John Doe']]}
+            />
+        </CardWrapper>
         <CardWrapper title="Tabs" href="/tabs">
             <Tabs items={tabItems} theme="boxed" />
         </CardWrapper>
diff --git a/src/pages/input.astro b/src/pages/input.astro
new file mode 100644
index 0000000..9338d16
--- /dev/null
+++ b/src/pages/input.astro
@@ -0,0 +1,168 @@
+---
+import Layout from '@static/Layout.astro'
+import ComponentWrapper from '@static/ComponentWrapper.astro'
+
+import Icon from '@components/Icon/Icon.astro'
+import AstroInput from '@components/Input/Input.astro'
+import SvelteInput from '@components/Input/Input.svelte'
+import ReactInput from '@components/Input/Input.tsx'
+
+import { getSections } from '@helpers'
+
+const sections = getSections({
+    title: 'inputs',
+    components: [AstroInput, SvelteInput, ReactInput],
+    showSubTitle: true
+})
+---
+
+<Layout>
+    <h1>Input</h1>
+    <div class="grid md-2 lg-3">
+        <ComponentWrapper type="Astro">
+            <AstroInput value="Astro input" />
+        </ComponentWrapper>
+
+        <ComponentWrapper type="Svelte">
+            <SvelteInput value="Svelte input" theme="alert" />
+        </ComponentWrapper>
+
+        <ComponentWrapper type="React">
+            <ReactInput value="React input" theme="info" />
+        </ComponentWrapper>
+    </div>
+
+    {sections.map(section => (
+        <h1>{section.title}</h1>
+        <Fragment>
+            {section.subTitle && <h2 set:html={section.subTitle} />}
+        </Fragment>
+        <div class="grid md-2 lg-3">
+            <ComponentWrapper title="Default with character limit">
+                <section.component maxLength={5} />
+            </ComponentWrapper>
+
+            <ComponentWrapper title="Email input with placeholder">
+                <section.component
+                    type="email"
+                    placeholder="Please enter your email"
+                />
+            </ComponentWrapper>
+
+            <ComponentWrapper title="Password input">
+                <section.component type="password" />
+            </ComponentWrapper>
+
+            <ComponentWrapper title="Number input with min, max, and step">
+                <section.component
+                    type="number"
+                    value={3}
+                    min={1}
+                    max={10}
+                    step={2}
+                />
+            </ComponentWrapper>
+
+            <ComponentWrapper title="Search input with icon">
+                <section.component type="search">
+                    <Icon type="github" slot="icon" />
+                </section.component>
+            </ComponentWrapper>
+
+            <ComponentWrapper title="File input">
+                <section.component type="file" />
+            </ComponentWrapper>
+
+            <ComponentWrapper title="Date input with value">
+                <section.component type="date" value="2024-01-01" />
+            </ComponentWrapper>
+
+            <ComponentWrapper title="Date time input">
+                <section.component type="datetime-local" />
+            </ComponentWrapper>
+
+            <ComponentWrapper title="Month input">
+                <section.component type="month" />
+            </ComponentWrapper>
+
+            <ComponentWrapper title="Week input">
+                <section.component type="week" />
+            </ComponentWrapper>
+
+            <ComponentWrapper title="Time input">
+                <section.component type="time" />
+            </ComponentWrapper>
+
+            <ComponentWrapper title="Color input">
+                <section.component type="color" />
+            </ComponentWrapper>
+
+            <ComponentWrapper title="Input with label">
+                <section.component label="Name" />
+            </ComponentWrapper>
+
+            <ComponentWrapper title="Label and sub text">
+                <section.component
+                    label="Name"
+                    subText="Please provide your full name."
+                />
+            </ComponentWrapper>
+
+            <ComponentWrapper title="Label, sub text, and icon">
+                <section.component
+                    label="Name"
+                    subText="Please provide your username."
+                >
+                    <Icon type="github" slot="icon" />
+                </section.component>
+            </ComponentWrapper>
+
+            <ComponentWrapper title="Disabled input">
+                <section.component
+                    value="This input is disabled"
+                    disabled={true}
+                />
+            </ComponentWrapper>
+
+            <ComponentWrapper title="Info themed input">
+                <section.component
+                    label="Name"
+                    subText="Please provide your full name."
+                    theme="info"
+                />
+            </ComponentWrapper>
+
+            <ComponentWrapper title="Success themed input">
+                <section.component
+                    label="Name"
+                    subText="Please provide your full name."
+                    theme="success"
+                />
+            </ComponentWrapper>
+
+            <ComponentWrapper title="Warning themed input">
+                <section.component
+                    label="Name"
+                    subText="Please provide your full name."
+                    theme="warning"
+                />
+            </ComponentWrapper>
+
+            <ComponentWrapper title="Alert themed input">
+                <section.component
+                    label="Name"
+                    subText="Please provide your full name."
+                    theme="alert"
+                />
+            </ComponentWrapper>
+
+            <ComponentWrapper title="Input with fill style">
+                <section.component
+                    label="Name"
+                    subText="Please provide your full name."
+                    fill={true}
+                />
+            </ComponentWrapper>
+        </div>
+    ))}
+</Layout>
diff --git a/src/pages/progress.astro b/src/pages/progress.astro
index 16bfe96..bbc6bff 100644
--- a/src/pages/progress.astro
+++ b/src/pages/progress.astro
@@ -6,22 +6,13 @@ import AstroProgress from '@components/Progress/Progress.astro'
 import SvelteProgress from '@components/Progress/Progress.svelte'
 import ReactProgress from '@components/Progress/Progress.tsx'
 
-const sections = [
-    {
-        title: 'Astro progress',
-        component: AstroProgress,
-    },
-    {
-        title: 'Svelte progress',
-        component: SvelteProgress,
-        subTitle: 'For interactive examples, visit <a href="/svelte">Svelte Playground</a>',
-    },
-    {
-        title: 'React progress',
-        component: ReactProgress,
-        subTitle: 'For interactive examples, visit <a href="/react">React Playground</a>',
-    }
-]
+import { getSections } from '@helpers'
+
+const sections = getSections({
+    title: 'progress',
+    components: [AstroProgress, SvelteProgress, ReactProgress],
+    showSubTitle: true
+})
 ---
 
 <Layout>
diff --git a/src/pages/table.astro b/src/pages/table.astro
new file mode 100644
index 0000000..9a6638a
--- /dev/null
+++ b/src/pages/table.astro
@@ -0,0 +1,161 @@
+---
+import Layout from '@static/Layout.astro'
+import ComponentWrapper from '@static/ComponentWrapper.astro'
+
+import AstroTable from '@components/Table/Table.astro'
+import SvelteTable from '@components/Table/Table.svelte'
+import ReactTable from '@components/Table/Table.tsx'
+
+import { getSections } from '@helpers'
+
+const sections = getSections({
+    title: 'tables',
+    components: [AstroTable, SvelteTable, ReactTable]
+})
+
+const tableData = [
+    ['1', 'John Doe'],
+    ['2', 'Jane Smith'],
+    ['3', 'Emily Davis'],
+    ['4', 'Frank Williams']
+]
+
+const tableWithHeading = {
+    headings: ['ID', 'Name'],
+    data: tableData
+}
+
+const tableWithHeadingAndFooter = {
+    headings: ['ID', 'Name'],
+    data: tableData,
+    footer: ['Total', '4']
+}
+
+const tableWithMultipleColumns = {
+    headings: ['ID', 'Name', 'Active'],
+    data: tableData.map(data => [...data, '✅']),
+    footer: ['Total', '', '4']
+}
+
+const overflowTable = {
+    headings: ['ID', 'Name', 'Email', 'Active'],
+    footer: ['Total', '', '', '4'],
+    data: tableData.map(data => [
+        ...data,
+        `<a href="mailto:">${data[1]}@example.com</a>`,
+        '✅'
+    ]),
+}
+---
+
+<Layout>
+    <h1>Table</h1>
+    <div class="grid md-2 lg-3">
+        <ComponentWrapper type="Astro">
+            <AstroTable {...tableWithHeading} />
+        </ComponentWrapper>
+
+        <ComponentWrapper type="Svelte">
+            <SvelteTable {...tableWithHeading} />
+        </ComponentWrapper>
+
+        <ComponentWrapper type="React">
+            <ReactTable {...tableWithHeading} />
+        </ComponentWrapper>
+    </div>
+
+    {sections.map(section => (
+        <h1>{section.title}</h1>
+        <div class="grid md-2 lg-3">
+            <ComponentWrapper title="Default">
+                <section.component data={tableData} />
+            </ComponentWrapper>
+
+            <ComponentWrapper title="Table with heading">
+                <section.component {...tableWithHeading} />
+            </ComponentWrapper>
+
+            <ComponentWrapper title="Table with heading and footer">
+                <section.component {...tableWithHeadingAndFooter} />
+            </ComponentWrapper>
+
+            <ComponentWrapper title="Striped rows">
+                <section.component
+                    {...tableWithHeadingAndFooter}
+                    striped="row"
+                />
+            </ComponentWrapper>
+
+            <ComponentWrapper title="Striped columns">
+                <section.component
+                    {...tableWithMultipleColumns}
+                    striped="column"
+                />
+            </ComponentWrapper>
+
+            <ComponentWrapper title="Highlight on hover">
+                <section.component
+                    {...tableWithHeadingAndFooter}
+                    hover={true}
+                />
+            </ComponentWrapper>
+
+            <ComponentWrapper title="Striped rows with offset">
+                <section.component
+                    {...tableWithHeadingAndFooter}
+                    striped="row"
+                    offsetStripe={true}
+                />
+            </ComponentWrapper>
+
+            <ComponentWrapper title="Striped columns with offset">
+                <section.component
+                    {...tableWithMultipleColumns}
+                    striped="column"
+                    offsetStripe={true}
+                />
+            </ComponentWrapper>
+
+            <ComponentWrapper title="Compact table">
+                <section.component
+                    {...tableWithHeadingAndFooter}
+                    compact={true}
+                />
+            </ComponentWrapper>
+
+            <ComponentWrapper title="Center aligned">
+                <section.component
+                    {...tableWithMultipleColumns}
+                    striped="column"
+                    className="center"
+                />
+            </ComponentWrapper>
+
+            <ComponentWrapper title="Right aligned">
+                <section.component
+                    {...tableWithMultipleColumns}
+                    striped="column"
+                    className="right"
+                />
+            </ComponentWrapper>
+
+            <ComponentWrapper title="Overflown with HTML">
+                <section.component
+                    {...overflowTable}
+                    offsetStripe={true}
+                    striped="column"
+                />
+            </ComponentWrapper>
+        </div>
+    ))}
+</Layout>
+
+<style lang="scss" is:global>
+    .center table {
+        text-align: center;
+    }
+
+    .right table {
+        text-align: right;
+    }
+</style>
diff --git a/src/playground/ReactPlayground.tsx b/src/playground/ReactPlayground.tsx
index 5ca51fb..2b6e05d 100644
--- a/src/playground/ReactPlayground.tsx
+++ b/src/playground/ReactPlayground.tsx
@@ -6,6 +6,7 @@ import Accordion from '@components/Accordion/Accordion.tsx'
 import Badge from '@components/Badge/Badge.tsx'
 import Button from '@components/Button/Button.tsx'
 import Checkbox from '@components/Checkbox/Checkbox.tsx'
+import Input from '@components/Input/Input.tsx'
 import Progress from '@components/Progress/Progress.tsx'
 import Radio from '@components/Radio/Radio.tsx'
 import Switch from '@components/Switch/Switch.tsx'
@@ -17,13 +18,12 @@ import { toast } from '@utils/toast'
 
 import styles from './playground.module.scss'
 
-console.log(styles)
-
 const ReactPlayground = () => {
     const [progress, setProgress] = useState(33)
     const [checkbox, setCheckbox] = useState(false)
     const [radio, setRadio] = useState('')
     const [toggle, setToggle] = useState(false)
+    const [input, setInput] = useState('')
 
     return (
         <div className="grid md-2 lg-3">
@@ -56,6 +56,21 @@ const ReactPlayground = () => {
                 <span className={styles.span}>{`${checkbox}`}</span>
             </Card>
 
+            <Card title="Input">
+                <Input
+                    label="Enter a value"
+                    placeholder="Or change the color below"
+                    onKeyUp={(e: any) => setInput(e.target.value)}
+                />
+
+                <Input
+                    type="color"
+                    onChange={(e: any) => setInput(e.target.value)}
+                />
+
+                <span className={styles.span}>{input}</span>
+            </Card>
+
             <Card title="Progress">
                 <Progress value={progress} />
 
diff --git a/src/playground/SveltePlayground.svelte b/src/playground/SveltePlayground.svelte
index cd331ee..4da7f96 100644
--- a/src/playground/SveltePlayground.svelte
+++ b/src/playground/SveltePlayground.svelte
@@ -5,6 +5,7 @@
     import Badge from '@components/Badge/Badge.svelte'
     import Button from '@components/Button/Button.svelte'
     import Checkbox from '@components/Checkbox/Checkbox.svelte'
+    import Input from '@components/Input/Input.svelte'
     import Progress from '@components/Progress/Progress.svelte'
     import Radio from '@components/Radio/Radio.svelte'
     import Switch from '@components/Switch/Switch.svelte'
@@ -20,6 +21,7 @@
     let checkbox = false
     let radio = ''
     let toggle = false
+    let input = ''
 </script>
 
 <div class="playground grid md-2 lg-3">
@@ -52,6 +54,21 @@
         <span class={styles.span}>{checkbox}</span>
     </Card>
 
+    <Card title="Input">
+        <Input
+            label="Enter a value"
+            placeholder="Or change the color below"
+            onKeyUp={e => input = e.target.value}
+        />
+
+        <Input
+            type="color"
+            onChange={e => input = e.target.value}
+        />
+
+        <span class={styles.span}>{input}</span>
+    </Card>
+
     <Card title="Progress">
         <Progress value={progress} />
 
diff --git a/tsconfig.json b/tsconfig.json
index 12f1aaf..9b32344 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -8,7 +8,8 @@
             "@static/*": ["src/static/*"],
             "@playground/*": ["src/playground/*"],
             "@utils/*": ["src/utils/*"],
-            "@data": ["src/data.js"]
+            "@data": ["src/data.js"],
+            "@helpers": ["src/helpers.js"]
         }
     }
 }