Tremor is joining Vercel. Read more about our journey
Take a few moments to register for your company's workspace
// 'use client'; import { Divider, TextInput } from '@tremor/react'; export default function Example() { return ( <> <div className="sm:mx-auto sm:max-w-2xl"> <h3 className="text-tremor-title font-semibold text-tremor-content-strong dark:text-dark-tremor-content-strong"> Register to workspace </h3> <p className="mt-1 text-tremor-default leading-6 text-tremor-content dark:text-dark-tremor-content"> Take a few moments to register for your company's workspace </p> <form action="#" method="post" className="mt-8"> <div className="grid grid-cols-1 gap-x-4 gap-y-6 sm:grid-cols-6"> <div className="col-span-full sm:col-span-3"> <label htmlFor="first-name" className="text-tremor-default font-medium text-tremor-content-strong dark:text-dark-tremor-content-strong" > First name <span className="text-red-500">*</span> </label> <TextInput type="text" id="first-name" name="first-name" autoComplete="first-name" placeholder="First name" className="mt-2" required /> </div> <div className="col-span-full sm:col-span-3"> <label htmlFor="last-name" className="text-tremor-default font-medium text-tremor-content-strong dark:text-dark-tremor-content-strong" > Last name <span className="text-red-500">*</span> </label> <TextInput type="text" id="last-name" name="last-name" autoComplete="last-name" placeholder="Last name" className="mt-2" required /> </div> <div className="col-span-full"> <label htmlFor="email" className="text-tremor-default font-medium text-tremor-content-strong dark:text-dark-tremor-content-strong" > Email <span className="text-red-500">*</span> </label> <TextInput type="email" id="email" name="email" autoComplete="email" placeholder="Email" className="mt-2" required /> </div> <div className="col-span-full"> <label htmlFor="address" className="text-tremor-default font-medium text-tremor-content-strong dark:text-dark-tremor-content-strong" > Address </label> <TextInput type="text" id="address" name="address" autoComplete="street-address" placeholder="Address" className="mt-2" /> </div> <div className="col-span-full sm:col-span-2"> <label htmlFor="city" className="text-tremor-default font-medium text-tremor-content-strong dark:text-dark-tremor-content-strong" > City </label> <TextInput type="text" id="city" name="city" autoComplete="address-level2" placeholder="City" className="mt-2" /> </div> <div className="col-span-full sm:col-span-2"> <label htmlFor="state" className="text-tremor-default font-medium text-tremor-content-strong dark:text-dark-tremor-content-strong" > State </label> <TextInput type="text" id="state" name="state" autoComplete="address-level1" placeholder="State" className="mt-2" /> </div> <div className="col-span-full sm:col-span-2"> <label htmlFor="postal-code" className="text-tremor-default font-medium text-tremor-content-strong dark:text-dark-tremor-content-strong" > Postal code </label> <TextInput id="postal-code" name="postal-code" autoComplete="postal-code" placeholder="Postal code" className="mt-2" /> </div> </div> <Divider /> <div className="flex items-center justify-end space-x-4"> <button type="button" className="whitespace-nowrap rounded-tremor-small px-4 py-2.5 text-tremor-default font-medium text-tremor-content-strong dark:text-dark-tremor-content-strong" > Cancel </button> <button type="submit" className="whitespace-nowrap rounded-tremor-default bg-tremor-brand px-4 py-2.5 text-tremor-default font-medium text-tremor-brand-inverted shadow-tremor-input hover:bg-tremor-brand-emphasis dark:bg-dark-tremor-brand dark:text-dark-tremor-brand-inverted dark:shadow-dark-tremor-input dark:hover:bg-dark-tremor-brand-emphasis" > Submit </button> </div> </form> </div> </> );}
// 'use client'; import { Divider, NumberInput, Select, SelectItem, Textarea, TextInput,} from '@tremor/react'; // This example requires @tailwind/forms // // tailwind.config.js// module.exports = {// // ...// plugins: [// // ...// require('@tailwindcss/forms'),// ],// } export default function Example() { return ( <> <form> <div className="grid grid-cols-1 gap-10 md:grid-cols-3"> <div> <h2 className="font-semibold text-tremor-content-strong dark:text-dark-tremor-content-strong"> Personal information </h2> <p className="mt-1 text-tremor-default leading-6 text-tremor-content dark:text-dark-tremor-content"> Lorem ipsum dolor sit amet, consetetur sadipscing elitr. </p> </div> <div className="sm:max-w-3xl md:col-span-2"> <div className="grid grid-cols-1 gap-4 sm:grid-cols-6"> <div className="col-span-full sm:col-span-3"> <label htmlFor="first-name" className="text-tremor-default font-medium text-tremor-content-strong dark:text-dark-tremor-content-strong" > First name </label> <TextInput type="text" id="first-name" name="first-name" autoComplete="given-name" placeholder="Emma" className="mt-2" /> </div> <div className="col-span-full sm:col-span-3"> <label htmlFor="last-name" className="text-tremor-default font-medium text-tremor-content-strong dark:text-dark-tremor-content-strong" > Last name </label> <TextInput type="text" id="last-name" name="last-name" autoComplete="family-name" placeholder="Crown" className="mt-2" /> </div> <div className="col-span-full"> <label htmlFor="email" className="text-tremor-default font-medium text-tremor-content-strong dark:text-dark-tremor-content-strong" > Email </label> <TextInput type="email" id="email" name="email" autoComplete="email" placeholder="emma@company.com" className="mt-2" /> </div> <div className="col-span-full sm:col-span-3"> <label htmlFor="year" className="text-tremor-default font-medium text-tremor-content-strong dark:text-dark-tremor-content-strong" > Birth year </label> <NumberInput id="birthyear" name="year" placeholder="1990" enableStepper={false} className="mt-2" /> </div> <div className="col-span-full sm:col-span-3"> <label htmlFor="email" className="text-tremor-default font-medium text-tremor-content-strong dark:text-dark-tremor-content-strong" > Role </label> <TextInput type="text" id="role" name="role" placeholder="Senior Manager" disabled className="mt-2" /> <p className="mt-2 text-tremor-label text-tremor-content dark:text-dark-tremor-content"> Roles can only be changed by system admin. </p> </div> </div> </div> </div> <Divider className="my-14" /> <div className="grid grid-cols-1 gap-10 md:grid-cols-3"> <div> <h2 className="font-semibold text-tremor-content-strong dark:text-dark-tremor-content-strong"> Workspace settings </h2> <p className="mt-1 text-tremor-default leading-6 text-tremor-content dark:text-dark-tremor-content"> Lorem ipsum dolor sit amet, consetetur sadipscing elitr. </p> </div> <div className="sm:max-w-3xl md:col-span-2"> <div className="grid grid-cols-1 gap-4 sm:grid-cols-6"> <div className="col-span-full sm:col-span-3"> <label htmlFor="workspace-name" className="text-tremor-default font-medium text-tremor-content-strong dark:text-dark-tremor-content-strong" > Workspace name </label> <TextInput type="text" id="workspace-name" name="workspace-name" placeholder="Test workspace" className="mt-2" /> </div> <div className="col-span-full sm:col-span-3"> <label htmlFor="visibility" className="text-tremor-default font-medium text-tremor-content-strong dark:text-dark-tremor-content-strong" > Visibility </label> <Select id="visibility" name="visibility" defaultValue="private" className="mt-2" enableClear={false} > <SelectItem value="public">Public</SelectItem> <SelectItem value="private">Private</SelectItem> </Select> </div> <div className="col-span-full"> <label htmlFor="workspace-description" className="text-tremor-default font-medium text-tremor-content-strong dark:text-dark-tremor-content-strong" > Workspace description </label> <Textarea id="workspace-description" name="workspace-description" className="mt-2" rows={4} /> <p className="mt-2 text-tremor-label text-tremor-content dark:text-dark-tremor-content"> Note: description provided will not be displayed externally. </p> </div> </div> </div> </div> <Divider className="my-14" /> <div className="grid grid-cols-1 gap-10 md:grid-cols-3"> <div> <h2 className="font-semibold text-tremor-content-strong dark:text-dark-tremor-content-strong"> Notification settings </h2> <p className="mt-1 text-tremor-default leading-6 text-tremor-content dark:text-dark-tremor-content"> Lorem ipsum dolor sit amet, consetetur sadipscing elitr. </p> </div> <div className="sm:max-w-3xl md:col-span-2"> <fieldset> <legend className="text-tremor-default font-medium text-tremor-content-strong dark:text-dark-tremor-content-strong"> Newsletter </legend> <p id="newsletter-description" className="mt-2 text-tremor-default leading-6 text-tremor-content dark:text-dark-tremor-content" > Change how often you want to receive updates from our newsletter. </p> <div className="mt-6 space-y-4"> <div className="flex items-center gap-x-3"> <input id="every-week" name="notifications" aria-describedby="newsletter-description" type="radio" className="size-4 border-tremor-border bg-tremor-background text-tremor-brand dark:border-dark-tremor-border dark:bg-dark-tremor-background dark:text-dark-tremor-brand" /> <label htmlFor="every-week" className="text-tremor-default font-medium text-tremor-content-strong dark:text-dark-tremor-content-strong" > Every week </label> </div> <div className="flex items-center gap-x-3"> <input id="every-month" name="notifications" aria-describedby="newsletter-description" type="radio" className="size-4 border-tremor-border bg-tremor-background text-tremor-brand dark:border-dark-tremor-border dark:bg-dark-tremor-background dark:text-dark-tremor-brand" /> <label htmlFor="every-month" className="text-tremor-default font-medium text-tremor-content-strong dark:text-dark-tremor-content-strong" > Every month </label> </div> <div className="flex items-center gap-x-3"> <input id="never" name="notifications" aria-describedby="newsletter-description" type="radio" defaultChecked className="size-4 border-tremor-border bg-tremor-background text-tremor-brand dark:border-dark-tremor-border dark:bg-dark-tremor-background dark:text-dark-tremor-brand" /> <label htmlFor="never" className="text-tremor-default font-medium text-tremor-content-strong dark:text-dark-tremor-content-strong" > Never </label> </div> </div> </fieldset> </div> </div> <Divider className="my-14" /> <div className="flex items-center justify-end space-x-4"> <button type="button" className="whitespace-nowrap rounded-tremor-small px-4 py-2.5 text-tremor-default font-medium text-tremor-content-strong dark:text-dark-tremor-content-strong" > Go back </button> <button type="submit" className="whitespace-nowrap rounded-tremor-default bg-tremor-brand px-4 py-2.5 text-tremor-default font-medium text-tremor-brand-inverted shadow-tremor-input hover:bg-tremor-brand-emphasis dark:bg-dark-tremor-brand dark:text-dark-tremor-brand-inverted dark:shadow-dark-tremor-input dark:hover:bg-dark-tremor-brand-emphasis" > Save settings </button> </div> </form> </> );}
// 'use client'; import { Divider, List, ListItem, NumberInput, Select, SelectItem, Textarea, TextInput,} from '@tremor/react'; // This example requires @tailwind/forms // // tailwind.config.js// module.exports = {// // ...// plugins: [// // ...// require('@tailwindcss/forms'),// ],// } export default function Example() { return ( <> <form> <div className="grid grid-cols-1 gap-10 md:grid-cols-3"> <div> <h2 className="font-semibold text-tremor-content-strong dark:text-dark-tremor-content-strong"> Personal information </h2> <p className="mt-1 text-tremor-default leading-6 text-tremor-content dark:text-dark-tremor-content"> Lorem ipsum dolor sit amet, consetetur sadipscing elitr. </p> </div> <div className="sm:max-w-3xl md:col-span-2"> <div className="grid grid-cols-1 gap-4 sm:grid-cols-6"> <div className="col-span-full sm:col-span-3"> <label htmlFor="first-name" className="text-tremor-default font-medium text-tremor-content-strong dark:text-dark-tremor-content-strong" > First name </label> <TextInput type="text" id="first-name" name="first-name" autoComplete="given-name" placeholder="Emma" className="mt-2" /> </div> <div className="col-span-full sm:col-span-3"> <label htmlFor="last-name" className="text-tremor-default font-medium text-tremor-content-strong dark:text-dark-tremor-content-strong" > Last name </label> <TextInput type="text" id="last-name" name="last-name" autoComplete="family-name" placeholder="Crown" className="mt-2" /> </div> <div className="col-span-full"> <label htmlFor="email" className="text-tremor-default font-medium text-tremor-content-strong dark:text-dark-tremor-content-strong" > Email </label> <TextInput type="email" id="email" name="email" autoComplete="email" placeholder="emma@company.com" className="mt-2" /> </div> <div className="col-span-full sm:col-span-3"> <label htmlFor="year" className="text-tremor-default font-medium text-tremor-content-strong dark:text-dark-tremor-content-strong" > Birth year </label> <NumberInput id="birthyear" name="year" placeholder="1990" enableStepper={false} className="mt-2" /> </div> <div className="col-span-full sm:col-span-3"> <label htmlFor="email" className="text-tremor-default font-medium text-tremor-content-strong dark:text-dark-tremor-content-strong" > Role </label> <TextInput type="text" id="role" name="role" placeholder="Senior Manager" disabled className="mt-2" /> <p className="mt-2 text-tremor-label text-tremor-content dark:text-dark-tremor-content"> Roles can only be changed by system admin. </p> </div> </div> </div> </div> <Divider className="my-14" /> <div className="grid grid-cols-1 gap-10 md:grid-cols-3"> <div> <h2 className="font-semibold text-tremor-content-strong dark:text-dark-tremor-content-strong"> Workspace settings </h2> <p className="mt-1 text-tremor-default leading-6 text-tremor-content dark:text-dark-tremor-content"> Lorem ipsum dolor sit amet, consetetur sadipscing elitr. </p> </div> <div className="sm:max-w-3xl md:col-span-2"> <div className="grid grid-cols-1 gap-4 sm:grid-cols-6"> <div className="col-span-full sm:col-span-3"> <label htmlFor="workspace-name" className="text-tremor-default font-medium text-tremor-content-strong dark:text-dark-tremor-content-strong" > Workspace name </label> <TextInput type="text" id="workspace-name" name="workspace-name" placeholder="Test workspace" className="mt-2" /> </div> <div className="col-span-full sm:col-span-3"> <label htmlFor="visibility" className="text-tremor-default font-medium text-tremor-content-strong dark:text-dark-tremor-content-strong" > Visibility </label> <Select id="visibility" name="visibility" defaultValue="private" className="mt-2" enableClear={false} > <SelectItem value="public">Public</SelectItem> <SelectItem value="private">Private</SelectItem> </Select> </div> <div className="col-span-full"> <label htmlFor="workspace-description" className="text-tremor-default font-medium text-tremor-content-strong dark:text-dark-tremor-content-strong" > Workspace description </label> <Textarea id="workspace-description" name="workspace-description" className="mt-2" rows={4} /> <p className="mt-2 text-tremor-label text-tremor-content dark:text-dark-tremor-content"> Note: description provided will not be displayed externally. </p> </div> </div> </div> </div> <Divider className="my-14" /> <div className="grid grid-cols-1 gap-10 md:grid-cols-3"> <div> <h2 className="font-semibold text-tremor-content-strong dark:text-dark-tremor-content-strong"> Notification settings </h2> <p className="mt-1 text-tremor-default leading-6 text-tremor-content dark:text-dark-tremor-content"> Lorem ipsum dolor sit amet, consetetur sadipscing elitr. </p> </div> <div className="sm:max-w-3xl md:col-span-2"> <fieldset> <legend className="text-tremor-default font-medium text-tremor-content-strong dark:text-dark-tremor-content-strong"> Team </legend> <p className="mt-1 text-tremor-default leading-6 text-tremor-content dark:text-dark-tremor-content"> Configure the types of team alerts you want to receive. </p> <List className="mt-4"> <ListItem className="items-center justify-start gap-x-3 py-3"> <input id="team-requests" name="team-requests" type="checkbox" defaultChecked className="size-4 rounded border-tremor-border accent-tremor-brand focus:ring-tremor-brand-muted dark:border-dark-tremor-border dark:bg-dark-tremor-background dark:accent-tremor-brand dark:ring-offset-gray-950 dark:focus:ring-dark-tremor-brand-muted" /> <label htmlFor="team-requests" className="text-tremor-default font-medium text-tremor-content-strong dark:text-dark-tremor-content-strong" > Team join requests </label> </ListItem> <ListItem className="items-center justify-start gap-x-3 py-3"> <input id="team-activity-digest" name="team-activity-digest" type="checkbox" className="size-4 rounded border-tremor-border text-tremor-brand shadow-tremor-input focus:ring-tremor-brand-muted dark:border-dark-tremor-border dark:bg-dark-tremor-background dark:text-dark-tremor-brand dark:shadow-dark-tremor-input dark:focus:ring-dark-tremor-brand-muted" /> <label htmlFor="team-activity-digest" className="text-tremor-default font-medium text-tremor-content-strong dark:text-dark-tremor-content-strong" > Weekly team activity digest </label> </ListItem> </List> </fieldset> <fieldset className="mt-6"> <legend className="text-tremor-default font-medium text-tremor-content-strong dark:text-dark-tremor-content-strong"> Usage </legend> <p className="mt-1 text-tremor-default leading-6 text-tremor-content dark:text-dark-tremor-content"> Configure the types of usage alerts you want to receive. </p> <List className="mt-4"> <ListItem className="items-center justify-start gap-x-3 py-3"> <input id="api-requests" name="api-requests" type="checkbox" className="size-4 rounded border-tremor-border text-tremor-brand shadow-tremor-input focus:ring-tremor-brand-muted dark:border-dark-tremor-border dark:bg-dark-tremor-background dark:text-dark-tremor-brand dark:shadow-dark-tremor-input dark:focus:ring-dark-tremor-brand-muted" /> <label htmlFor="api-requests" className="text-tremor-default font-medium text-tremor-content-strong dark:text-dark-tremor-content-strong" > API requests </label> </ListItem> <ListItem className="items-center justify-start gap-x-3 py-3"> <input id="workspace-execution" name="workspace-execution" type="checkbox" className="size-4 rounded border-tremor-border text-tremor-brand shadow-tremor-input focus:ring-tremor-brand-muted dark:border-dark-tremor-border dark:bg-dark-tremor-background dark:text-dark-tremor-brand dark:shadow-dark-tremor-input dark:focus:ring-dark-tremor-brand-muted" /> <label htmlFor="workspace-execution" className="text-tremor-default font-medium text-tremor-content-strong dark:text-dark-tremor-content-strong" > Workspace loading times </label> </ListItem> <ListItem className="items-center justify-start gap-x-3 py-3"> <input id="query-caching" name="query-caching" type="checkbox" defaultChecked className="size-4 rounded border-tremor-border text-tremor-brand shadow-tremor-input focus:ring-tremor-brand-muted dark:border-dark-tremor-border dark:bg-dark-tremor-background dark:text-dark-tremor-brand dark:shadow-dark-tremor-input dark:focus:ring-dark-tremor-brand-muted" /> <label htmlFor="query-caching" className="text-tremor-default font-medium text-tremor-content-strong dark:text-dark-tremor-content-strong" > Query caching </label> </ListItem> <ListItem className="items-center justify-start gap-x-3 py-3"> <input id="storage" name="storage" type="checkbox" defaultChecked className="size-4 rounded border-tremor-border text-tremor-brand shadow-tremor-input focus:ring-tremor-brand-muted dark:border-dark-tremor-border dark:bg-dark-tremor-background dark:text-dark-tremor-brand dark:shadow-dark-tremor-input dark:focus:ring-dark-tremor-brand-muted" /> <label htmlFor="storage" className="text-tremor-default font-medium text-tremor-content-strong dark:text-dark-tremor-content-strong" > Storage </label> </ListItem> </List> </fieldset> </div> </div> <Divider className="my-14" /> <div className="flex items-center justify-end space-x-4"> <button type="button" className="whitespace-nowrap rounded-tremor-small px-4 py-2.5 text-tremor-default font-medium text-tremor-content-strong dark:text-dark-tremor-content-strong" > Go back </button> <button type="submit" className="whitespace-nowrap rounded-tremor-default bg-tremor-brand px-4 py-2.5 text-tremor-default font-medium text-tremor-brand-inverted shadow-tremor-input hover:bg-tremor-brand-emphasis dark:bg-dark-tremor-brand dark:text-dark-tremor-brand-inverted dark:shadow-dark-tremor-input dark:hover:bg-dark-tremor-brand-emphasis" > Save settings </button> </div> </form> </> );}
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.
// 'use client'; import { useState } from 'react';import { RadioGroup } from '@headlessui/react';import { RiCheckboxCircleFill } from '@remixicon/react';import { Divider, Select, SelectItem, TextInput } from '@tremor/react'; function classNames(...classes) { return classes.filter(Boolean).join(' ');} const workspaces = [ { id: 1, title: 'Starter', description: 'Up to 10,000 requests per day.', users: 'Free', }, { id: 2, title: 'Premium', description: '500,000 requests per day¹', users: '$900/month²', }, { id: 3, title: 'Enterprise', description: 'Based on your specific needs', users: 'Custom', },]; export default function Example() { const [selectedWorkspace, setSelectedWorkspace] = useState(workspaces[0]); return ( <> <div className="sm:mx-auto sm:max-w-2xl"> <h3 className="mt-6 text-tremor-title font-semibold text-tremor-content-strong dark:text-dark-tremor-content-strong"> Apply for early access </h3> <p className="mt-1 text-tremor-default leading-6 text-tremor-content dark:text-dark-tremor-content"> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat. </p> <form action="#" method="post" className="mt-8"> <div className="grid grid-cols-1 gap-4 sm:grid-cols-6"> <div className="col-span-full sm:col-span-3"> <label htmlFor="first-name" className="text-tremor-default font-medium text-tremor-content-strong dark:text-dark-tremor-content-strong" > First name<span className="text-red-500">*</span> </label> <TextInput type="text" id="first-name" name="first-name" autoComplete="given-name" required placeholder="Emma" className="mt-2" /> </div> <div className="col-span-full sm:col-span-3"> <label htmlFor="last-name" className="text-tremor-default font-medium text-tremor-content-strong dark:text-dark-tremor-content-strong" > Last name </label> <TextInput type="text" id="last-name" name="last-name" autoComplete="family-name" placeholder="Crown" className="mt-2" /> </div> <div className="col-span-full"> <label htmlFor="email" className="text-tremor-default font-medium text-tremor-content-strong dark:text-dark-tremor-content-strong" > Work email<span className="text-red-500">*</span> </label> <TextInput type="email" id="email" name="email" autoComplete="email" required placeholder="emma@company.com" className="mt-2" /> </div> <div className="col-span-full sm:col-span-3"> <label htmlFor="company" className="text-tremor-default font-medium text-tremor-content-strong dark:text-dark-tremor-content-strong" > Company </label> <TextInput type="text" id="company" name="company" autoComplete="organization" placeholder="Company, Inc." className="mt-2" /> </div> <div className="col-span-full sm:col-span-3"> <label htmlFor="size" className="text-tremor-default font-medium text-tremor-content-strong dark:text-dark-tremor-content-strong" > Company size (employees) </label> <Select id="size" name="size" className="mt-2" enableClear={false} > <SelectItem value="1-9">1-9</SelectItem> <SelectItem value="10-50">10-50</SelectItem> <SelectItem value="50-250">50-250</SelectItem> <SelectItem value="250+">250+</SelectItem> </Select> </div> <Divider className="col-span-full" /> <div className="col-span-full"> <RadioGroup name="platform" value={selectedWorkspace} onChange={setSelectedWorkspace} > <RadioGroup.Label className="text-tremor-default font-semibold text-tremor-content-strong dark:text-dark-tremor-content-strong"> Select a workspace package </RadioGroup.Label> <div className="mt-4 grid grid-cols-1 gap-4 sm:grid-cols-3"> {workspaces.map((item) => ( <RadioGroup.Option key={item.id} value={item} className={({ active }) => classNames( active ? 'border-tremor-brand-subtle ring-2 ring-tremor-brand-muted dark:border-dark-tremor-brand-subtle dark:ring-dark-tremor-brand-muted' : 'border-tremor-border dark:border-dark-tremor-border', 'relative flex cursor-pointer rounded-tremor-default border bg-tremor-background p-4 transition dark:bg-dark-tremor-background', ) } > {({ checked, active }) => ( <> <div className="flex w-full flex-col justify-between"> <div> <RadioGroup.Label as="span" className="block text-tremor-default font-medium text-tremor-content-strong dark:text-dark-tremor-content-strong" > {item.title} </RadioGroup.Label> <p className="mt-1 text-tremor-default text-tremor-content dark:text-dark-tremor-content"> {item.description} </p> </div> <span className="mt-6 text-tremor-default font-medium text-tremor-content-strong dark:text-dark-tremor-content-strong"> {item.users} </span> </div> <RiCheckboxCircleFill className={classNames( !checked ? 'invisible' : '', 'size-5 shrink-0 text-tremor-brand dark:text-dark-tremor-brand', )} aria-hidden={true} /> <span className={classNames( active ? 'border' : 'border-2', checked ? 'border-tremor-brand dark:border-dark-tremor-brand' : 'border-transparent', 'pointer-events-none absolute -inset-px rounded-tremor-default', )} aria-hidden={true} /> </> )} </RadioGroup.Option> ))} </div> <p className="mt-6 text-tremor-label text-tremor-content dark:text-dark-tremor-content"> <sup>1</sup> $0.5/10K requests after limit reach. </p> <p className="mt-1 text-tremor-label text-tremor-content dark:text-dark-tremor-content"> <sup>2</sup> No credit card required for registration. </p> </RadioGroup> </div> </div> <Divider /> <div className="flex items-center justify-end space-x-4"> <button type="button" className="whitespace-nowrap rounded-tremor-small px-4 py-2.5 text-tremor-default font-medium text-tremor-content-strong dark:text-dark-tremor-content-strong" > Go back </button> <button type="submit" className="whitespace-nowrap rounded-tremor-default bg-tremor-brand px-4 py-2.5 text-tremor-default font-medium text-tremor-brand-inverted shadow-tremor-input hover:bg-tremor-brand-emphasis dark:bg-dark-tremor-brand dark:text-dark-tremor-brand-inverted dark:shadow-dark-tremor-input dark:hover:bg-dark-tremor-brand-emphasis" > Apply </button> </div> </form> </div> </> );}
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.
// 'use client'; import { useState } from 'react';import { RadioGroup } from '@headlessui/react';import { RiCheckboxCircleFill, RiCheckLine } from '@remixicon/react';import { Divider, Select, SelectItem, TextInput } from '@tremor/react'; function classNames(...classes) { return classes.filter(Boolean).join(' ');} const workspaces = [ { id: 1, title: 'Starter', description: 'Up to 10,000 requests per day.', users: 'Free', }, { id: 2, title: 'Premium', description: '500,000 requests per day¹', users: '$900/month²', }, { id: 3, title: 'Enterprise', description: 'Based on your specific needs', users: 'Custom', },]; const PackageDetails = ({ workspaceId }) => { const features = { 1: ['Community support', '50 GB storage', 'Integrated application builder'], 2: [ 'Slack Connect support', '100 GB storage', 'Managed workspace', 'Integrated application builder', ], 3: [ 'Priority Support with Slack Connect', 'Unlimited storage', 'Integrated application builder', 'Volume discount', ], }; const getFeatures = (workspaceId) => { return features[workspaceId] || 'No Features available'; }; return ( <> <p className="mt-6 text-tremor-default font-medium text-tremor-content-strong dark:text-dark-tremor-content-strong"> Includes: </p> <ul role="list" className="mt-2 space-y-2"> {getFeatures(workspaceId).map((feature, idx) => ( <li key={idx} className="flex items-center space-x-2"> <RiCheckLine className="size-5 text-tremor-content dark:text-dark-tremor-content" aria-hidden={true} /> <span className="text-tremor-default text-tremor-content-strong dark:text-dark-tremor-content-strong"> {feature} </span> </li> ))} </ul> <p className="mt-6 text-tremor-label text-tremor-content dark:text-dark-tremor-content"> <sup>1</sup> $0.5/10K requests after limit reach. </p> <p className="mt-1 text-tremor-label text-tremor-content dark:text-dark-tremor-content"> <sup>2</sup> No credit card required for registration. </p> </div> );}; export default function Example() { const [selectedWorkspace, setSelectedWorkspace] = useState(workspaces[0]); return ( <div className="obfuscate"> <div className="sm:mx-auto sm:max-w-2xl"> <h3 className="mt-6 text-tremor-title font-semibold text-tremor-content-strong dark:text-dark-tremor-content-strong"> Apply for early access </h3> <p className="mt-1 text-tremor-default leading-6 text-tremor-content dark:text-dark-tremor-content"> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat. </p> <form action="#" method="post" className="mt-8"> <div className="grid grid-cols-1 gap-4 sm:grid-cols-6"> <div className="col-span-full sm:col-span-3"> <label htmlFor="first-name" className="text-tremor-default font-medium text-tremor-content-strong dark:text-dark-tremor-content-strong" > First name<span className="text-red-500">*</span> </label> <TextInput type="text" id="first-name" name="first-name" autoComplete="given-name" required placeholder="Emma" className="mt-2" /> </div> <div className="col-span-full sm:col-span-3"> <label htmlFor="last-name" className="text-tremor-default font-medium text-tremor-content-strong dark:text-dark-tremor-content-strong" > Last name </label> <TextInput type="text" id="last-name" name="last-name" autoComplete="family-name" placeholder="Crown" className="mt-2" /> </div> <div className="col-span-full"> <label htmlFor="email" className="text-tremor-default font-medium text-tremor-content-strong dark:text-dark-tremor-content-strong" > Work email<span className="text-red-500">*</span> </label> <TextInput type="email" id="email" name="email" autoComplete="email" required placeholder="emma@company.com" className="mt-2" /> </div> <div className="col-span-full sm:col-span-3"> <label htmlFor="company" className="text-tremor-default font-medium text-tremor-content-strong dark:text-dark-tremor-content-strong" > Company </label> <TextInput type="text" id="company" name="company" autoComplete="organization" placeholder="Company, Inc." className="mt-2" /> </div> <div className="col-span-full sm:col-span-3"> <label htmlFor="size" className="text-tremor-default font-medium text-tremor-content-strong dark:text-dark-tremor-content-strong" > Company size (employees) </label> <Select id="size" name="size" className="mt-2" enableClear={false} > <SelectItem value="1-9">1-9</SelectItem> <SelectItem value="10-50">10-50</SelectItem> <SelectItem value="50-250">50-250</SelectItem> <SelectItem value="250+">250+</SelectItem> </Select> </div> <Divider className="col-span-full" /> <div className="col-span-full"> <RadioGroup value={selectedWorkspace} onChange={setSelectedWorkspace} name="platform" > <RadioGroup.Label className="text-tremor-default font-semibold text-tremor-content-strong dark:text-dark-tremor-content-strong"> Select a workspace package </RadioGroup.Label> <div className="mt-4 grid grid-cols-1 gap-4 sm:grid-cols-3"> {workspaces.map((item) => ( <RadioGroup.Option key={item.id} value={item} className={({ active }) => classNames( active ? 'border-tremor-brand-subtle ring-2 ring-tremor-brand-muted dark:border-dark-tremor-brand-subtle dark:ring-dark-tremor-brand-muted' : 'border-tremor-border dark:border-dark-tremor-border', 'relative flex cursor-pointer rounded-tremor-default border bg-tremor-background p-4 transition dark:bg-dark-tremor-background', ) } > {({ checked, active }) => ( <> <div className="flex w-full flex-col justify-between"> <div> <RadioGroup.Label as="span" className="block text-tremor-default font-medium text-tremor-content-strong dark:text-dark-tremor-content-strong" > {item.title} </RadioGroup.Label> <p className="mt-1 text-tremor-default text-tremor-content dark:text-dark-tremor-content"> {item.description} </p> </div> <span className="mt-6 text-tremor-default font-medium text-tremor-content-strong dark:text-dark-tremor-content-strong"> {item.users} </span> </div> <RiCheckboxCircleFill className={classNames( !checked ? 'invisible' : '', 'size-5 shrink-0 text-tremor-brand dark:text-dark-tremor-brand', )} aria-hidden={true} /> <span className={classNames( active ? 'border' : 'border-2', checked ? 'border-tremor-brand dark:border-dark-tremor-brand' : 'border-transparent', 'pointer-events-none absolute -inset-px rounded-tremor-default', )} aria-hidden={true} /> </> )} </RadioGroup.Option> ))} </div> <PackageDetails workspaceId={selectedWorkspace.id} /> </RadioGroup> </div> </div> <Divider /> <div className="flex items-center justify-end space-x-4"> <button type="button" className="whitespace-nowrap rounded-tremor-small px-4 py-2.5 text-tremor-default font-medium text-tremor-content-strong dark:text-dark-tremor-content-strong" > Go back </button> <button type="submit" className="whitespace-nowrap rounded-tremor-default bg-tremor-brand px-4 py-2.5 text-tremor-default font-medium text-tremor-brand-inverted shadow-tremor-input hover:bg-tremor-brand-emphasis dark:bg-dark-tremor-brand dark:text-dark-tremor-brand-inverted dark:shadow-dark-tremor-input dark:hover:bg-dark-tremor-brand-emphasis" > Apply </button> </div> </form> </div> </> );}
// 'use client'; import { useState } from 'react';import { RadioGroup } from '@headlessui/react';import { RiCheckboxCircleFill, RiCheckLine, RiExternalLinkLine,} from '@remixicon/react';import { Divider, List, ListItem, Select, SelectItem, TextInput,} from '@tremor/react'; function classNames(...classes) { return classes.filter(Boolean).join(' ');} const highlights = [ { id: 1, feature: 'Used by 50% of S&P 500 companies', }, { id: 2, feature: 'Based on open-source tech', }, { id: 3, feature: 'Largest developer community', },]; const plans = [ { name: 'Hobby', features: [ { feature: '1,000 requests per day' }, { feature: '3 environments' }, { feature: 'Up to 10 user seats' }, { feature: 'Community support' }, ], price: '$40', href: '#', isRecommended: false, }, { name: 'Premium', features: [ { feature: '100,000 requests per day' }, { feature: '10 environments' }, { feature: 'Up to 50 user seats' }, { feature: 'Premium Slack support' }, ], price: '$80', href: '#', isRecommended: true, }, { name: 'Enterprise', features: [ { feature: 'Unlimited requests per day' }, { feature: 'Unlimited environments and user seats' }, { feature: 'SAML Single-Sign-On (SSO)' }, { feature: '99.99% SLA' }, { feature: 'Volume discount' }, ], price: '$160', href: '#', isRecommended: false, },]; export default function Example() { const [selected, setSelected] = useState(plans[0]); return ( <> <form className="sm:mx-auto sm:max-w-7xl"> <h3 className="text-tremor-title font-semibold text-tremor-content-strong dark:text-dark-tremor-content-strong"> Create new workspace </h3> <div className="grid grid-cols-1 gap-10 lg:grid-cols-12 lg:gap-12"> <div className="mt-6 lg:col-span-7"> <div className="space-y-4 md:space-y-6"> <div className="md:flex md:items-center md:space-x-4"> <div> <label htmlFor="organization" className="text-tremor-default font-medium text-tremor-content-strong dark:text-dark-tremor-content-strong" > Organization </label> <Select id="organization" name="organization" className="mt-2" > <SelectItem value="1">Acme, Inc.</SelectItem> <SelectItem value="2">Hero Labs</SelectItem> <SelectItem value="3">Rose Holding</SelectItem> </Select> </div> <div className="mt-4 md:mt-0 md:w-full"> <label htmlFor="workspace" className="text-tremor-default font-medium text-tremor-content-strong dark:text-dark-tremor-content-strong" > Workspace name </label> <TextInput id="workspace" name="workspace" className="mt-2" /> </div> </div> <div> <label htmlFor="region" className="text-tremor-default font-medium text-tremor-content-strong dark:text-dark-tremor-content-strong" > Region </label> <Select id="region" name="Region" defaultValue="1" className="mt-2" > <SelectItem value="1">EU-West (Frankfurt)</SelectItem> <SelectItem value="2">US-East (Boston)</SelectItem> <SelectItem value="3">US-West (San Francisco)</SelectItem> </Select> <p className="mt-2 text-tremor-label text-tremor-content dark:text-dark-tremor-content"> For best performance, choose a region closest to your operations </p> </div> </div> <h4 className="mt-14 text-tremor-default font-medium text-tremor-content-strong dark:text-dark-tremor-content-strong"> Plan type<span className="text-red-500">*</span> </h4> <RadioGroup name="Plan" value={selected} onChange={setSelected} className="mt-4" > <div className="space-y-4"> {plans.map((plan) => ( <RadioGroup.Option key={plan.name} value={plan} className={({ active }) => classNames( active ? 'border-tremor-brand-subtle ring-2 ring-tremor-brand-muted dark:border-dark-tremor-brand-subtle dark:ring-dark-tremor-brand-muted' : 'border-tremor-border dark:border-dark-tremor-border', 'relative block cursor-pointer rounded-tremor-default border bg-tremor-background transition dark:bg-dark-tremor-background', ) } > {({ active, checked }) => ( <> <div className="flex items-start space-x-4 px-6 py-4"> <div className={classNames( checked ? 'border-transparent bg-tremor-brand dark:bg-dark-tremor-brand' : 'border-gray-300 bg-tremor-background dark:border-dark-tremor-border dark:bg-dark-tremor-background', 'mt-1 flex size-4 shrink-0 items-center justify-center rounded-tremor-full border', )} aria-hidden={true} > <span className="size-1.5 rounded-tremor-full bg-tremor-background dark:bg-dark-tremor-background" /> </div> <div className="w-full"> <p className="leading-6"> <span className="text-tremor-default font-semibold text-tremor-content-strong dark:text-dark-tremor-content-strong"> {plan.name} </span> {plan.isRecommended ? ( <span className="ml-1.5 inline-flex items-center rounded-tremor-small bg-tremor-background-muted px-2 py-1 text-tremor-label font-medium text-tremor-content-strong ring-1 ring-inset ring-tremor-ring dark:bg-dark-tremor-background-muted dark:text-dark-tremor-content-strong dark:ring-dark-tremor-ring"> recommended </span> ) : null} </p> <List className="mt-2"> {plan.features.map((feature, index) => ( <ListItem key={index} className="justify-start gap-2" > <RiCheckLine className="size-4 text-tremor-content-subtle dark:text-dark-tremor-content-subtle" aria-hidden={true} /> {feature.feature} </ListItem> ))} </List> </div> </div> <div className="flex items-center justify-between rounded-b-tremor-default border-t border-tremor-border bg-tremor-background-muted px-6 py-3 dark:border-dark-tremor-border dark:bg-dark-tremor-background-muted"> <a href={plan.href} className="inline-flex items-center gap-1 text-tremor-default text-tremor-brand hover:underline hover:underline-offset-4 dark:text-dark-tremor-brand" > Learn more <RiExternalLinkLine className="size-4" aria-hidden={true} /> </a> <div> <span className="text-tremor-title font-semibold text-tremor-content-strong dark:text-dark-tremor-content-strong"> {plan.price} </span> <span className="text-tremor-default text-tremor-content dark:text-dark-tremor-content"> /mo </span> </div> </div> <span className={classNames( active ? 'border' : 'border-2', checked ? 'border-tremor-brand dark:border-dark-tremor-brand' : 'border-transparent', 'pointer-events-none absolute -inset-px rounded-tremor-default', )} aria-hidden={true} /> </> )} </RadioGroup.Option> ))} </div> </RadioGroup> </div> <div className="lg:col-span-5"> <div className="rounded-tremor-default bg-tremor-background-muted p-6 ring-1 ring-inset ring-tremor-ring dark:bg-dark-tremor-background-muted dark:ring-dark-tremor-ring"> <h4 className="text-tremor-default font-semibold text-tremor-content-strong dark:text-dark-tremor-content-strong"> Which plan best fits your needs? </h4> <p className="mt-2 text-tremor-default leading-6 text-tremor-content dark:text-dark-tremor-content"> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores impedit perferendis suscipit eaque, iste dolor cupiditate blanditiis ratione. </p> <List className="mt-4 text-tremor-content-emphasis dark:text-dark-tremor-content-emphasis"> {highlights.map((item) => ( <ListItem key={item.id} className="justify-start space-x-2 py-2.5" > <RiCheckboxCircleFill className="size-5 text-tremor-brand dark:text-dark-tremor-brand" aria-hidden={true} /> <span className="truncate">{item.feature}</span> </ListItem> ))} </List> <a href="#" className="mt-4 inline-flex items-center gap-1 text-tremor-default text-tremor-brand dark:text-dark-tremor-brand" > Learn more about our workspace plans <RiExternalLinkLine className="size-4" aria-hidden={true} /> </a> </div> </div> </div> <Divider className="my-10" /> <div className="flex items-center justify-end space-x-4"> <button type="button" className="whitespace-nowrap rounded-tremor-small px-4 py-2.5 text-tremor-default font-medium text-tremor-content-strong dark:text-dark-tremor-content-strong" > Cancel </button> <button type="submit" className="whitespace-nowrap rounded-tremor-default bg-tremor-brand px-4 py-2.5 text-tremor-default font-medium text-tremor-brand-inverted shadow-tremor-input hover:bg-tremor-brand-emphasis dark:bg-dark-tremor-brand dark:text-dark-tremor-brand-inverted dark:shadow-dark-tremor-input dark:hover:bg-dark-tremor-brand-emphasis" > Update </button> </div> </form> </> );}