PayPal GitHub

## SPECTRE

DOCS
Getting started

- Installation
- Custom version
- Browser support
- What's new

Elements

- Typography
- Tables
- Buttons
- Forms
- Icons.css
- Labels
- Code
- Media

Layout

- Flexbox grid
- Responsive
- Hero
- Navbar

Components

- Accordions
- Avatars
- Badges
- Bars
- Breadcrumbs
- Cards
- Chips
- Empty states
- Menu
- Modals
- Nav
- Pagination
- Panels
- Popovers
- Steps
- Tabs
- Tiles
- Toasts
- Tooltips

Utilities

- Colors
- Cursors
- Display
- Divider
- Loading
- Position
- Shapes
- Text

Experimentals

- 360-Degree Viewer
- Autocomplete
- Calendars
- Carousels
- Comparison sliders
- Filters
- Meters
- Off-canvas
- Parallax
- Progress
- Sliders
- Timelines

### Installation#

There are 5 ways to get started with Spectre CSS framework in your projects. You can either install manually, from CDN or use package managers.

#### Install manually#

Download the compiled and minified Spectre CSS file (core ~10KB min+gzip):

Download Spectre.css

Include `spectre.css` located in /dist in your website or Web app . Also, you can add `spectre-icons.css` and `spectre-exp.css` accordingly.

    <link rel="stylesheet" href="spectre.min.css">
    <link rel="stylesheet" href="spectre-exp.min.css">
    <link rel="stylesheet" href="spectre-icons.min.css">

#### Install from CDN#

Alternatively, you can use the unpkg or cdnjs CDN to load compiled Spectre.css.

    <link rel="stylesheet" href="https://unpkg.com/spectre.css/dist/spectre.min.css">
    <link rel="stylesheet" href="https://unpkg.com/spectre.css/dist/spectre-exp.min.css">
    <link rel="stylesheet" href="https://unpkg.com/spectre.css/dist/spectre-icons.min.css">

#### Install with NPM#

    npm install spectre.css --save

#### Install with Yarn#

    yarn add spectre.css

#### Install from Bower#

    bower install spectre.css --save

GitHub · Twitter · PayPal Donate · Patreon Sponsor · Version

Designed and built with ♥ by Yan Zhu. Licensed under the MIT License.