---
title: useToken | gluestack-style
description: useToken
showHeader: false
---

import { Canvas, Meta, Story } from '@storybook/addon-docs';

<Meta title="hooks/useToken" />

# useToken

**useToken** is a custom hook to resolves design tokens from the theme.

### Import

To use the useToken in your project, import `useToken` from `@gluestack-style/react`. as Demonstrated below.

```jsx
import { useToken } from '@gluestack-style/react';
```

Let's use our `useToken` value to give background color to `View` from `react-native`.

```jsx
import { View } from 'react-native';
import { useToken } from '@gluestack-style/react';

function Example() {
  const resolvedGreen = useToken('colors', 'green500');
  return (
    <View
      style={{
        width: 100,
        height: 100,
        backgroundColor: resolvedGreen,
      }}
    />
  );
}
```
