diff --git a/examples/component-examples/FilterList.js b/examples/component-examples/FilterList.js
new file mode 100644
index 00000000000..d5304fcc2e8
--- /dev/null
+++ b/examples/component-examples/FilterList.js
@@ -0,0 +1,33 @@
+import React from 'react'
+import {LiveEditor} from '@compositor/kit'
+import {Block, FilterList, FilterListItem} from '../../src'
+
+const filterListCode = `
+ First Filter
+ Second Filter
+ Third Filter
+
+`
+
+const filterListSmallCode = `
+ First Filter
+ Second Filter
+ Third Filter
+
+`
+
+const FilterListExample = {
+ name: 'Filter List',
+ element: (
+
+
+
+
+
+
+
+
+ )
+}
+
+export default FilterListExample
diff --git a/examples/component-examples/index.js b/examples/component-examples/index.js
index eba1e7ff901..bb0036003e9 100644
--- a/examples/component-examples/index.js
+++ b/examples/component-examples/index.js
@@ -12,6 +12,7 @@ export {default as CounterLabel} from './CounterLabel'
export {default as Details} from './Details'
export {default as DonutChart} from './DonutChart'
export {default as Dropdown} from './Dropdown'
+export {default as FilterList} from './FilterList'
export {default as Flash} from './Flash'
export {default as Flex} from './Flex'
export {default as FontSizes} from './FontSizes'
diff --git a/src/FilterList.js b/src/FilterList.js
new file mode 100644
index 00000000000..011d80bc765
--- /dev/null
+++ b/src/FilterList.js
@@ -0,0 +1,31 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import classnames from 'classnames'
+import {withSystemProps, COMMON} from './system-props'
+
+export const ITEM_CLASS = 'filter-item'
+export const SELECTED_CLASS = 'selected'
+
+function FilterList({children, className, small}) {
+ const classes = classnames(className, 'filter-list', small && 'small')
+
+ const items = React.Children.map(children, child => {
+ return {child}
+ })
+
+ return
+}
+
+Object.assign(FilterList, {ITEM_CLASS, SELECTED_CLASS})
+
+FilterList.defaultProps = {
+ m: 0,
+ p: 0
+}
+
+FilterList.propTypes = {
+ children: PropTypes.node,
+ small: PropTypes.bool
+}
+
+export default withSystemProps(FilterList, COMMON)
diff --git a/src/FilterListItem.js b/src/FilterListItem.js
new file mode 100644
index 00000000000..3be141c2e9e
--- /dev/null
+++ b/src/FilterListItem.js
@@ -0,0 +1,42 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import classnames from 'classnames'
+import {ITEM_CLASS, SELECTED_CLASS} from './FilterList'
+import {withSystemProps, COMMON} from './system-props'
+
+function getCountComponent(count) {
+ return (
+
+ {count}
+
+ )
+}
+
+function FilterListItem({children, className, count, selected, is: Tag, ...rest}) {
+ const classes = classnames(ITEM_CLASS, selected && SELECTED_CLASS, className)
+
+ if (typeof rest.to === 'string') {
+ rest.activeClassName = SELECTED_CLASS
+ }
+
+ return (
+
+ {count && getCountComponent(count)}
+ {children}
+
+ )
+}
+
+FilterListItem.defaultProps = {
+ is: 'a'
+}
+
+FilterListItem.propTypes = {
+ children: PropTypes.node,
+ className: PropTypes.string,
+ count: PropTypes.string,
+ is: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
+ selected: PropTypes.bool
+}
+
+export default withSystemProps(FilterListItem, COMMON)
diff --git a/src/__tests__/FilterList.js b/src/__tests__/FilterList.js
new file mode 100644
index 00000000000..c4f8261bc18
--- /dev/null
+++ b/src/__tests__/FilterList.js
@@ -0,0 +1,26 @@
+import React from 'react'
+import FilterList from '../FilterList'
+import {render, rendersClass} from '../utils/testing'
+import {COMMON} from '../system-props'
+
+describe('FilterList', () => {
+ it('implements common system props', () => {
+ expect(FilterList).toImplementSystemProps(COMMON)
+ })
+
+ it('renders a ', () => {
+ expect(render().type).toEqual('ul')
+ })
+
+ it('wraps children in - ', () => {
+ expect(render(Hello).children.pop().type).toEqual('li')
+ })
+
+ it('adds the filter-list class', () => {
+ expect(rendersClass(, 'filter-list')).toEqual(true)
+ })
+
+ it('respects the "small" prop', () => {
+ expect(rendersClass(, 'small')).toEqual(true)
+ })
+})
diff --git a/src/__tests__/FilterListItem.js b/src/__tests__/FilterListItem.js
new file mode 100644
index 00000000000..9c6d2fd5a0b
--- /dev/null
+++ b/src/__tests__/FilterListItem.js
@@ -0,0 +1,35 @@
+/* eslint-disable jsx-a11y/anchor-has-content, jsx-a11y/anchor-is-valid */
+import React from 'react'
+import FilterListItem from '../FilterListItem'
+import {render} from '../utils/testing'
+import {COMMON} from '../system-props'
+
+describe('FilterListItem', () => {
+ it('implements common system props', () => {
+ expect(FilterListItem).toImplementSystemProps(COMMON)
+ })
+
+ it('renders an by default', () => {
+ expect(render().type).toEqual('a')
+ })
+
+ it('renders the given "tag" prop', () => {
+ const Type = props =>
+ expect(render()).toMatchSnapshot()
+ })
+
+ it('respects the "selected" prop', () => {
+ expect(render()).toMatchSnapshot()
+ })
+
+ it('adds activeClassName={SELECTED_CLASS} when it gets a "to" prop', () => {
+ const Mock = jest.fn(() => )
+ expect(render()).toMatchSnapshot()
+ })
+
+ it('respects "count" prop', () => {
+ const CountMock = render().children.pop()
+ expect(CountMock.type).toEqual('span')
+ expect(CountMock.props.className).toEqual('count')
+ })
+})
diff --git a/src/__tests__/__snapshots__/FilterListItem.js.snap b/src/__tests__/__snapshots__/FilterListItem.js.snap
new file mode 100644
index 00000000000..e5502f073a7
--- /dev/null
+++ b/src/__tests__/__snapshots__/FilterListItem.js.snap
@@ -0,0 +1,23 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`FilterListItem adds activeClassName={SELECTED_CLASS} when it gets a "to" prop 1`] = `
+
+`;
+
+exports[`FilterListItem renders the given "tag" prop 1`] = `
+
+`;
+
+exports[`FilterListItem respects the "selected" prop 1`] = `
+
+`;
diff --git a/src/index.js b/src/index.js
index 593d651eacc..68175f5d9fa 100644
--- a/src/index.js
+++ b/src/index.js
@@ -24,6 +24,8 @@ export {default as Dropdown} from './Dropdown'
export {default as DonutChart} from './DonutChart'
export {default as DonutSlice} from './DonutSlice'
+export {default as FilterList} from './FilterList'
+export {default as FilterListItem} from './FilterListItem'
export {default as FlexContainer} from './FlexContainer'
export {default as FlexItem} from './FlexItem'