Skip to content

Rewrite devup UI components docs #396

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
wants to merge 6 commits into
base: main
Choose a base branch
from
Draft

Rewrite devup UI components docs #396

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
1ab9d83
ui components docs
moondda Sep 28, 2025
fe2bdca
rewrite responsive docs
moondda Sep 28, 2025
cdbeae3
rewrite ui-components
moondda Sep 28, 2025
5ccc3bb
move to overview
moondda Sep 28, 2025
1c5498b
improve styling
moondda Oct 1, 2025
3c4fd78
eslint single quote
moondda Oct 1, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
55 changes: 55 additions & 0 deletions apps/landing/src/app/(detail)/components/overview/Description.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,55 @@
If you want to use Devup UI Components, you need to **install** it.

```typescript
npm install @devup-ui/components
// or
yarn add @devup-ui/components
// or
pnpm add @devup-ui/components
```

You need to configure the include option for each bundler environment to properly load the `@devup-ui/components` package.

# using Vite

```typescript
//vite.config.js
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import { DevupUI } from "@devup-ui/vite-plugin";
export default defineConfig({
plugins: [
DevupUI({
include: ["@devup-ui/components"],
}),
react(),
],
});
```

# using Next.js

```typescript
// next.config.js
import { DevupUI } from "@devup-ui/next-plugin";
export default DevupUI({ include: ["@devup-ui/components"] });
```

# using Rsbuild

```typescript
// rsbuild.config.mjs
import { defineConfig } from "@rsbuild/core";
import { pluginReact } from "@rsbuild/plugin-react";
import { DevupUIRsbuildPlugin } from "@devup-ui/rsbuild-plugin";
export default defineConfig({
plugins: [
pluginReact(),
DevupUIRsbuildPlugin({
include: ["@devup-ui/components"],
}),
],
});
```

Note: If you encounter `Cannot run on the runtime` error, make sure the include option is properly configured for your bundler.
119 changes: 59 additions & 60 deletions apps/landing/src/app/(detail)/components/overview/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,27 +1,29 @@
import { Center, css, Flex, Grid, Text, VStack } from '@devup-ui/react'
import Link from 'next/link'
import { Center, css, Flex, Grid, Text, VStack } from '@devup-ui/react';
import Link from 'next/link';
import Description from './Description.mdx';

import { Icons } from '@/components/icons/components'
import { COMPONENT_GROUPS } from '@/constants'
import { Icons } from '@/components/icons/components';
import { COMPONENT_GROUPS } from '@/constants';

import Card from '../Card'
import Card from '../Card';

export default function Page() {
return (
<VStack gap="16px">
<Text color="$primary" typography="captionBold">
<VStack gap='16px'>
<Text color='$primary' typography='captionBold'>
Overview
</Text>
<Text color="$title" typography="h4">
<Text color='$title' typography='h4'>
Devup UI Components
</Text>
<Text color="$text" typography="bodyReg">
Devup UI is a library of components that can be used to build web
applications. It is built with React and TypeScript and is designed to
be used with the Devup framework.
<Text color='$text' typography='bodyReg'>
<Description />
</Text>
<VStack gap="16px" overflow="visible" py="30px">
<Text color="$title" typography="h6">
<Text color='$title' typography='h4' pt='30px'>
Examples
</Text>
<VStack gap='16px' overflow='visible' pb='30px'>
<Text color='$title' typography='h6'>
Form
</Text>
<Grid
Expand All @@ -41,46 +43,45 @@ export default function Page() {
.split('-')
.map((item) => item.charAt(0).toUpperCase() + item.slice(1))
.join('')}Comp`
]
];
return (
<Link
key={component}
className={css({ textDecoration: 'none' })}
href={`/components/${component}`}
>
<Card>
<Center h="140px">
<Center h='140px'>
<Icon className={css({ w: '100%' })} />
</Center>
<Flex
alignItems="center"
borderTop="1px solid $border"
gap="10px"
px="16px"
py="12px"
alignItems='center'
borderTop='1px solid $border'
gap='10px'
px='16px'
py='12px'
>
<Text
color="$text"
textAlign="right"
typography="buttonSmid"
color='$text'
textAlign='right'
typography='buttonSmid'
>
{component
.split('-')
.map(
(item) =>
item.charAt(0).toUpperCase() + item.slice(1),
(item) => item.charAt(0).toUpperCase() + item.slice(1)
)
.join(' ')}
</Text>
</Flex>
</Card>
</Link>
)
);
})}
</Grid>
</VStack>
<VStack gap="16px" overflow="visible" py="30px">
<Text color="$title" typography="h6">
<VStack gap='16px' overflow='visible' py='30px'>
<Text color='$title' typography='h6'>
Layout
</Text>
<Grid
Expand All @@ -92,7 +93,7 @@ export default function Page() {
'repeat(4, 1fr)',
'repeat(5, 1fr)',
]}
overflow="visible"
overflow='visible'
>
{COMPONENT_GROUPS.Layout.map((component) => {
const Icon =
Expand All @@ -101,46 +102,45 @@ export default function Page() {
.split('-')
.map((item) => item.charAt(0).toUpperCase() + item.slice(1))
.join('')}Comp`
]
];
return (
<Link
key={component}
className={css({ textDecoration: 'none' })}
href={`/components/${component}`}
>
<Card>
<Center h="140px">
<Center h='140px'>
<Icon className={css({ w: '100%' })} />
</Center>
<Flex
alignItems="center"
borderTop="1px solid $border"
gap="10px"
px="16px"
py="12px"
alignItems='center'
borderTop='1px solid $border'
gap='10px'
px='16px'
py='12px'
>
<Text
color="$text"
textAlign="right"
typography="buttonSmid"
color='$text'
textAlign='right'
typography='buttonSmid'
>
{component
.split('-')
.map(
(item) =>
item.charAt(0).toUpperCase() + item.slice(1),
(item) => item.charAt(0).toUpperCase() + item.slice(1)
)
.join(' ')}
</Text>
</Flex>
</Card>
</Link>
)
);
})}
</Grid>
</VStack>
<VStack gap="16px" overflow="visible" py="30px">
<Text color="$title" typography="h6">
<VStack gap='16px' overflow='visible' py='30px'>
<Text color='$title' typography='h6'>
Theme
</Text>
<Grid
Expand All @@ -152,7 +152,7 @@ export default function Page() {
'repeat(4, 1fr)',
'repeat(5, 1fr)',
]}
overflow="visible"
overflow='visible'
>
{COMPONENT_GROUPS.Theme.map((component) => {
const Icon =
Expand All @@ -161,44 +161,43 @@ export default function Page() {
.split('-')
.map((item) => item.charAt(0).toUpperCase() + item.slice(1))
.join('')}Comp`
]
];
return (
<Link
key={component}
className={css({ textDecoration: 'none' })}
href={`/components/${component}`}
>
<Card>
<Center h="140px">
<Center h='140px'>
<Icon className={css({ w: '100%' })} />
</Center>
<Flex
alignItems="center"
borderTop="1px solid $border"
gap="10px"
px="16px"
py="12px"
alignItems='center'
borderTop='1px solid $border'
gap='10px'
px='16px'
py='12px'
>
<Text
color="$text"
textAlign="right"
typography="buttonSmid"
color='$text'
textAlign='right'
typography='buttonSmid'
>
{component
.split('-')
.map(
(item) =>
item.charAt(0).toUpperCase() + item.slice(1),
(item) => item.charAt(0).toUpperCase() + item.slice(1)
)
.join(' ')}
</Text>
</Flex>
</Card>
</Link>
)
);
})}
</Grid>
</VStack>
</VStack>
)
);
}