## Components

### Build your own component library

Beautiful, accessible React + Tailwind CSS components to copy & paste. Ready to customize in Subframe.

### Browse components

#### Accordion

[Accordion](/content/library/components/accordion/index.html)  
A great title for an alert Describe what's happening in more detail.

#### Alert

[Alert](/content/library/components/alert/index.html)  
2015 2016 2017 2018 2019 2020 2021 2022 03570105140  
Biology  
Business  
Psychology

#### Area Chart

[Area Chart](/content/library/components/area-chart/index.html)

#### Avatar

[Avatar](/content/library/components/avatar/index.html)

#### Badge

[Badge](/content/library/components/badge/index.html)

#### Bar Chart

2015 2016 2017 2018 2019 2020 2021 2022 03570105140  
Biology  
Business  
Psychology  
[Bar Chart](/content/library/components/bar-chart/index.html)

#### Breadcrumbs

[Breadcrumbs](/content/library/components/breadcrumbs/index.html)

#### Button

[Button](/content/library/components/button/index.html)

#### Calendar

[Calendar](/content/library/components/calendar/index.html)

| Month | Su | Mo | Tu | We | Th | Fr | Sa |
|-------|----|----|----|----|----|----|----|
| Sept  | 30 | 31 |  1 |  2 |  3 |  4 |  5 |
|       |  6 |  7 |  8 |  9 | 10 | 11 | 12 |
|       | 13 | 14 | 15 | 16 | 17 | 18 | 19 |
|       | 20 | 21 | 22 | 23 | 24 | 25 | 26 |
|       | 27 | 28 | 29 | 30 |  1 |  2 |  3 |

#### Checkbox

[Checkbox](/content/library/components/checkbox/index.html)

#### Checkbox Card

Enable notifications Be in the loop anytime something happens.  
[Checkbox Card](/content/library/components/checkbox-card/index.html)

#### Checkbox Group

Label  
Option  
Option  
Option  
[Checkbox Group](/content/library/components/checkbox-group/index.html)

#### Context Menu

[Context Menu](/content/library/components/context-menu/index.html)

#### Copy to clipboard button

[Copy to clipboard button](/content/library/components/copy-to-clipboard-button/index.html)

#### Dialog

Dialog Header This is the dialog description.  
[Dialog](/content/library/components/dialog/index.html)

#### Drawer

Drawer Header  
Drawer Section  
Label Value  
Label Value  
Label Value  
Drawer CTA  
[Drawer](/content/library/components/drawer/index.html)

#### Dropdown Menu

[Dropdown Menu](/content/library/components/dropdown-menu/index.html)

#### Fullscreen Dialog

[Fullscreen Dialog](/content/library/components/fullscreen-dialog/index.html)

#### Icon Button

[Icon Button](/content/library/components/icon-button/index.html)

#### Icon with background

[Icon with background](/content/library/components/icon-with-background/index.html)

#### Line Chart

[Line Chart](/content/library/components/line-chart/index.html)

#### Link Button

[Link Button](/content/library/components/link-button/index.html)

#### Loader

[Loader](/content/library/components/loader/index.html)

#### Pie Chart

[Pie Chart](/content/library/components/pie-chart/index.html)

#### Progress

[Progress](/content/library/components/progress/index.html)

#### Radio Card Group

[Radio Card Group](/content/library/components/radio-card-group/index.html)

#### Radio Group

[Radio Group](/content/library/components/radio-group/index.html)

#### Select

[Select](/content/library/components/select/index.html)

#### Sidebar with sections

[Sidebar with sections](/content/library/components/sidebar-with-sections/index.html)

#### Skeleton Circle

[Skeleton Circle](/content/library/components/skeleton-circle/index.html)

#### Skeleton Text

[Skeleton Text](/content/library/components/skeleton-text/index.html)

#### Slider

[Slider](/content/library/components/slider/index.html)

#### Stepper

1. Create an account  
2. Enter details  
3. Start building!  
[Stepper](/content/library/components/stepper/index.html)

#### Switch

[Switch](/content/library/components/switch/index.html)

#### Table

| Name | Email | Role |
| --- | --- | --- |
| John Walton | john.walton@example.com | Engineering |
| Sarah Chandler | sarah.chandler@example.com | Design |
| Susan Best | susan.best@example.com | Product |

#### Tabs

[Tabs](/content/library/components/tabs/index.html)

#### Text Area

[Text Area](/content/library/components/text-area/index.html)

#### Text Field

[Text Field](/content/library/components/text-field/index.html)

#### Toast

A toast message Additional details  
[Toast](/content/library/components/toast/index.html)

#### Toggle Group

[Toggle Group](/content/library/components/toggle-group/index.html)

#### Tooltip

[Tooltip](/content/library/components/tooltip/index.html)

#### Tree View

[Tree View](/content/library/components/tree-view/index.html)

#### Vertical Stepper

1. Create account  
2. Invite team  
3. Start building  
[Vertical Stepper](/content/library/components/vertical-stepper/index.html)