> For the complete documentation index, see [llms.txt](https://tutorial.specian.co.uk/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://tutorial.specian.co.uk/frontend/styles.md).

# Styles

So far, components are rather unattractive. Let's start using [`styled-components`](https://www.styled-components.com).

{% code title="\~/packages/web" %}

```
$ yarn add styled-components @types/styled-components
```

{% endcode %}

{% code title="Link.tsx" %}

```typescript
import * as React from "react";
import styled from "styled-components";

export interface LinkProps {
  id: string;
  uri: string;
  userId: string;
}

const Container = styled.div`
  border: 1px solid gray;
  width: 200px;
  padding: 20px;
`;

export const Link = (props: LinkProps) => (
  <Container>URI: {props.uri}</Container>
);
```

{% endcode %}

![](https://2559875260-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LnRxZ2gbXvMdM70TAFz%2F-LqI05wGWCowt3d0Mwbl%2F-LqI0wl-usZg-ZEueL64%2Fimage.png?alt=media\&token=bee7c3c0-b684-49f7-b983-8c07d834fa52)

{% hint style="info" %}
Read the [Styled Component documentation](https://www.styled-components.com/docs/).
{% endhint %}