diff --git a/src/Button.tsx b/src/Button.tsx
index b429cd7..1dc2ffa 100644
--- a/src/Button.tsx
+++ b/src/Button.tsx
@@ -5,7 +5,7 @@ export enum ButtonFormats {
    PRIMARY,
    SECONDARY,
    ERROR,
-   SUCCESS
+   SUCCESS,
 }
 
 export interface IButtonProps extends JSX.HTMLAttributes<HTMLButtonElement> {
@@ -20,7 +20,7 @@ export default function Button({
 }: IButtonProps) {
    let cl = "ht-btn";
 
-   if (className) cl += " " + className;
+   if (className) cl += " " + (className || "");
 
    switch (format) {
       case ButtonFormats.DEFAULT:
diff --git a/src/Card.tsx b/src/Card.tsx
index 7f57ae2..2eacdb3 100644
--- a/src/Card.tsx
+++ b/src/Card.tsx
@@ -5,7 +5,7 @@ export default function Card({
    ...props
 }: JSX.HTMLAttributes<HTMLDivElement>) {
    return (
-      <div className={"ht-card " + className} {...props}>
+      <div className={"ht-card " + (className || "")} {...props}>
          {children}
       </div>
    );
diff --git a/src/Container.tsx b/src/Container.tsx
index df3b4e0..66ebcf1 100644
--- a/src/Container.tsx
+++ b/src/Container.tsx
@@ -5,7 +5,7 @@ export default function Container({
    ...props
 }: JSX.HTMLAttributes<HTMLDivElement>) {
    return (
-      <div className={"ht-container " + className} {...props}>
+      <div className={"ht-container " + (className || "")} {...props}>
          {children}
       </div>
    );
diff --git a/src/Fab.tsx b/src/Fab.tsx
index 84c35d7..a4635d6 100644
--- a/src/Fab.tsx
+++ b/src/Fab.tsx
@@ -9,7 +9,7 @@ export default function Fab({
    let cl = "ht-fab " + (alignLeft ? "ht-fab-left " : "");
 
    return (
-      <button className={cl + className} {...props}>
+      <button className={cl + (className || "")} {...props}>
          {children}
       </button>
    );
diff --git a/src/Header.tsx b/src/Header.tsx
index c6cc5e0..a69f182 100644
--- a/src/Header.tsx
+++ b/src/Header.tsx
@@ -8,7 +8,7 @@ export default function Header({
    ...props
 }: JSX.HTMLAttributes<HTMLDivElement>) {
    return (
-      <header className={"ht-header " + className} {...props}>
+      <header className={"ht-header " + (className || "")} {...props}>
          {children}
       </header>
    );
diff --git a/src/IconButton.tsx b/src/IconButton.tsx
index a084f41..a64b176 100644
--- a/src/IconButton.tsx
+++ b/src/IconButton.tsx
@@ -5,7 +5,7 @@ export default function IconButton({
    ...props
 }: JSX.HTMLAttributes<HTMLButtonElement>) {
    return (
-      <button className={"ht-btn ht-btn-icon " + className} {...props}>
+      <button className={"ht-btn ht-btn-icon " + (className || "")} {...props}>
          {children}
       </button>
    );
diff --git a/src/Input.tsx b/src/Input.tsx
index cd01df8..02614c5 100644
--- a/src/Input.tsx
+++ b/src/Input.tsx
@@ -6,7 +6,7 @@ export function Input({
    ...props
 }: JSX.HTMLAttributes<HTMLInputElement>) {
    return (
-      <input className={"ht-inp " + className} {...props}>
+      <input className={"ht-inp " + (className || "")} {...props}>
          {children}
       </input>
    );
@@ -18,7 +18,7 @@ export function TextArea({
    ...props
 }: JSX.HTMLAttributes<HTMLTextAreaElement>) {
    return (
-      <textarea className={"ht-inp " + className} {...props}>
+      <textarea className={"ht-inp " + (className || "")} {...props}>
          {children}
       </textarea>
    );
@@ -30,7 +30,7 @@ export function InputGroup({
    ...props
 }: JSX.HTMLAttributes<HTMLDivElement>) {
    return (
-      <div className={"ht-input-group " + className} {...props}>
+      <div className={"ht-input-group " + (className || "")} {...props}>
          {children}
       </div>
    );
@@ -74,7 +74,7 @@ export function InputSelect({
    ...props
 }: JSX.HTMLAttributes<HTMLSelectElement>) {
    return (
-      <select className={"ht-inp " + className} {...props}>
+      <select className={"ht-inp " + (className || "")} {...props}>
          {children}
       </select>
    );
diff --git a/src/List.tsx b/src/List.tsx
index 3e83e29..1a9b034 100644
--- a/src/List.tsx
+++ b/src/List.tsx
@@ -17,10 +17,10 @@ export default function List({
 
    if (divider) cl += "ht-list-divider ";
 
-   cl += className;
+   cl += className || "";
 
    return (
-      <ul className={className} {...props}>
+      <ul className={cl} {...props}>
          {children}
       </ul>
    );
diff --git a/src/Modal.tsx b/src/Modal.tsx
index 3c0a038..493ed4c 100644
--- a/src/Modal.tsx
+++ b/src/Modal.tsx
@@ -8,7 +8,9 @@ export function Modal({
 }: JSX.HTMLAttributes<HTMLDivElement> & { hidden?: boolean }) {
    return (
       <div
-         className={"ht-modal " + className + (hidden ? "ht-modal-hidden" : "")}
+         className={
+            "ht-modal " + (className || "") + (hidden ? "ht-modal-hidden" : "")
+         }
          {...props}
       >
          {children}
@@ -22,7 +24,7 @@ export function ModalTitle({
    ...props
 }: JSX.HTMLAttributes<HTMLDivElement>) {
    return (
-      <div className={"ht-modal-title " + className} {...props}>
+      <div className={"ht-modal-title " + (className || "")} {...props}>
          {children}
       </div>
    );
@@ -34,7 +36,7 @@ export function ModalContent({
    ...props
 }: JSX.HTMLAttributes<HTMLDivElement>) {
    return (
-      <div className={"ht-modal-content " + className} {...props}>
+      <div className={"ht-modal-content " + (className || "")} {...props}>
          {children}
       </div>
    );
@@ -46,7 +48,7 @@ export function ModalActions({
    ...props
 }: JSX.HTMLAttributes<HTMLDivElement>) {
    return (
-      <div className={"ht-modal-action " + className} {...props}>
+      <div className={"ht-modal-action " + (className || "")} {...props}>
          {children}
       </div>
    );
diff --git a/src/Table.tsx b/src/Table.tsx
index 71df7a6..819b31f 100644
--- a/src/Table.tsx
+++ b/src/Table.tsx
@@ -6,7 +6,7 @@ export default function Table({
    ...props
 }: JSX.HTMLAttributes<HTMLDivElement>) {
    return (
-      <div className={"ht-table " + className} {...props}>
+      <div className={"ht-table " + (className || "")} {...props}>
          {children}
       </div>
    );