---
url: https://lit-ui-router.dev/api/reference/types/LitStateDeclaration.md
---
[lit-ui-router](../index.md) / LitStateDeclaration

# Interface: LitStateDeclaration\<T>

Defined in: [packages/lit-ui-router/src/interface.ts:404](https://github.com/simshanith/lit-ui-router/blob/92660184d9980e90964f7e785d5efeb5cae43b42/packages/lit-ui-router/src/interface.ts#L404)

State declaration interface for Lit applications.

Extends the core [StateDeclaration](https://ui-router.github.io/core/docs/latest/interfaces/_state_interface_.statedeclaration.html) with Lit-specific component support.
The `component` property accepts template functions, LitElement classes, or both.

## Examples

**Simplest: inline template function**

```ts
{ name: 'home', url: '/', component: () => html`<h1>Home</h1>` }
```

**Template with route parameters**

```ts
{
  name: 'user',
  url: '/user/:id',
  component: (props) => html`<h1>User ${props?.transition?.params().id}</h1>`
}
```

**Template with resolved data**

```ts
{
  name: 'users',
  url: '/users',
  component: (props) => html`
    <ul>${props?.resolves?.users?.map(u => html`<li>${u.name}</li>`)}</ul>
  `,
  resolve: [{ token: 'users', resolveFn: () => fetch('/api/users').then(r => r.json()) }]
}
```

**LitElement class (for complex components)**

```ts
{ name: 'dashboard', url: '/dashboard', component: DashboardElement }
```

**Nested states**

```ts
const states: LitStateDeclaration[] = [
  { name: 'app', abstract: true, component: AppShell },
  { name: 'app.home', url: '/home', component: () => html`<h1>Home</h1>` },
  { name: 'app.users', url: '/users', component: UsersView }
];
```

## See

* [StateDeclaration](https://ui-router.github.io/core/docs/latest/interfaces/_state_interface_.statedeclaration.html)
* [RoutedLitTemplate](RoutedLitTemplate.md)
* [RoutedLitElement](RoutedLitElement.md)

## Extends

* [`StateDeclaration`](https://ui-router.github.io/core/docs/latest/interfaces/_state_interface_.statedeclaration.html)

## Type Parameters

| Type Parameter | Default type |
| ------ | ------ |
|  `T` *extends* [`DefaultResolvesType`](DefaultResolvesType.md) | [`DefaultResolvesType`](DefaultResolvesType.md) |

## Properties

| Property | Type | Description | Overrides | Defined in |
| ------ | ------ | ------ | ------ | ------ |
|  `component?` | [`LitViewDeclaration`](LitViewDeclaration.md)<`T`> | The Lit component to render for this state. A view typed with required resolves is rejected here unless `T` is threaded onto the declaration, as in `LitStateDeclaration<T>[]`. | - | [packages/lit-ui-router/src/interface.ts:413](https://github.com/simshanith/lit-ui-router/blob/92660184d9980e90964f7e785d5efeb5cae43b42/packages/lit-ui-router/src/interface.ts#L413) |
|  `views?` | { \[`key`: `string`]: [`LitViewDeclaration`](LitViewDeclaration.md)<`T`>; } | An optional object used to define multiple named views. Overrides the core [StateDeclaration.views](https://ui-router.github.io/core/docs/latest/interfaces/_state_interface_.statedeclaration.html#views) property so each named view accepts any [LitViewDeclaration](LitViewDeclaration.md) format — a bare component or an object with a `component` property — threading the resolves generic. **See** [LitViewDeclaration](LitViewDeclaration.md) | `StateDeclaration.views` | [packages/lit-ui-router/src/interface.ts:424](https://github.com/simshanith/lit-ui-router/blob/92660184d9980e90964f7e785d5efeb5cae43b42/packages/lit-ui-router/src/interface.ts#L424) |