example.mdx

title	Example Component
description	A full example of a component using CSS Components.
category	Getting Started
index	16

Below is a full example of a basic component put together using CSS Components.

src
└── components
    └── Panel
        ├── index.tsx # The main component file
        ├── styles.module.css # The CSS file
        └── styles.ts # The CSS Components file
    ├── SomeOtherComponent
    └── SomeOtherComponent

Each component folder can be split into 3 files:

• index.tsx, your standard React component;
• styles.module.css, your standard CSS styles; and
• styles.ts, which bridges the gap between the two.

Let's create a simple Panel component with a title and some content. The component will have a wide variant that will make the panel fill the width of its container.

Here it is in action:

This is some example content. It's working great! 😄

import Panel from "@/components/Panel";

() => (
  <Panel title="Hello World" wide>
    <p>This is some example content. It's working great! 😄</p>
  </Panel>
);

index.tsx

This is the main component file. It's a simple component with a title and some content.

If you've used React in any capacity this format should be very familiar to you, with the exception of PanelWrapper, Title and Content. These are all CSS Components that are imported from styles.ts.

Note how this component is free of ugly CSS class names. Everything is semantic.

import { PanelWrapper, Title, Content } from "./styles";

interface Props {
  title: string;
  children: React.ReactNode;
  wide?: boolean;
}

const Panel = ({ title, children, wide }: Props) => (
  <PanelWrapper wide={wide}>
    <Title>{title}</Title>
    <Content>{children}</Content>
  </PanelWrapper>
);

export default Panel;

styles.module.css

Next is your bog standard CSS file. It contains all the CSS classes used by CSS Components. You're free to name them how you want, but we do have a helpful naming convention.

While this file uses CSS, you can use whatever styling solution you want. We'd recommend using SCSS; it works really well with CSS components!

div.PanelWrapper {
  display: flex;
  flex-direction: column;
  text-align: center;
  margin: auto;
  width: 240px;
  border-radius: 0.5rem;
  overflow: hidden;
  background-color: #e6e6e6;
  color: black;
}

div.PanelWrapper_wide {
  width: 100%;
}

h2.Title {
  background-color: #d6d6d6;
  margin: 0;
  padding: 1rem;
}

section.Content {
  padding: 1rem;
}

styles.ts ✨

The styles file is where the magic happens! It contains all of the CSS Components that are imported into the main React component.

As you can see, CSS Components are nothing more than a way to map CSS classes to React components.

You can either create this file yourself, or use our helpful CLI tool.

import { styled } from "@phantomstudios/css-components";

import css from "./styles.module.css";

export const PanelWrapper = styled("div", {
  css: css.PanelWrapper,
  variants: {
    wide: {
      true: css.PanelWrapper_wide,
    },
  },
});

export const Title = styled("h2", {
  css: css.Title,
});

export const Content = styled("section", {
  css: css.Content,
});

And that's it!

As you can see, the only thing that's really different from your standard, CSS-Component-less workflow is the styles.ts file. Pop that in and you're good to go.

Happy styling!