{"library":"spectacle","title":"Spectacle: React Presentation Framework","type":"library","description":"Spectacle is an actively maintained, ReactJS-powered library for creating interactive and dynamic presentations. As of version 10.2.3, it provides a comprehensive suite of React components (e.g., `Deck`, `Slide`, `FlexBox`, `Heading`) that enable developers to build highly customizable slideshows using standard web technologies. The library typically receives regular patch and minor updates, addressing bug fixes and introducing new features like the recent `FitText` component in v10.2.0. Spectacle differentiates itself by allowing the full power of React and its ecosystem to be leveraged for presentation design, offering a developer-centric alternative to traditional presentation software and enabling complex animations, data visualizations, and interactive elements directly within slides.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install spectacle"],"cli":null},"imports":["import { Deck, Slide, Heading, Text } from 'spectacle';","import { FlexBox } from 'spectacle';","import { createTheme } from 'spectacle';"],"auth":{"required":false,"env_vars":[]},"links":{"homepage":"https://formidable.com/open-source/spectacle/","github":"https://github.com/FormidableLabs/spectacle","docs":null,"changelog":null,"pypi":null,"npm":"https://www.npmjs.com/package/spectacle","openapi_spec":null,"status_page":null,"smithery":null},"quickstart":{"code":"import React from 'react';\nimport {\n  Deck,\n  Slide,\n  Heading,\n  Text,\n  Box,\n  FlexBox,\n  createTheme,\n} from 'spectacle';\n\nconst theme = createTheme(\n  {\n    primary: 'white',\n    secondary: '#1F2022',\n    tertiary: '#03A9F4',\n    quaternary: '#CECECE',\n  },\n  {\n    primary: 'Inter',\n    secondary: 'Helvetica',\n  }\n);\n\nfunction Presentation() {\n  return (\n    <Deck theme={theme}>\n      <Slide backgroundColor=\"primary\">\n        <Heading color=\"secondary\">Welcome to Spectacle!</Heading>\n        <Text color=\"tertiary\">\n          A ReactJS Powered Presentation Framework\n        </Text>\n      </Slide>\n      <Slide backgroundColor=\"secondary\">\n        <FlexBox height=\"100%\" flexDirection=\"column\" justifyContent=\"center\" alignItems=\"center\">\n          <Heading fontSize=\"h2\" color=\"primary\">Key Features</Heading>\n          <Box margin=\"20px 0\">\n            <Text color=\"quaternary\">🔥 Full React Ecosystem</Text>\n            <Text color=\"quaternary\">🎨 Highly Customizable Themes</Text>\n            <Text color=\"quaternary\">🚀 Interactive Slides</Text>\n          </Box>\n        </FlexBox>\n      </Slide>\n      <Slide backgroundColor=\"tertiary\">\n        <Heading fontSize=\"h3\" color=\"primary\">Get Started</Heading>\n        <Text color=\"secondary\">\n          Install with `npm install spectacle react react-dom`\n        </Text>\n        <Text color=\"secondary\">\n          Then run your React app!\n        </Text>\n      </Slide>\n    </Deck>\n  );\n}\n\nexport default Presentation;","lang":"typescript","description":"This quickstart demonstrates how to create a basic Spectacle presentation using the `Deck`, `Slide`, `Heading`, `Text`, `Box`, and `FlexBox` components, along with a custom theme.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}