{"library":"semantic-ui-react","title":"Semantic UI React","description":"Semantic UI React is the official React integration for the Semantic UI framework, providing a comprehensive collection of UI components designed to deliver consistent and aesthetically pleasing user interfaces. The current stable version is 2.1.5, with active development on a v3.0.0 beta branch, indicating ongoing maintenance and future feature enhancements. The library distinguishes itself through its declarative API, allowing developers to construct complex UIs with concise JSX. It heavily leverages 'shorthand props,' enabling a more compact and readable component tree by accepting primitive values or objects to render sub-components, which is a key differentiator. It also ships with first-class TypeScript support, offering robust type definitions for all its components and props, making it highly compatible with modern typed React workflows. While it requires the Semantic UI CSS toolkit for styling, it provides the React component logic, facilitating rapid development of visually consistent web applications. The release cadence for stable versions is moderate, with more frequent bug fixes and beta updates for the next major version. This package is an excellent choice for projects seeking a complete, opinionated UI toolkit with a strong emphasis on consistent design and developer experience within the React ecosystem.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install semantic-ui-react"],"cli":null},"imports":["import { Button } from 'semantic-ui-react';","import { Form, Input, TextArea, Button } from 'semantic-ui-react';","import type { SemanticShorthandItem } from 'semantic-ui-react';"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import React, { useState } from 'react';\nimport ReactDOM from 'react-dom/client';\nimport { Button, Form, Segment, Grid, Message } from 'semantic-ui-react';\nimport 'semantic-ui-css/semantic.min.css'; // Don't forget to include Semantic UI CSS!\n\nfunction App() {\n  const [name, setName] = useState('');\n  const [email, setEmail] = useState('');\n  const [submitted, setSubmitted] = useState(false);\n\n  const handleSubmit = () => {\n    setSubmitted(true);\n    console.log({ name, email });\n    // In a real app, you would send this data to a server\n  };\n\n  return (\n    <Grid centered columns={2} style={{ marginTop: '5em' }}>\n      <Grid.Column>\n        <Segment>\n          <Message\n            attached\n            header='Welcome to our site!'\n            content='Fill out the form below to sign-up for a new account'\n          />\n          <Form className='attached fluid segment' onSubmit={handleSubmit}>\n            <Form.Input\n              label='Name'\n              placeholder='First Name'\n              value={name}\n              onChange={(e) => setName(e.target.value)}\n              required\n            />\n            <Form.Input\n              label='Email'\n              placeholder='example@domain.com'\n              type='email'\n              value={email}\n              onChange={(e) => setEmail(e.target.value)}\n              required\n            />\n            <Button primary type='submit'>Submit</Button>\n          </Form>\n          {submitted && (\n            <Message success>\n              <Message.Header>Form Submitted</Message.Header>\n              <p>Name: {name}, Email: {email}</p>\n            </Message>\n          )}\n        </Segment>\n      </Grid.Column>\n    </Grid>\n  );\n}\n\nconst root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);\nroot.render(<App />);","lang":"typescript","description":"This quickstart demonstrates a basic React form using Semantic UI React components, including input fields, a button, and messages. It shows state management with React hooks and how to include the necessary Semantic UI CSS stylesheet for proper styling.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}