mirror of
https://github.com/nextui-org/nextui.git
synced 2025-12-08 19:26:11 +00:00
417 lines
9.3 KiB
TypeScript
417 lines
9.3 KiB
TypeScript
import React from 'react';
|
|
import {
|
|
Moon,
|
|
Magic,
|
|
Flash,
|
|
Devices,
|
|
Server,
|
|
TagUser,
|
|
RoundPointer,
|
|
Maximize,
|
|
CodeDocument,
|
|
HtmlLogo
|
|
} from '@components';
|
|
|
|
export default {
|
|
topFeatures: [
|
|
{
|
|
title: 'Themeable',
|
|
description:
|
|
'Provides a simple way to customize default themes, you can change the colors, fonts, breakpoints and everything you need.',
|
|
icon: <Magic fill="#FF4ECD" />
|
|
},
|
|
{
|
|
title: 'Fast',
|
|
description:
|
|
'Avoids unnecessary styles props at runtime, making it more performant than other UI libraries.',
|
|
icon: <Flash fill="#FF4ECD" />
|
|
},
|
|
{
|
|
title: 'Light & Dark UI',
|
|
description:
|
|
'Automatic dark mode recognition, NextUI automatically changes the theme when detects HTML theme prop changes.',
|
|
icon: <Moon fill="#FF4ECD" />
|
|
},
|
|
{
|
|
title: 'Unique DX',
|
|
description:
|
|
'NextUI is fully-typed to minimize the learning curve, and provide the best possible developer experience.',
|
|
icon: <Devices fill="#FF4ECD" />
|
|
}
|
|
],
|
|
fullFeatures: [
|
|
{
|
|
title: 'Server side render (SSR)',
|
|
description:
|
|
'All NextUI components support cross-browser server-side rendering and provides a simple way to implement it in your project.',
|
|
icon: <Server fill="#FF4ECD" />
|
|
},
|
|
{
|
|
title: 'Accesible components',
|
|
description:
|
|
'NextUI components follow the WAI-ARIA guidelines, provide keyboard support and sensible focus management.',
|
|
icon: <TagUser fill="#FF4ECD" />
|
|
},
|
|
{
|
|
title: 'No annoying focus ring',
|
|
description:
|
|
'Focus ring will appear only when user navigates with keyboard.',
|
|
icon: <RoundPointer fill="#FF4ECD" />
|
|
},
|
|
{
|
|
title: 'Built-in media queries',
|
|
description:
|
|
'NextUI provides a set of common media queries that, along with Stitches breakpoints allow you create responsive layouts faster.',
|
|
icon: <Maximize fill="#FF4ECD" />
|
|
},
|
|
{
|
|
title: 'TypeScript based',
|
|
description:
|
|
'Build type safe applications, NextUI has a fully-typed API to minimize the learning curve, and help you build applications.',
|
|
icon: <CodeDocument filled={false} fill="#FF4ECD" />
|
|
},
|
|
{
|
|
title: 'Override components tags',
|
|
description:
|
|
'A polymorphic `as` prop is included in all NextUI components.',
|
|
icon: <HtmlLogo fill="#FF4ECD" />
|
|
},
|
|
{
|
|
title: 'Critical Path CSS',
|
|
description:
|
|
"Since NextUI is based on Stitches, it only injects the styles which are actually used, so your users don't download unnecessary CSS.",
|
|
icon: <Flash fill="#FF4ECD" />
|
|
},
|
|
{
|
|
title: 'Beatifully designed',
|
|
description:
|
|
'NextUI components are unique and are not tied to any visual trend or design rule, which makes us unique and of course your projects as well.',
|
|
icon: <Magic fill="#FF4ECD" />
|
|
}
|
|
],
|
|
themingCode: `import { createTheme } from '@nextui-org/react';
|
|
|
|
const lightTheme = createTheme({
|
|
type: 'light',
|
|
});
|
|
|
|
return (
|
|
<ShopCard className={lightTheme} />
|
|
);
|
|
|
|
|
|
const darkTheme = createTheme({
|
|
type: 'dark',
|
|
});
|
|
|
|
return (
|
|
<ShopCard className={darkTheme} />
|
|
);
|
|
|
|
|
|
|
|
const lightModernTheme = createTheme({
|
|
type: 'light',
|
|
className: 'light-modern',
|
|
theme: {
|
|
colors: {
|
|
primary: '#7928CA',
|
|
primaryLight: '#d9c2f0',
|
|
success: '#FF1CF7'
|
|
}
|
|
}
|
|
});
|
|
|
|
return (
|
|
<ShopCard className={lightModernTheme}/>
|
|
)
|
|
|
|
const darkModernTheme = createTheme({
|
|
type: 'dark',
|
|
className: 'dark-modern',
|
|
theme: {
|
|
colors: {
|
|
primary: '#7928CA',
|
|
primaryLight: '#582A87',
|
|
success: '#FF1CF7'
|
|
}
|
|
}
|
|
});
|
|
|
|
return (
|
|
<ShopCard className={darkModernTheme} />
|
|
);
|
|
|
|
const lightElegantTheme = createTheme({
|
|
type: 'light',
|
|
className: 'light-elegant',
|
|
theme: {
|
|
colors: {
|
|
primary: '#000000',
|
|
primaryLight: '#AAAAAA',
|
|
success: '#a2a2a2'
|
|
},
|
|
radii: {
|
|
md: '4px'
|
|
}
|
|
}
|
|
});
|
|
|
|
return (
|
|
<ShopCard className={lightElegantTheme}/>
|
|
);
|
|
|
|
const darkElegantTheme = createTheme({
|
|
type: 'dark',
|
|
className: 'dark-elegant',
|
|
theme: {
|
|
colors: {
|
|
primary: '#ffffff',
|
|
primaryLight: '#222222',
|
|
success: '#a2a2a2'
|
|
},
|
|
radii: {
|
|
md: '4px'
|
|
}
|
|
}
|
|
});
|
|
|
|
return (
|
|
<ShopCard className={darkElegantTheme}/>
|
|
);
|
|
|
|
|
|
const lightRetroTheme = createTheme({
|
|
type: 'light',
|
|
className: 'light-retro',
|
|
theme: {
|
|
colors: {
|
|
primary: '#FFD34E',
|
|
primaryLight: 'transparent',
|
|
error: '#EE457E'
|
|
}
|
|
}
|
|
});
|
|
|
|
return (
|
|
<ShopCard className={lightRetroTheme}/>
|
|
);
|
|
|
|
const darkRetroTheme = createTheme({
|
|
type: 'dark',
|
|
className: 'dark-retro',
|
|
theme: {
|
|
colors: {
|
|
primary: '#FFD34E',
|
|
primaryLight: 'transparent',
|
|
error: '#EE457E'
|
|
}
|
|
}
|
|
});
|
|
|
|
return (
|
|
<ShopCard className={darkRetroTheme}/>
|
|
);
|
|
|
|
|
|
`,
|
|
comparativeCode: {
|
|
nextui: `import * as React from 'react';
|
|
import { Input } from '@nextui-org/react';
|
|
|
|
const MyComponent = () => {
|
|
return (
|
|
<Input.Password bordered labelPlaceholder="Password" />
|
|
);
|
|
};
|
|
|
|
export default MyComponent
|
|
`,
|
|
others: `import * as React from 'react';
|
|
import ButtonIcon from '@other-library/ButtonIcon';
|
|
import InputOutlined from '@other-library/InputOutlined';
|
|
import LabelInput from '@other-library/LabelInput';
|
|
import AdornmentInput from '@other-library/AdornmentInput';
|
|
import ControlForm from '@other-library/ControlForm';
|
|
import EyeIcon from '@other-library/icons/EyeIcon';
|
|
import EyeIconOff from '@other-library/icons/EyeIconOff';
|
|
|
|
const MyComponent = () => {
|
|
const [values, setValues] = React.useState({
|
|
password: '',
|
|
showPassword: false
|
|
});
|
|
|
|
const handleChange = (event) => {
|
|
setValues({ ...values, password: event.target.value });
|
|
};
|
|
|
|
const handleClickShowPassword = () => {
|
|
setValues({
|
|
...values,
|
|
showPassword: !values.showPassword
|
|
});
|
|
};
|
|
|
|
const handleMouseDownPassword = (event) => {
|
|
event.preventDefault();
|
|
};
|
|
|
|
return (
|
|
<ControlForm sx={{ m: 1, width: '25ch' }} variant="outlined">
|
|
<LabelInput htmlFor="outlined-adornment-password">Password</LabelInput>
|
|
<InputOutlined
|
|
id="outlined-adornment-password"
|
|
type={values.showPassword ? 'text' : 'password'}
|
|
value={values.password}
|
|
onChange={handleChange}
|
|
endAdornment={
|
|
<AdornmentInput position="end">
|
|
<ButtonIcon
|
|
aria-label="toggle password visibility"
|
|
onClick={handleClickShowPassword}
|
|
onMouseDown={handleMouseDownPassword}
|
|
edge="end"
|
|
>
|
|
{values.showPassword ? <EyeIcon /> : <EyeIconOff />}
|
|
</ButtonIcon>
|
|
</AdornmentInput>
|
|
}
|
|
label="Password"
|
|
/>
|
|
</ControlForm>
|
|
);
|
|
};
|
|
|
|
export default MyComponent;`
|
|
},
|
|
darkModeCode: `// 1. Import createTheme
|
|
import { createTheme, NextUIProvider } from "@nextui-org/react"
|
|
|
|
// 2. Call createTheme and pass your custom values
|
|
const darkTheme = createTheme({
|
|
type: 'dark',
|
|
theme: {
|
|
colors: {...},
|
|
}
|
|
})
|
|
|
|
// 3. Apply dark theme
|
|
// Entry point of your app
|
|
const App = () => {
|
|
return (
|
|
<NextUIProvider theme={darkTheme}>
|
|
<App />
|
|
</NextUIProvider>
|
|
)
|
|
}
|
|
|
|
export default App;
|
|
`,
|
|
customizationCode: `import React from 'react';
|
|
import { Button } from '@nextui-org/react';
|
|
import confetti from 'canvas-confetti';
|
|
|
|
const CustomButton = () => {
|
|
const handleConfetti = () => {
|
|
confetti({
|
|
zIndex: 999,
|
|
particleCount: 100,
|
|
spread: 70,
|
|
origin: { x: 0.75, y: 0.8 }
|
|
});
|
|
};
|
|
return (
|
|
<Button
|
|
auto
|
|
rounded
|
|
ripple={false}
|
|
size="xl"
|
|
onClick={handleConfetti}
|
|
css={{
|
|
background: '$white',
|
|
fontWeight: '$semibold',
|
|
boxShadow: '$md',
|
|
position: 'relative',
|
|
overflow: 'visible',
|
|
color: '$green800',
|
|
px: '$18',
|
|
'&:after': {
|
|
content: '""',
|
|
position: 'absolute',
|
|
width: '100%',
|
|
height: '100%',
|
|
background: '$white',
|
|
opacity: 1,
|
|
borderRadius: '$pill',
|
|
transition: 'all 0.4s ease'
|
|
},
|
|
'&:hover': {
|
|
transform: 'translateY(-5px)',
|
|
'&:after': {
|
|
transform: 'scaleX(1.5) scaleY(1.6)',
|
|
opacity: 0
|
|
}
|
|
},
|
|
'&:active': {
|
|
transform: 'translateY(-2px)'
|
|
}
|
|
}}
|
|
>
|
|
Click me
|
|
</Button>
|
|
);
|
|
};
|
|
|
|
export default CustomButton;
|
|
`,
|
|
stitchesUtilitiesCode: `export const utils = {
|
|
p: (value) => ({
|
|
padding: value
|
|
}),
|
|
m: (value) => ({
|
|
margin: value
|
|
}),
|
|
w: (value) => ({ width: value }),
|
|
h: (value) => ({ height: value }),
|
|
|
|
dflex: (value) => ({
|
|
display: 'flex',
|
|
alignItems: value,
|
|
justifyContent: value
|
|
}),
|
|
sizeMin: (value) => ({
|
|
minWidth: value,
|
|
minHeight: value,
|
|
width: value,
|
|
height: value
|
|
}),
|
|
textGradient: (value) => ({
|
|
backgroundImage: 'linear-gradient(value)',
|
|
WebkitBackgroundClip: 'text',
|
|
WebkitTextFillColor: 'transparent'
|
|
}),
|
|
|
|
|
|
bg: (value) => ({
|
|
background: value
|
|
}),
|
|
bgBlur: (value) => ({
|
|
bf: 'saturate(180%) blur(10px)',
|
|
bg: \`$\{value}66\`,
|
|
}),
|
|
bgColor: (value) => ({
|
|
backgroundColor: value
|
|
}),
|
|
backgroundClip: (value) => ({
|
|
WebkitBackgroundClip: value,
|
|
backgroundClip: value
|
|
}),
|
|
bgClip: (value) => ({
|
|
WebkitBackgroundClip: value,
|
|
backgroundClip: value
|
|
}),
|
|
|
|
}`
|
|
};
|