# Hidden
> Utility component to responsively hide or show content.

## Import

```js
import { Hidden } from '@gemini-suite/vera-react';
```

## Examples

### Basic

`Hidden` provides a way to hide or show content/components according to the passed value.

<Callout variant="tip">

`Hidden` hides content both visually and for assistive technology/screen reader users.
For hiding content but keeping it available to screen readers, use [Visually Hidden component](/components/utility/visually-hidden).

</Callout>

```jsx
<Flex flow="column">
  <Hidden hide>{'Hidden'}</Hidden>
  <Hidden hide={false}>{'Shown'}</Hidden>
</Flex>
```

### Responsive

`Hidden` supports responsive syntax for `hide` property, which means you can control the visibility based on the size of the viewport.

```jsx
<Hidden hide={{ '@initial': true, '@mqLargeAndUp': false }}>
  {'Visible on large screens and above'}
</Hidden>
```

---

## API Reference

| Name      | Type                                                      | Default   | Description                                                                                                                                                                                                                                                                                  | Required |
| --------- | --------------------------------------------------------- | --------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- |
| `as`      | `keyof JSX.IntrinsicElements \| React.ComponentType<any>` | `div`     | Change the component to a different HTML tag or custom component. This will merge the original component props with the props of the supplied element/component and change the underlying DOM node.   For more details, read our [Composition](/get-started/composition#polymorphism) guide. |          |
| `css`     | `StitchesCss`                                             |           | Apply styles directly to a component in a similar way how you would define inline styles. Vera uses [Stitches](https://stitches.dev/) under the hood with a fully-typed API and support for features like tokens, media queries, or variants.                                                |          |
| `hide`    | `boolean`                                                 | `true`    | When `true` the children are going to be hidden. Supports responsive syntax.                                                                                                                                                                                                                 |          |
| `display` | `"block" \| "inline" \| "flex" \| "contents"`             | `"block"` | Controls the display style value when `hide` is not active.                                                                                                                                                                                                                                  |          |